Web Pro

CSS position（ポジション）を使って・画面右下にページトップボタンを固定する・スクロールしても追随する購入ボタンを画面下に固定する・長い表の見出し行（ヘッダー）をスクロール中も固定するUIを実装するユースケースを紹介します。「スクロールに合わせてUIをどう動かせばいいの？」「fixedとstickyはどう使い分ければいいの？」という疑問を解消します。

CSS positionでの・画像右上に表示するバッジ（ラベル）の作り方・画面中央に表示するモーダルウィンドウの作り方を初心者にも分かりやすく解説します。UIデザインパーツの実装方法を通して「なぜその配置になるのか」という考え方もあわせて理解できるように解説します。

CSSのpositionプロパティの種類（static、relative、absolute、fixed、sticky）と基本的な使い方、実務でよく使うユースケースについて解説します。Webサイトを作っていると「要素を特定の位置に固定したい」「他の要素と重ねて表示したい」「スクロールしても常に画面上部に表示させたい」といった対応が必要になる場面がありますが、HTMLの構造を変えずにCSSだけで要素の配置を細かくコントロールできるのがpositionプロパティです。

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)、書き方、正しい使い方や注意点について分かりやすく解説します。