2022/07/02 

これだけは覚えておきたいCSSの基礎

HTMLとは、テキストボックス、文字、表、画像、リンクなど、Webページに配置するための言語です。

CSS は Cascading Style Sheets の略です。CSSは、HTMLで記述された Webページの見栄え・スタイルを効率的に定義するための技術です。

HTMLでWebページ部品を配置し、CSSで見栄え、スタイルを設定する感じです。

ここでは、私が実際にWebページを作成するのに必要だったHTML/CSSのコードついて記載します。

基礎偏

余白の指定

余白にはmarginとpaddingがあります。

どちらも要素のまわり余白を指定するものですが、以下のような違いがあります。

  • border:ボーダーのスタイル・太さ・色
  • padding:要素の内側の余白
  • margin:要素の外側の余白


.main {
     /* 種類 
     none : 枠線なし
     solid : 実線
     double : 二重線
     dotted : 点線
    */
    border: solid;

    /* 幅 | 種類 */
    border: 2px dotted;

    /* 種類 | 色 */
    border: outset #f33;

    /* 幅 | 種類 | 色 */
    border: medium dashed green;

    /* 四辺すべてに適用 */
    padding: 10px;

    /* 上下 | 左右 */
    padding: 10px 10px;

    /* 上 | 左右 | 下 */
    padding: 10px 10px 10px;

    /* 上 | 右 | 下 | 左 */
   padding: 10px 10px 10px 10px;

    /* 上 | 右 | 下 | 左 */
   margin: 10px 10px 10px 10px;
}

バッググランド色、文字色、フォントサイズ

テキスト色、バッググランド色、フォントサイズを指定するときのCSSの記述です。

  • color : テキスト色を指定
  • background : バッググランド色を指定
  • font-size : フォントサイズを指定

.main {
    color: #494949;/*文字色*/
    background: #d8ecf5; /*背景色 */
    font-size: 2rem;
}

サイズの単位

CSSでサイズを指定するときの単位(記述)です。

  • px : ピクセル(pixel)の略で絶対値のサイズを指定する。
  • em : 親要素に対しての倍率でサイズを指定する。
  • rem : ルートのサイズを1とした倍率でサイズを指定する。
  • % : 親要素に対しての%で倍率でサイズを指定する。
  • vh : ビューポートの高さを100として、1~100間で%でサイズを指定する。
  • vw : ビューポートの幅を100として、1~100間で%でサイズを指定する。

:root {
  font-size: 10px;
}

.text {
  font-size: 1.5rem; /* 10 * 1.5 = 15 px */
}

応用偏

要素を横方向に並べる

以下のイメージのような、レイアウトを実現したい場合、flexboxを使用します。flexbox レイアウトは、親要素の display プロパティの flex 値を使うことによって定義されます。親要素は flex コンテナとなり、その子要素は flex アイテムとなります。flexbox はサイズが不明、もしくは動的である場合でも flex コンテナの中にある flex アイテムの配置を実現してくれる便利な方法です

<div class="d-flex"> <!-- 親要素 -->
    <div class="box bg-blue">1</div> <!-- 子要素 -->
    <div class="box bg-red">2</div> <!-- 子要素 -->
    <div class="box bg-green">3</div> <!-- 子要素 -->
</div>
.box {
    width:25px;
    height:25px;
}
.d-flex {
    display: flex;
}
.bg-red {
    background-color:red;
}
.bg-blue {
    background-color:blue;
}
.bg-green {
    background:green;
}

実際の表示

1
2
3

住所を郵便番号から自動入力

住所を郵便番号から自動入力にする場合、「ajaxzip3」というプラグインを用いることで非常に簡単に実装することができます。

こちらの記事を参考にしてください。

随時公開します。

コメントを書き込む

メールアドレスが公開されることはありません。


カテゴリ



プロフィール

運営者 HONDA

福島県出身、在住

広告

このブログで契約しているレンタルサーバです。