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

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

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

読んだ本

読んだ理由

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

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

内容

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:フレックスアイテムの伸びやすさを設定する方法(初期値は0)
③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規則に条件を書くことで適用

ドラッグによる直感的な操作(draggable属性)

HTML5ではdraggable属性を記述するだけで、ドラッグ可能になる。

ただしdraggable属性は要素をドラッグ可能にするだけなので、ドラッグが終わってドロップした後の処理はJavaScriptで書く必要がある。

参考記事のタイトルとURLを入力してください

本レビュー

この本のレビュー
ためになった
(3.5)
読みやすさ
(4.0)
すぐ使える
(4.5)
値段
(4.0)
総合評価
(4.0)

HTMLとCSSを知るだけでもかなり出来ることが増えるなあ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です