HTML・CSS

Webサイトの「テキストの前にアイコンを付けたい」「見出しの左に装飾ラインを引きたい」などの時に活用したいのがCSSの擬似要素。擬似要素を利用すれば、CSSだけで要素の前後や特定の部分にスタイルを適用できます。CSSの代表的な擬似要素や基本的な使い方を解説します。

「テキストの前にアイコンを付けたい」「見出しの左に装飾ラインを引きたい」等の時、HTMLでもできますが見た目のために要素を増やすとコードが複雑になります。CSSの擬似要素を利用すれば、CSSだけで要素の前後や特定の部分にスタイルを適用できます。ここでは、CSS擬似要素とは何か？CSSの代表的な擬似要素や基本的な使い方について解説します。

ホームページの印象を左右する背景色の設定はCSS必須スキルの一つです。単純に画面全体の背景色を設定するだけでなく要素を指定して色を付けることもで、デザインの幅が大きく広がります。ホームページの背景色、デザインをHTML、CSSで設定する方法や、背景色がうまく反映されないときの対処方法について解説します。

Webサイトの閲覧はPCたスマホ、タブレットなど多様なデバイスが使われるため、色々な閲覧環境を前提にWebサイトを設計する必要があります。CSSによる文字サイズの指定の応用編として画面に合わせて文字サイズを動的に変更(VW､VH、CLAMP関数、メディアクエリ)する方法を解説します。

誰もが読みやすいWebサイトを作る上で文字サイズは重要な要素です。CSSではさまざまな単位やキーワードを使って文字サイズを指定､変更（数値と単位で指定orキーワードで指定）できます。ここではCSSによる文字サイズの指定方法や単位の種類を分かりやすく解説します。

CSSはHTML文書の見た目をよくするために視覚的なデザインを定義します。HTMLをCSSに埋め込む方法にはHTMLファイル内に記述する方法とHTMLファイルとは独立したCSSファイルをリンクさせる方法があります。HTMLのCSSへの埋め込み方やCSSの基本的な設定方法を分かりやすく解説します。

HTMLのリストタグ(箇条書きタグ)の組み合わせは「ulとli」、「olとli」の2つだけですが、装飾の仕方やリストタグ内でのタグの使い方にはいくつかのルールがあります。ここではリストタグの種類(ul､li､ol)、書き方、正しい使い方や注意点について分かりやすく解説します。

ホームページには文字列や画像をクリックすると他のページや特定場所へ移動する「リンク(ハイパーリンク)」機能があります。HTMLの内部リンク外部リンクの貼り方やリンクを設定する上で重要なパスの書き方他のページの特定場所への飛ばし方などを紹介します。

レスポンシブデザインviewportとはWebサイトのコンテンツの表示領域をPCやスマートフォンなどデバイスごとに設定するmeta要素です。viewportを設定していないサイトをスマホで表示すると、表示領域が最適化されずサイト全体が縮小して表示されたり、デバイスの横幅におさまらず見づらいサイトになります。viewportのHTMLでのmeta要素の意味や書き方、Google推奨の設定を解説します。

HEAD要素を使って検索エンジンにサイトの情報を提供し、検索上位に表示させたり、検索結果の表示内容を分かりやすくしてサイトへの訪問を促します。HEAD要素とは何かについて解説し、HEADタグの意味、中身、書き方、作り方・テンプレートを紹介します。