新人SEの学習記録

14年度入社SEの学習記録用に始めたブログです。気づけば社会人3年目に突入。

学習記録:CSS実践入門

[学習記録] CSS実践入門

内容:6章 CSS実践入門

CSSレイアウトパターン
  • CSSを使ったレイアウト
    • 昔から良く使われるfloatを使った方法
    • dispay:inline-blockやdiaplay:tableを使った方法
    • CSS3のレイアウト系モジュールのプロパティを使った方法
  • float
    • tableタグを使ったテーブルレイアウトからの脱却
      • 要素を指定の方向(left, right)に浮かせて移動させることでカラムレイアウトなどを実現
      • 単純な左右への配置ではなく、浮いている状態ということを考慮するのが肝
    • 子要素がfloatの場合、親要素の高さが0となってしまう
      • その結果、親要素の背景色や画像が表示されないなどの問題が発生
      • clearプロパティによりfloatを解除することで解決
      • シンプルな2カラム+フッタ構成ならば、後続するフッタカラムでclear:bothを適用すれば良い
.main {
  float: left;
  width: 700px;
}

.sidebar {
  float: right;
  width: 240px;
}

.footer {
  clear: both;
}
  • display:inline-block
    • display:inlineのような振る舞いを基本としながら、display:blockのようにwidth/height、margin/paddingが使える
      • floatなどを使わずに水平に並べることができる
      • 親要素がtext-alignのスタイルを持っている場合はそれに従うため、要素を横に並べながら中央寄せにするなども可能
    • 欠点:並べた要素間に謎の隙間が発生
      • HTML上で要素間に改行があった場合に発生
      • 解決策1) HTMLの改行を除く
      • 2) 閉じタグを省略する
      • 3) 要素間に空のコメントアウトを入れる
      • 4) CSSで解決する
.pagenation {
  text-align: center;
}

.pagenation > li {
  display: inline-block;
}

.pagenation > li > a {
  display: inline-block;
  width: 2em;
  line0height: 2em;
}
<!-- 隙間発生 -->
<ul class="pagenation">
  <li><a href="#1">1</a></li>
  <li><a href="#2">1</a></li>
  <li><a href="#3">1</a></li>
</ul>

<!-- 要素間の改行を無くす -->
<ul class="pagenation">
  <li><a href="#1">1</a></li><li>
  <a href="#2">1</a></li><li>
  <a href="#3">1</a></li>
</ul>

<!-- 閉じタグを無くす -->
<ul class="pagenation">
  <li><a href="#1">1</a>
  <li><a href="#2">1</a>
  <li><a href="#3">1</a>
</ul>

<!-- コメントを挟む -->
<ul class="pagenation">
  <li><a href="#1">1</a></li><!--
  --><li><a href="#2">1</a></li><!--
  --><li><a href="#3">1</a></li>
</ul>
  • display:table
    • display:tableと子要素に与えるdisplay:table-cellは、tableがデフォルトで持つスタイルを他の要素に持たせることが可能
      • table-layout:fixexと合わせて使うことで、子要素の数が不特定でも均等幅で広がるレイアウトを作成可能
    • デメリット
      • 親要素の幅を子要素が溢れても改行されない
      • 一部の古いブラウザではdisplay:table-cellを持つ要素に対するposition:relativeが効かない
  • display:flex
    • CSS Flexboxは、その名の通り柔軟にレイアウトできるCSS3のプロパティ
      • display:tbleのように子要素の数が不特定でも均等幅に並べたり、その上で適切な余白を空けたりできる
      • 並べる順番をCSSプロパティで指定したり、逆順で並べたりできる機能も持つ
    • 基本的なプロパティと機能
      • 親要素にdisplay:flexを適用
      • 要素がどの方向(水平・垂直)にどの向き(マークアップ順・逆順)かを指定
      • justify-contentプロパティでflexboxの特徴的なレイアウト(水平方向)を反映可能
      • align-itemsでは垂直方向の配置を決定
      • 子要素にはorderプロパティで任意の順番に並べ替えることが可能
.flex {
  display: flex;
  flex-direction: row;
}

.flex-item:nth-child(1) {
  order: 2;
}
.flex-item:nth-child(2) {
  order: 3;
}
.flex-item:nth-child(3) {
  order: 1;
}
セレクタの理解を深める
/* その1 */
ul.links li a {...}

/* その2 */
ul.links a {...}

/* その3 */
.links a {...}

/* その4 */
.links-target{...}
破綻しにくいCSSの設計
  • より良いCSS設計のゴール
    • 予測しやすい
      • そのルールに期待通りに振る舞うかどうか
      • 新しいルールおを追加したつもりが、既存のルールで上書きされてしまう、など
    • 再利用しやすい
      • ほとんどのプロジェクトの画面設計では、その仲にいくつかの同じパターンが存在
      • CSSでそうした同じパターンに合わせたルールを何度も書くことがないように
      • 全く同じ見た目の.news-headingと.about-headingを作るのではなく、.headingを一つ作れば良い
    • 保守しやすい
      • 新しいルールを追加するときに、既存のルールを修正・更新する必要が無い
      • 予測しやすいかどうかに等しい
    • 拡張しやすい
      • これまでの話と関わってくる
      • 新しいルールの追加や既存のルールの改修が容易かどうか
  • コンポーネント設計
    • CSSのルールひとつひとつを部品として考え、それらを組み上げて作り上げていく
    • 再利用性や保守・拡張しやすさを高めることになる
    • OOCSS
  • OOCSS(オブジェクト指向CSS
    • 構造と見た目の分離
      • コンポーネントの基本構造と具体的なルール・機能を分離する
      • 画面上にシステム的なメッセージボックスを表示するコンポーネント .message
      • メッセージボックスのバリエーション .warning, .error, .success
      • HTMLのクラス属性には複数値を持たせることができるので、組み合わせてメッセージボックスを作る class="message warning"
    • コンテナとコンテンツの分離
CSSプリプロセッサの活用
  • Sass/Stylus/LESS
    • CSSプリプロセッサには、Ruby実装のSass、Node.js実装のLESS、Stylusなどがある
    • 多くの開発者に使われており、開発が進んでいるSassについて解説
  • Sass環境のセットアップ
    • gemでインストール可能
gem install sass
  • Sassのコンパイル
    • .sassまたは.scssの拡張子で保存後、コンパイルしてCSSファイルを出力する
      • .sassはインデントを使った記法で、CSSとは異なる構文だが慣れると書きやすい
      • .scssはCSSと同じ構文で書ける
      • コマンドはsass --watch(変更があると自動コンパイル) before.scss:after.css
/* sass */
body
  background-color: black

/* scss */
body {
  background-color: black
}
  • CSSプリプロセッサの機能
    • ネスト
      • コードを入れ子にすることで、セレクタをコンパクトに書ける
      • ただし、出力されるCSSファイルはセレクタが多く詳細度が高いルールセットが増えてしまうことに注意
.nav {
  overflow: hidden;
  > li {
    float:left;
    > a {
      display:block;
      &:hover {
        background-color: yellowgreen;
      }
    }
  }
}
    • 演算
      • 四則演算
      • parcentage()
.section {
  width: parcentage(600px / 960px);
}
    • 変数
      • $からキーとなる値を宣言し、セット
      • 値を呼び出すときは $変数名 で呼び出し
$brandColor: #2E8320;

body {
  background-color: $brandcolor;
}
    • Mixin
      • @mixinで定義したコードを@includeで呼び出すことが可能
      • 再利用性を大きくあげる
      • 引数を使うことも可能