CSSは「Cascading Style Sheets」の略で、WebサイトやWebアプリのレイアウトやデザインを制御するスタイルシート言語です。 CSSを使うことで、HTMLの構造とデザインを分離でき、同じHTMLに対して異なるスタイルを適用したり、複数のページで一貫したデザインを保つことができます。 文字スタイルの例 h1 { color: blue; ...
CSSでテキストの色を変えるには、'color'プロパティを使います。'text-color'や'font-color'ではないことに気を付けてください。主に3パターンの方法で色を指定できます。 コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <met...
フォントサイズ指定は様々あり、難しい法則のものもあります。下記コードをHTMLファイルとして保存し、ブラウザで開き、様々なデバイスサイズで試すことをお勧めします。 'vw'や'vh'、'rem'などのレスポンシブな振る舞いは理屈よりも見てみることで理解が深まります。 コード <!DOCTYPE html> <html lang="ja"> <head> ...
フォントの太さを指定するには、CSSの font-weight プロパティを使います。数値もしくは名前で指定します。 ただし、使用しているフォントが対応する太さを持っている場合にのみ有効です。フォントによっては、normal と bold しか用意されていないこともあります。 コード <!DOCTYPE html> <html lang="ja"> <hea...
コードでデザインを表現することは複雑なので、まずは全体を把握していきましょう。 レイアウト display要素の法則を決めます。'block'にすると、その行を丸々使います。'inline'にすると、その要素の大きさ（長さや文字数）だけを使います。'flex'にすると、様々なことができます。'grid'にすると、様々なことができますが、flexより規則的です。 positio...
spanタグはインライン要素で横並び、divタグはブロック要素で縦ならび。displayプロパティではそれらを自在に調整できます。 'display: block;' されている要素は、その行を丸々使うブロック要素となり、複数を並べると縦に並ぶことになります。 'display: inline;' されている要素は、その要素の長さや文字数が幅となり、複数を並べると横に並ぶことになりま...
ページをスクロールしても要素を常にブラウザの表示領域（ビューポート）内の特定の位置に固定したいときに'position: fixed;'を使います。 画面最上部に固定されるグローバルナビゲーションや、スクロールしても常に表示させたい広告などによく使われます。 コード 例 <!DOCTYPE html> <html lang="ja"> <head> ...
'position: relative;'を付与すると、'top, right, bottom, left'を使って本来の位置から相対的に自由な配置が可能になりますが、実際には、relativeを親要素にして、absoluteを子要素にする方法が便利なpositionの使い方です。 'position: absolute;'を付与すると、ブロック要素でもインライン要素でもなく、特別な浮いた...
'position: sticky;'を付与すると、その要素がスクロールによって特定の位置に達したところで固定される（粘着する）ように振る舞います。 ヘッダーやサイドバーなどスクロールしても画面の一部に留まり続けるような処理によく使われます。 下記コード例をHTMLファイルで保存してブラウザで開いてスクロールしてみてください。緑色の見出しがスクロールして画面上部に到達すると、その位置...
'margin'は外側の余白で'padding'は内側の余白です。例えば、'margin'を増やすと隣の要素との距離が増えますが、'padding'を増やしてもそうはなりません。 実際にコードとその描画を見た方が分かりやすいと思います。 コード <!DOCTYPE html> <html lang="ja"> <head> <meta ch...
