記事一覧 - WEBST8のコードブログ

2024/8/18

【dl・dt・dd】HTML説明リストタグの意味と使い方

HTMLのdl・dt・ddタグは説明リストタグといい、「用語の説明」や「Q＆A」「お知らせ(日付とタイトル)」などでよく用いられます。今回はdl・dt・ddの使い方について解説します。 dl・dt・ddタグの概要 dl・dt・ddタグは説明リストタグといい、「用語の説明」や「Q＆A」「お知らせ(日付とタイトル)」などでよく用いられる、HTMLタグです。 ■dl・dt・ddタグ(説明リストタグ)が使用される例用語の説明 Q&A ...

2024/8/18

【CSS text-decorationの使い方】文字テキストの装飾方法

今回はテキストに下線・上線・訂正線などの装飾する際に使用するCSStext-decorationの使い方を解説します。 ■text-decorationでは線の位置や種類、色、太さを一括指定することができます。

<p>ここに<span style="text-decoration: underline solid red 3px;">テキスト</span>が入ります。</p>

1	<p>ここに<span style="text-decoration: underline solid red 3px;">テキスト</span>が入ります。</p>

■よく使う例の一つはリンクaタグの下線を消す例です。text-decorationを指定し、値を「none」としてあげればOKです。

<p>ここは<span style="text-decoration: none;">リンク</span>です。</p>

1	<p>ここは<span style="text-decoration: none;">リンク</span>です。</p>

&n ...

2024/8/18

【CSS擬似要素】::before ::afterの意味と使い方・活用例

今回はCSSの擬似要素::before、::afterの使い方を解説します。「CSSで吹き出しデザインを作りたい」「リストの先頭に好きな画像を表示させてオリジナルデザインのリストを作成したい」といった際に擬似要素::before、::afterを使うと非常に便利です。擬似要素before、afterとは？ before、afterは要素の一部に対してのみCSSを効かせることができる「擬似要素」と呼ばれるものの1つです。これを使うとCSSで対象となる要素の内側に子要素として ...

2024/8/18

HTML リンクタグ<a href=" ">の使い方やよく使う属性

今回はHTMLのaタグの使ってリンクを設定する方法を紹介していきます。 aタグを使うことで任意のページへに移動だけでなく、同一ページ内のある箇所に移動する「ページ内リンク」や、クリックするとメールソフトが開くといった「メールリンク」等も作ることができます。

<a href="https://webst8.com/">ここにテキストが入ります</a>

1	<a href="https://webst8.com/">ここにテキストが入ります</a>

aタグの基本的な使い方 aタグの基本的な使い方は下記の通り。飛び先の指定にはhref属性を指定するリンクの飛び先の指定にはhr ...

2024/8/18

【HTML divタグ】divの意味と使い方をわかりやすく解説

divタグはdivision(分割)から由来しており、「ある部分をグループ化してCSSでレイアウトを変えたい」といった時などに使用されます。 imgタグやaタグと違って直接見た目や動作に変化がないので、いまいち意味や役割がわからない方も多いのではないでしょうか。今回は、divの意味や利用シーンなど、divタグの使い方を解説します。 divタグとは？ divタグはdivision(分割)から由来しており、「ある部分をグループ化してCSSでレイアウトを変えたい」といった時などに使 ...

2024/8/18

【HTML見出しタグ】h1~h6タグの使い方と注意点

今回はHTMLタグの見出しタグ(h1~h6タグ)の使い方について解説します。 HTMLの見出しタグ(hタグ)とは？ HTMLの見出しタグ(h1~h6タグ)は、文章の「見出し」を設定することができるHTMLタグです。見出しの種類には<h1>から<h6>まで合計6つの種類があり、h1が最も大きい見出しでh6が最も小さい見出しになります。 h1~h6タグの表示をブラウザ上で確認してみると、デフォルトでは以下のようにh1、h2タグなどは文字サイズが大きくなり、 ...

2024/8/1

【リセットCSSとは】使い方やおすすめのリセットCSSを紹介

HTMLやCSSでWebページを作成・カスタマイズしようとした際に、Webブラウザによって意図せぬ余白がついていたり、フォントがブラウザによって異なったりすることがあります。 Webブラウザには、ブラウザ固有のスタイル(CSS)が効いているためです。ブラウザ毎の差異をなくすために、リセットCSSを利用してデフォルトのCSSをリセットしてコーディングを行うことが多いです。今回はリセットCSSの概要や使い方、おすすめのリセットCSSをいくつか紹介していきます。 &n ...

2024/8/18

VSCode 導入しておくと便利な拡張機能・おすすめプラグイン

VSCodeはインストールした初期状態でも高機能なテキストエディタでそのまま利用できますが、いくつかのプラグインを入れることでより便利に使えるようになります。今回は、HTML/CSSを学び始めたばかりの方やコーディング作業を効率化したい方のために、おすすめのプラグインをいくつかご紹介します。 VSCodeは開発が進んでおりデフォルトでも十分高機能になっているため、それほど多くのプラグインを入れる必要はなくなってきています。とはいえ、作業を効率化するためにプラグインはあったほうが便利なので、最低限必要な ...

2024/8/18

VSCodeで拡張機能・プラグインをインストール追加する方法

Visual Studio Code(以下VSCode)では、HTMLやCSSを記述する際に、便利な拡張機能(プラグイン)が豊富に用意されています。 VSCode単体でも高機能なので、プラグインを使わないでコーディングすることももちろんできますが、プラグインを追加しVSCodeの機能をさらに拡張することで、効率よくコーディングができたり、コードを見やすくしたり、早くコードを打つことができるようになります。インストール方法もとても簡単で、設定するのに時間もかかりません。今回はVS Codeのインストール方 ...

2024/8/18

【OGPとは】OGPの基本と使い方や設定方法を解説

OGPはOpen Graph Protocolの頭文字を取ってできている言葉で、FacebookやTwitterなどSNS上でサイト(の記事)がシェアされた時の表示画面(例: サムネイルやタイトル、抜粋分など)を設定することが出来る仕組みのことを言います。 OGPを正しく設定することで、FacebookやTwitterなどのSNSから新しいユーザーを増やすのに役立ちます。今回はOGPを設定してサイトがSNSでシェアした時の表示の設定方法をご紹介していきます。 ■(参考)Facebookで記 ...

2024/8/18

システムフォントとは？Webフォントとの違いやデメリット

システムフォントはPCやスマホなどの端末OSにあらかじめインストールされているフォントです。表示速度が早い反面、端末によってフォントが微妙に変わります。一方、Webフォントはインターネット上の外部にあるフォントです。ネット上からフォントを読み込む分表示速度が少し遅くなりますが、端末によら同じフォントになります。今回はシステムフォントとWebフォントの違いや両者のメリット・デメリットをご紹介していきます。システムフォント Webフォントメリット表示速度が早いユーザーの閲覧環境に左右 ...

2024/8/18

pointer-events:none;によるクリックの無効化方法

今回はCSSのプロパティであるpointer-event:none;でクリックイベントを無効化する方法とよくある使用例をご紹介します。「スマホではクリックできる電話発信リンクをPCではクリックできないようにしたい」などといった場面などに活用することができます。 pointer-events:none; 対象要素に対して、クリックやタッチ、ホバーイベントなどを無効化する。キーイベント(キーボード操作)に関しては無効化されない点に注意 ponter- ...

2024/8/18

target= "_blank"で使われるrel="noopener noreferrer"の意味

WordPressなどでaタグでtarget="_blank"を設定した際に、rel="noopener"またはrel="noopener noreferrer"という記述が自動で追加されていて気になった人もいるのではないでしょうか。 noopenerもnoreferrerのどちらもセキュリティ的な意味があります。なおnoreferrerがあるとリファラ取得ができないようになります。今回は、noopennerおよびnoreferrerの意味と挙 ...

2024/8/18

VSCodeでHTML・CSSファイルを作成する手順

せっかくVisual Studio Code（以降、VSCode）をインストールしたけれど、使い方がいまいちわからない・・そんな方もいらっしゃると思います。今回は、VSCodeをインストール後に、実際にHTML・CSSファイルを作成してWebページを作っていく方法をご紹介します。 VSCOdeをまだインストールしていない方は「【VSCode】Visual Studio Codeのインストール・設定手順」をあわせてご参照ください。関連記事 Visual Studio Code(VS Code)を始めたば ...

2024/8/18

【VSCode】Visual Studio Codeのインストール・設定手順

HTMLやCSSでコードを書く際に「Visual Studio Code(略称VSCode)」というテキストエディターが最近人気が集まっています。今回はVisual Studio Code（以降、VSCode）のインストールと初期設定方法をご紹介します。関連記事 Visual Studio Code(VS Code)を始めたばかりの方向けの関連記事はこちら VSCodeでHTML・CSSファイルを作成する手順 VSCodeで拡張機能・プラグインをインストール追加する方法 VSCode 導入しておくと便 ...

2024/8/18

【HTML ul・ol・liタグ】箇条書きリストタグの使い方

今回はHTMLのul・ol・liタグを使用して箇条書きリストを作成する方法およびよく使われる活用例を紹介していきます。 ■順番なしの箇条書き(ul・li)

<ul>
  <li>1行目のテキストが入ります</li>
  <li>2行目のテキストが入ります</li>
  <li>3行目のテキストが入ります</li>
</ul>

<ul>

<li>1行目のテキストが入ります</li>

<li>2行目のテキストが入ります</li>

<li>3行目のテキストが入ります</li>

</ul>

■順番ありの箇条書き(ol・li)

<ol>
  <li>1行目のテキストが入ります</li>
  <li>2行目のテキストが入ります</li>
  <li>3行目のテキストが入ります</li>
</ol>

<ol>

<li>1行目のテキストが入ります</li>

<li>2行目のテキストが入ります</li>

<li>3行目のテキストが入ります</li>

</ol>

ul・ol・liタグを使用した箇条書きリストの作り方ブログやホームページでHTMLで箇条書き(リスト)を作りたい場合はul・liタグ(順番なし ...

2024/8/1

【CSS line-heightの使い方】行の高さ・行間の指定方法

今回はline-heightでて、行の高さの指定・行間の指定方法を紹介します。テキストの行間などを調整したい場合にline-heightはよく利用されるので、覚えておくと便利です。※厳密には行間ではなく行の高さを指定するプロパティです。

p{
  line-height: 40px;
}

line-height: 40px;

}

line-heightは行間・行の高さ調整のCSS line-heightプロパティは行の高さを指定するのに使用されるCSSプロパティです。冒頭で行間を調整したい場合に使用す ...

2024/8/1

【CSS text-alignの使い方】文字の行揃え・寄せ指定をする方法

今回はtext-alignプロパティの使って文字(テキスト)を左揃え・中央揃え・右寄せ揃えにしたりする方法を解説していきます。 CSSを勉強し始めたばかりの頃だと「text-alignプロパティが上手く効かない…。」といった方も多いので、本記事を参考にしてみてください。 text-alignは行揃えのスタイルCSS text-align(テキストアライン)プロパティは、指定した要素の中にあるテキストや画像などの水平方向の配置を指定することができるプロパティです。 text-al ...

2024/8/18

HTML tableタグの使い方・テーブル表の作り方

今回は、HTMLの学習を始めたばかりの初心者の方を対象に、テーブルタグ(table)を利用して、表を作る方法を説明していきます。テーブルタグ tableの基本的な使い方まずはテーブルを使った表作成の基本を説明していきます。表を作成したい場合は、tableタグを含めて複数のタグを利用して構成します。よく使うタグは下記の通りです。タグ意味 table【最重要】テーブルを定義 tr【重要】table rowの略。テーブルの行を定義。 th【重要】table he ...

2024/8/18

【HTML imgとは】画像イメージimgタグの使い方・作り方

今回は、HTMLの勉強を始めた初心者に、画像を挿入するタグ「imgタグ（イメージタグ）」の基本的な使い方・作り方を説明していきます。画像・イメージタグとはimgの基本的な使い方 imgタグ(<img>はImageの略)は、画像をWebブラウザ上に表示するHTMLタグの一つです。基本的な書き方は以下のとおり。

<img src="画像がある場所(相対パスまたは絶対パスで指定)" alt="画像の補足説明となるテキスト。日本語可能">

1	<img src="画像がある場所(相対パスまたは絶対パスで指定)" alt="画像の補足説明となるテキスト。日本語可能">

imgタグの末尾にスラッシュ(/)をつけて< ...

2024/8/18

YouTubeチャンネル

個別指導Webスクール

【初心者向け】CSSセレクタの種類や指定方法を徹底解説

【構造化データとは？】メリットやタイプ・基本的な書き方を解説

【HTMLセマンティック要素とは】意味付けされた要素・意味と使い方

HTML改行タグbrの使い方・文中に改行を入れる方法

【Sass入門】導入方法やSCSS記法の基本的な書き方

WEBST8のコードブログ