プロジェクト

全般

プロフィール

Wiki » Web »

CSSの書き方メモ

レイアウト

マージンとパディング

混乱しやすいので整理します。いずれも配置で周囲との間に余白を設けますが、次のようになります。

  • マージンの方が外側、パディングの方が内側
  • マージンは、境界（Border）の外側、パディングは境界の内側に余白を作る

Grid

格子状に配置するレイアウトです。列と行、そして結合して複数の格子に配置することができます。
例えば、次のように、Webページに2行3列の格子状のレイアウトを設定するとします。

A B C
D E

ショートハンドな書き方

Gridコンテナーの定義

子要素に対してGridレイアウトを適用する要素をGridのコンテナーとして定義します。

.grid-2x3 {
  display: grid;
  grid-template:
    "A B C" auto
    "D D E" 1fr / auto 1fr 240px;
}
  • グリッドレイアウトを持つコンテナについて、display: grid; でグリッドコンテナと指定します。
  • grid-templateで、格子の行と列の数、および行のサイズ、列のサイズを設定します。
  • 1行目の列3個について、"A B C" と命名しています。
  • 2行目の列3個について、"D D E" と命名しています。
  • 格子について、同じ名前を指定すると、結合された領域となります。上述の例では、名前Dを2箇所に指定し結合させています。
  • A, B, C, D, E は名前で、適宜命名できます。
  • 行の高さは、各行の格子の名前の定義の後ろに指定します。
    • "A B C" auto は、1行目の高さを自動設定としています。
    • "D D E" 1fr は、2行目の高さを、Gridコンテナーの高さから他の行を除いた残りのサイズを指定しています。
  • 列の幅は、最後の行の設定の後ろに、/ で区切って記述します。
    • "D D E" 1fr / auto 1fr 240px; は、列の幅を、1列目：自動設定、2列目：コンテナの幅から他の列の幅を除いた残り、3列目は240ピクセル を設定しています。
  • auto: そこに配置される要素の高さに合わせるが、autoを指定した行またはautoを指定した列にfrが含まれていない場合、frと同様残りの領域が割り当てられる。
  • 1fr: Fractionの略語。コンテナの大きさから、fr以外の指定で必要とするサイズを除いた残りを割り当てる。2つの格子に1fr 1frと割り当てると、残りの大きさを等分して割り当てる。2fr 1frとすると、残りの大きさを2:1に配分する。
  • 240px: 大きさをピクセル単位で指定する
Gridコンテナーに配置する要素の設定

配置する要素に対応する記述に、grid-areaで名前を指定します。

.logo {
  grid-area: A;
}
.title {
  grid-area: B;
}
.exit {
  grid-area: C;
}
.main {
  grid-area: D;
}
.side {
  grid-area: E;
}
HTMLの記述例
<div class="grid-2x3">
  <nav class="logo"><img src="images/logo.png" /></nav>
  <header class=title"> ... </header>
  <nav class="exit"><a href="top">Exit</a></nav>
  <main class="main"> ... </main>
  <aside class="side"> ... </aside>
</div>

Flexbox

次のように、メインのコンテンツの右側にサイドバーを表示する、２カラムレイアウトを行います。

main side-bar

T.B.D.

画像

背景

背景に画像を張るときの記述例です。

タイリング

引き伸ばし

1枚の画像をWebページ全体に引き伸ばして使用する場合の指定です。

body {
    background-image: url(../images/bg_main.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
  • background-repeatにno-repeatを指定し、繰り返し（タイリング）を抑制
  • background-sizeにcoverを指定し画像のアスペクト比を維持したまま画像を引き伸ばし。ブラウザ画面から画像がはみ出る部分は切れます。
    アスペクト比の維持による引き延ばしを超えた長さのコンテンツを表示する場合、スクロールしていくと画像が切れています。
  • background-attachmentにfixedを指定し、縦にスクロールした際に背景画像が切れないようにする

スタイルガイド

Google HTML/CSS Style Guide

https://google.github.io/styleguide/htmlcssguide.html

CSSに関するガイド抜粋

  • インデントは2スペース
  • タグ名、属性名などのコードは小文字で記述
  • UTF-8エンコーディング使用
  • コメントは、/* コメント */
  • TODOの記載は、大文字でTODO を記載
  • 属性id、属性classの値は、小文字で単語間はハイフン、適宜略して簡潔に命名
  • idセレクタよりクラスセレクタを使う
  • プロパティはまとめて記述できる形式を好む
  • プロパティはアルファベット順に記述
  • プロパティ名（コロンまで含む）と値の間に1スペース

約1ヶ月前に更新