【技術書アウトプット③】図解 HTML5&CSS3[最新版]

甘党エンジニアのkanjiです。

技術書アウトプット第3弾。

読んだ本

図解HTML5＆CSS3

posted with ヨメレバ

リブロワークス技術評論社 2015年10月24日

楽天ブックス

Amazon

Kindle

読んだ理由

スクールまでの通学バスで、サクッと読める技術書が欲しくて購入。

内容はタイトル通り。
いくつか知識をピックアップして書いていく。

内容

PDFファイル楽々ダウンロード(download属性)

<a href="sample.pdf" download="">PDFダウンロード</a>

a要素にdownload属性を追加することで、例えばこんな感じでPDFをリンク設定できるようになる。

WordPressにもプラグイン不要で埋め込みができるので嬉しい。

順番を条件にする擬似クラス(child)

順番を条件にする擬似クラス、リストやメニューのような同じ構造が繰り返すもののスタイルを的確に整えることができる。

例えば「first」または「last」で名前の始める擬似クラスは、先頭または最後の子要素に適用される。

li:first-child{
 border-radius: 8px 8px 0px 0px;
}#最初のliだけ角を丸める
li:last-child{
 border-radius: 0px 0px 8px 8px;
}#最後のliだけ角を丸める

li:nth-child(3n+1)とすると、1・4・7・10..の周期のliにだけプロパティが適用される。

複雑なレイアウトを操る(Flexible Box)

Flexible Box(フレキシブルボックス)は段組みをはじめとした複雑なレイアウトを記述するための仕様。

親となる要素を「フレックスコンテナ」その中に入る要素を「フレックスアイテム」と呼ぶ。

要素をフレックスコンテナにするには、displayプロパティでflexを指定する。

主軸の方向はflex-directionプロパティで指定。

.container{
  display: flex;
  flex-direction: row;
}

flex-directionの値について

値	はたらき
row	省略時のデフォルト値で、現在のインライン軸(テキストが流れる方向)と同じ方向になる。通常は左から右方向
row-reberse	rowと逆方向になる。通常は右から左方向
column	rowと直交する方向になる。通常は上から下方向
column-reverse	columnと逆方向になる。通常は下から上方向

アイテムの揃え方は「justify-content」プロパティで設定する。

justify-contentプロパティの値について

値	はたらき
flex-start	主軸の開始位置に揃える。省略時のデフォルト値
flex-end	主軸の終了位置に揃える。
center	中央揃え
center	主軸の両端に揃え、間を均等に空ける
apace-between	各アイテムの両端の余白を同じだけ空ける

Flexible Boxでは、コンテナの幅に合わせて中のカラム(アイテム)の幅を柔軟に自動調整できる。

その方法は3つある。

3つのプロパティ

①flex-basis：フレックスアイテムの基本の幅をpxや%で指定する方法
②flex-grow：フレックスアイテムの伸びやすさを設定する方法(初期値は０)
③flex-shrink：フレックスアイテムの縮みやすさを設定する方法

レスポンシブWebデザイン（@media）

言わずもがな、PCとスマホ(タブレット)などサイズの違うデバイスに合わせてCSSを切り替える方法

.container{
  display: flex;
  flex-direction: row;
  max-width: 900px;
  margin: auto;
}

@media(max-width: 480px){
  .container{
    flex-direction:  column;
  }
}
→幅480px以下の画面で有効

@media規則に条件を書くことで適用