すなぶろぐ

カテゴリー: プログラミング

プログラミング全般に関する発信をします。

  • paddingとmarginを理解する

    paddingとmarginを理解する

    今日もWebサイト制作周りのことをつらつら。

    今回は見出しにある通り、paddingとmarginの使い分けについてお話したいと思います。

    違いが分かりづらいpaddingとmargin

    Webサイト制作などでHTML&CSSを触るときに必ず遭遇するこのpaddingとmarginという概念。

    これが慣れるまでは中々イメージが掴めなかったり、思ったように余白を調整できなかったりします。

    この記事を通して、今回はpaddingとmarginの感覚を掴んでいただけたらな思います。

    そして、もっと余白が扱うのが上手になっていただけたらなと思います！

    「皮下脂肪」と「ダウンジャケット」

    もういきなり答えみたいな、今回の記事で僕が1番伝えたいことを初っ端に書いちゃうんですけど、僕は

    paddingとmarginを「皮下脂肪」と「ダウンジャケット」

    だと捉えています。

    これだけで理解できた方は、もう完璧なので早速パソコンを開いて作業を続けてください（笑）

    もう少し具体的に説明します。

    paddingは要素の内側

    要素自体にはそれ本来の大きさがあります。

    文字だったり、画像自体の大きさだったり。

    ただ、皮下脂肪（=padding）か多すぎるせいで本来の大きさ以上に膨れ上がって、皮膚（=border）が大きく膨れ上がります。

    その結果、その要素の範囲はそのborderまでが範囲となります。

    marginは要素の外側

    一方で、皮下脂肪（=padding）は全くなくてもダウンジャケット（=margin）を着ているせいで、皮膚（=border）の外側に範囲が増えていくパターンもあります。

    要素同士の重なり

    皮下脂肪（=padding）は皮膚（=border）の内側なので、他の要素と重なり合わないです（体内なので？）。

    一方で、ダウンジャケット（=margin）は他の要素のダウンジャケット（=margin）同士で重なり合うことができます（皮膚の外なので？）。

    このイメージさえ掴めれば、paddingとmarginの違いはかなり理解しやすくなると思います。

    皆さんも引き続き、勉強を続けましょう！

  • 真偽値を返す関数はどうやって作る？？

    真偽値を返す関数はどうやって作る？？

    ある機能を実装していた。

    途中である変数の状態を表すのに真偽値を返す関数を作ることにした。

    皆さんは真偽値を返す関数を作るとき、どのように返す方が好みですか？？

    <?php

/**
 * 正常な入力値かどうかを検証する
 * 引数の先頭と末尾にスペースが含まれないかを検証して、その結果を真偽値で返す。
 * 今回の機能では、スペースがないことが望ましい。
 */
function check_is_space_included(string $input): bool
{
    $first_letter = substr($input, 0, 1);
    $last_letter = substr($input, -1, 1);
 
    // パターン1
    // デフォルトでfalseを返すようにして、もしどちらかにスペースがあったらtrueを返す。
    if ($first_letter === " " || $last_letter === " ") {
        return true;
    }
 
    return false;
 
    
    // パターン2
    // スペースが含まれるかどうかをそのまま戻り値として返す。
    return $first_letter === " " || $last_letter === " ";
}

$is_space_included = check_is_space_included($input);
echo $is_space_included; // trueまたはfalse

    パターン1の方が関数の中身が直感的に理解はしやすいかなと感じる。

    一方でパターン2は少し分かりにくいが、パターン1と同じ処理をたったの1行で表現できる綺麗さも感じる。

    この場合、皆さんはどちらで戻り値を返す派とかありますか？？