うにょママ 
復習をかねたWeb制作の学習記録と＋αで調べた事の備忘録です。
【Day13】News系のコーディング
フレックスボックス利用時の注意点
”display: flex;” はコンテンツ量に応じて自動で幅を調整するが、改行が伴うようなデザインの時は幅の指定に注意！
【幅を指定するパターン】
- %で指定する
- 固定値 + 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 | ボックスに収まるかどうかに関わらず、スクロールバーが表示される。 |
iframeの縦横比を保ったまま表示サイズを自在に変更する
- iframeをdivで囲む
- 囲んだdivにwidthと”position: relative;” をつける
- iframeに”position: absolute;” をつけて、”width: 100%;” と ”height: 100%;” を付ける
- 親要素の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】お問い合わせフォームのコーディング
ブラウザ間のデザインの差異をなくす
フォームの各要素はブラウザによって基本となるデザインが異なる。
ブラウザ間の差異を極力なくすようにコーディングする方法
- 全てのフォーム要素のデザインをフラットな状態にする
- その上にデザインを乗せていく
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から自分で作れと言われたらかなり苦労しそうです。
これからどんどん課題が難しくなっていくと思いますが、食いついていきたいと思います！