デイトラWeb制作中級編 Day13～16『デザインカンプからのコーディング』

  • 投稿日
  • 更新日
  • 著者 うにょママ
  • カテゴリー WEB制作
うにょママ
うにょママ

復習をかねたWeb制作の学習記録と＋αで調べた事の備忘録です。

【Day13】News系のコーディング

フレックスボックス利用時の注意点

”display: flex;” はコンテンツ量に応じて自動で幅を調整するが、改行が伴うようなデザインの時は幅の指定に注意！

【幅を指定するパターン】

  1. %で指定する
  2. 固定値 + calcで指定する

1を使うのは、カード系のコンテンツや画像。

2を使うのは改行したくない文字がある場合など。

【2のパターンの例】

  • 日付 + ラベル：width: 185px;
  • ニュース：width: calc(100% – 185px);
参考記事

【DAY14】テーブルとGoogleMap（iframe）埋め込みのコーディング

Flexの子要素はdivタグ（ブロック要素）で囲む

flexは子要素の高さを同じに自動調整する機能がある。

imgをそのまま子要素にした場合、画像が必要以上に高くなって表示が崩れたりする。

表示崩れを防ぐために子要素はdivで囲む。

table幅を均等にする

tableタグに”table-layout: fixed;” と ”width: 100%;” を指定することで均等になる。

特定の列だけwidthを指定

特定の列だけwidthを指定すれば、その列のみ指定した幅、その他は自動で均等にすることができる。

参考記事

overflowプロパティ

overflowプロパティ：ボックスに収まらない内容の表示方法を指定

表示方法

autoブラウザーの設定に依存。通常はスクロールバーが表示される。
visible内容はボックスからはみ出して表示される。
hiddenボックスに収まらない内容は表示されない。
scrollボックスに収まるかどうかに関わらず、スクロールバーが表示される。
参考記事

overflowプロパティの意味と使い方

iframeの縦横比を保ったまま表示サイズを自在に変更する

  1. iframeをdivで囲む
  2. 囲んだdivにwidthと”position: relative;” をつける
  3. iframeに”position: absolute;” をつけて、”width: 100%;” と ”height: 100%;” を付ける
  4. 親要素のdivにpadding-topをつけ、縦横比を算出して指定する

padding-topに指定する値は、iframeの縦横比にしたがい「高さ/横幅」%を算出

Sass
.map__iframe-wrap {
  width: 100%;
  padding-top: 400 / 800 * 100%;　
  position: relative;

  > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
}
参考記事

【DAY 15】お問い合わせフォームのコーディング

ブラウザ間のデザインの差異をなくす

フォームの各要素はブラウザによって基本となるデザインが異なる。

ブラウザ間の差異を極力なくすようにコーディングする方法

  1. 全てのフォーム要素のデザインをフラットな状態にする
  2. その上にデザインを乗せていく
参考記事

labelとフォームコントロールを結びつける

<label for=”your-name”>ラベル</label>
<input id=”your-name” type=”text” name=”text” />

label forで定義した”your-name”を<input>のidに入力して紐づける。

そうするとラベルにカーソルを当てると名前入力欄にカーソルが行く。

フォームのデザインをオリジナルにする

アイコンの設置

input要素やselect要素にはbefore・afterの擬似要素が使えないので、擬似要素の代わりに背景を使い設置。

ラジオボタン・チェックボックス

ラジオボタンのinput type=”radio”や、チェックボックスのinput type=”checkbox”で表示されるボタンは、ブラウザ依存で見え方が変わってしまう。

デフォルトのボタンを非表示にして、どのブラウザでも美しく見えるオリジナルボタンを作成する。

チェックボックスのオン・オフはopacityで切り替える！

非表示➞opacity: ０;　表示➞opacity: 1;

HTML
<label><input class="form-radio" type="radio" name="your-radio" checked><span>ラジオ１</span></label>
Sass
/* デフォルトのラジオボタンを非表示 */
.form-radio {
  display: none;

  /* オリジナルボタンを設置するため、paddngでテキストの左側にスペースを確保 */
  + span {
    cursor: pointer;
    display: inline-block;
    padding: 0 0 0 50px;
    position: relative;

    /* 擬似要素beforeとafterを共通でセット */
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    /* beforeをラジオボタンの枠として利用するため、デザインを適用する */
    &::before {
      background: #fff;
      border: 1px solid #707070;
      display: block;
      left: 0;
      width: px;
      height: 30px;
    }

    /* afterは枠の中のチェックマークとして利用するため、デザインを適用する
    デフォルトのチェックマークはopacity:0で透明にしておく*/
    &::after {
      border: 1px solid transparent;
      left: 0;
      width: 25px;
      height: 25px;
      background: transparent url(../img/icon-check.png) no-repeat center center / contain;
      transition: opacity 0.3s ease 0s;
      opacity: 0;
    }
  }

/* 非表示にしたデフォルトのラジオボタンにチェックが入ると、オリジナルボタンのチェックも透明を解除して表示する */
  &:checked {
    + span {
      &::after {
        opacity: 1;
      }
    }
  }
}
参考記事

【Day16】フッターのコーディング

フッターの3ブロックの作り方

それぞれのブロックの幅を適当に％で指定する。

PerfectPixelを使い、最終的に位置を合わせる。

Sass
/* 左、中央、右を囲うエリア */
.footer__contents {
  display: flex;
}
/* 左のエリア */
.footer__left {
  width: ◯%;
}
/* 中央のエリア */
.footer__center {
  width: ◯%;
}
/* 右のエリア */
.footer__right {
  width: ◯%;
}

まとめ

初めての実装が目白押しで中々疲れました。

0から自分で作れと言われたらかなり苦労しそうです。

これからどんどん課題が難しくなっていくと思いますが、食いついていきたいと思います！

この記事を書いた人

うにょママ

元駐妻。7年半過ごした台北から2022年2月に本帰国しました。
このブログではWeb制作の勉強、台湾生活、子育てについて気ままにつづっています。

記事一覧