CSSのmin-widthとwidth、max-widthの違いについて

こんにちは！

今回はCSSのmin-widthとwidth、max-widthの違いについてまとめます。

ボタン例

<a href="#" class="btn">Lorem...</a>

.btn {
  display: inline-block
  padding: 20px 10px;
  /* width: 300px or min-width: 300px or max-width: 300px */
}

inline-block要素の場合

min-width: 300pxの場合

  • inline-block要素なので、要素の幅に合わせた幅になろうとするが、300pxよりは小さくならない

width: 300pxの場合

  • 300pxで固定される

max-width: 300pxの場合

  • 300pxより小さい範囲では要素の幅に合わせた幅になるが、300pxより大きくはならない

block要素の場合

min-width: 300pxの場合

  • block要素なので、横幅いっぱいに広がろうとするため全て最大幅になる

width: 300pxの場合

  • 300pxで固定される

max-width: 300pxの場合

  • 300pxより小さい範囲でも、横幅いっぱいに広がろうとするため、すべて300pxになる

使い分け

  • width: ボタンのサイズが決まっているとき
  • min-width: ある程度ボタンの大きさを統一した上で、改行をさせたくないとき
  • max-width: 最大幅を指定したいとき

おわりに

今回はCSSのmin-widthとwidth、max-widthの違いについてまとめました。いろんな要素が組み合わさった時に、うまくサイズ指定が出来ないときがあるので、今回のまとめを参考にしながらCSSを書いていきたいと思います。

90/100

参考書籍

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

Amazon

CSSでボタンをinline-blockにする理由

こんにちは！

今回はCSSでボタンをinline-blockにする理由についてまとめます。

ボタン例

<a class="btn" href="#">ボタン</a>

.btn {
  width: 300px;
  padding: 20px 10px;
  /* display: inline or block or inline-block? */
}

inline要素の場合

  • width: 300pxの指定が効かない
  • padding: 20px 10pxが他の要素に被る

block要素の場合

  • 親の段落のtext-alignが効かない

inline-block要素の場合

  • width:300px、padding: 20px 10pxも有効
  • 親の段落のtext-alignも有効

おわりに

今回はCSSでボタンをinline-blockにする理由についてまとめました。

結論としては、ボタンのサイズ指定ができて、なおかつ親要素と同じtext-alignに合わせられるという点から、ボタンにはinline-blockを使うと良いですね。

89/100

参考書籍

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

Amazon

CSSのcalcが便利

こんにちは！

今回はCSSのcalcが便利だったことについてまとめます。

やりたいこと

  • 画像のように、メインのコンテナからは離れた場所にボタンなどのサイドバーを設置したい

今回の方法

  • 今回はposition: absoluteで指定することにした
  • ただ、leftで位置を指定すると、画面幅を広げた時にcontainerとsidebarの位置が広がってしまう
  • sidebarはcontainerから一定の位置に固定したかったので、次のような位置指定をした
right: calc(50% + 500px + 30px)

何を指定したか

  • 最初の50%は画面幅の50%
  • 次の500pxはcontainerの横幅1000pxの半分
  • 最後の30pxはcontainerとside barの間に開けたい距離

calcの効果

  • calcを使うと、このように計算した結果を値として指定できて便利

おわりに

今回はCSSのcalcが便利だったことについてまとめました。自分で考えた方法なので、こういったケースでもっといいやり方などあればぜひ教えてください。

88/100

CSSは階層が深い方の優先度が高くなる

こんにちは！

今回はCSSは階層が深い方の優先度が高くなるということについてまとめます。

問題

  • レスポンシブなページを作っているときに、メディアクエリで正しくクラスを指定しても反映されない

解決方法

  • メディアクエリを使用していない箇所と同じ階層構造で指定する
    • 階層構造が深い方が、優先度が高いため

例

header {
  .mobile-header {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  .mobile-header {
    background-color: red;
  }
}
  • 上記の例は、通常サイズではheader -> .mobile-headerという階層構造で青を指定
  • メディアクエリの中では、.mobile-headerだけの階層構造で赤を指定
  • この指定方法だと、メディアクエリの適用サイズでも青から変わらない

優先度を考慮した指定

header {
  .mobile-header {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  header {
    .mobile-header {
      background-color: red;
    }
  }
}
  • 通常サイズと同様に、header -> .mobile-headerという階層構造になるように指定すると、想定通りの動きになる

おわりに

今回はCSSは階層が深い方の優先度が高くなることについてまとめました。レスポンシブ対応をしようとするときに、結構ここで詰まることがあったので忘れないようにしたいと思います。特に、CSSでネストすることが出来るようになってから、階層が深くなりがちなので気を付けたいです。

87/100

Chrome DevToolsの基本操作まとめ

こんにちは！

今回はChrome DevToolsの基本操作についてまとめます。

Chrome DevToolsとは

  • Google Chromeに付属しているWeb開発に役に立つツール
    • DeveloperTool、デベロッパーツール、開発者ツールとも呼ばれる
    • HTML、CSS、JavaScriptの動作を詳細に検討できる
    • パフォーマンス分析なども可能

起動方法

ショートカット 動作
F12 通常起動
Ctrl + Shift + I 通常起動
Ctrl + Shift + C Inspectモードで起動

Inspectモード

  • 選択した要素の詳細情報（HTML, CSS）が表示される
ショートカット 動作
Ctrl + Shift + C Inspectモードと通常モードを切り替え

HTMLの編集

  • 選択した要素のHTMLがElementsタブに表示される
ショートカット 動作
F2 or ダブルクリック 編集

CSSの編集

  • 選択した要素のCSSがElementsタブのStylesに表示される
ショートカット 動作
クリック 編集

ドラッグで数値変更

  • 数値はカーソルを合わせて左右にドラッグすることで変化可能
    • フォントサイズなど使用できない数値もある
    • paddingやmarginなどの距離関係で有効

マウスで数値変更

  • 数値は入力可能状態にした後、カーソル上下で変更可能
    • こちらはフォントサイズも変更可能

カラーピッカーを開く

  • 色指定の■をクリックするとカラーピッカーが開く

色のフォーマットを変更

  • 色指定の■をShift＋クリックすることで、RGBとHSLなどのフォーマットを変更できる

カラーパレットの変更

  • カラーピッカー画面の上下矢印のアイコンをクリックすることで、マテリアルデザインなどに対応したカラーパレットが表示される

スタイルの優先順位

  • Stylesの各スタイルは上が適用の優先順位が高く、下が低い

スタイルの影響を受けるHTML要素

  • Stylesの各スタイルにカーソルを合わせると、影響を受けるHTMLが画面上でハイライトされる

クラスの有効化、無効化

  • .cls を押すと、選択中の要素のクラスが一覧表示され、チェックボックスで有効・無効を選択できる

デバイスモード

ショートカット 動作
Ctrl + Shift + M デバイスモードと通常モードを切り替え

画面サイズの変更

  • 下図の赤枠をクリックすることで簡単にタブレットサイズやPCサイズに変更できる

メディアクエリの表示

  • 先ほどの図の右上のメニューボタンから、「Show media queries」を選択

コンソールパネル

ショートカット 動作
Esc コンソールの表示、非表示を切り替え

変更箇所を表示

  • 変更した箇所を - と + で色分けして表示するChangesタブを追加
    • 左上のメニューからChangesを選択

パフォーマンスモニターを表示

  • 同様に左上のメニューからPerformance monitorを選択

その他便利な機能

ソースコード全体を検索

ショートカット 動作
Ctrl + Shift + F ソースコード全体を検索

ドックの位置を変更

ショートカット 動作
Ctrl + Shift + D ドックの位置を下と右に交互に入れ替える

おわりに

今回はChrome DevToolsの基本操作をまとめました。DevToolsは他にも便利な機能がたくさんありますので、少しずつ覚えていきたいと思います。また、参考図書のChrome Developer Tools入門も、画面を一つずつ解説していて知識を整理しながら学ぶことができました。

86/100

参考図書

Chrome Developer Tools 入門 技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

Chrome Developer Tools 入門 技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

Amazon

2月の学習記録まとめ

こんにちは！

今回は2月の学習記録まとめです。

2月の学習記録

2月の学習記録

総学習時間：168時間

やったこと

  • Railsでアプリを作成しました
    • 家計簿アプリを設計から見直して作り直したので使いやすくなりました
    • 店舗ごとの商品価格を比較するアプリも作りました
  • 自作アプリを外出先からも使用したくなったので、Ubuntuで自宅サーバーを立ち上げました
    • 10年以上前のノートパソコンが復活し、VPNサーバーとして生まれ変わりました
    • 無事に外出先からもアプリが使えるようになりました
    • その過程でLinuxやDockerの知識が深まりました

おわりに

今回は2月の学習記録まとめでした。9時間から10時間の勉強ペースが掴めていたところで後半体調を崩してしまい、学習時間がいまいち確保できませんでした。たとえ何日か休んだとしても3月は200時間を超えられるようにしたいと思います。

85/100

プライベートIPアドレスの範囲

こんにちは！

今回はプライベートIPアドレスの範囲についてまとめます。

プライベートIPアドレスとは

  • LAN内などのあるネットワーク内で割り当てられるIPアドレス

そもそもIPアドレスとは

  • ネットワーク上の端末を区別するためのアドレス
  • IPv4という規格では、32ビットの長さなので、2の32乗でおよそ43億の端末に割り当てられる
    • 現在ではスマートフォンなどの普及により、43億では足りなくなっておりIPv6への移行が進められている

グローバルIPアドレス

IPアドレスの表記

32ビットをどう表現するか

2進数で表現すると 00000000 00000000 00000000 00000000 ~ 11111111 11111111 11111111 11111111

  • 32ビットとは、2進数で32桁

10進数で表現すると 0.0.0.0 ～ 255.255.255.255

  • 人間が扱いやすいように、8桁ごとで4つに分割し、ブロックごとに10進数に変換して表記する
  • それぞれのブロックは、8ビットなので10進数で0 ~ 255の数値で表される

IPアドレスの範囲

グローバルIPアドレス

プライベートIPアドレス

プライベートIPアドレスの範囲

クラス 範囲
クラスA 10.0.0.0 ~ 10.255.255.255
クラスB 172.16.0.0 ~ 172.31.255.255
クラスC 192.168.0.0 ~ 192.168.255.255

プライベートIPアドレスの範囲の覚え方

  • 各ブロックの下限が0、上限が255であることはまず覚える
  • 10から始まる場合はすべてプライベートIPアドレス
  • 192.168から始まる場合もすべてプライベートIPアドレス
  • 問題は172から始まる場合
    • 172.16 ~ 172.31で始まるものはすべてプライベートIPアドレス
    • 172のグループは16 ~ 31であることを覚えればよい

おわりに

今回はプライベートIPアドレスの範囲についてまとめました。自宅サーバーを立てる時にプライベートIPアドレスの範囲が必要になることが多々あったので、覚えるために今回の記事を書きました。これまでの経験から192.168がプライベートIPアドレスであることはなんとなくわかっていましたが、10から始まるものや、172.16 ~ 172.31から始まるものもあることがわかりました。

84/100