#82 11/16 Topページのデザイン
・BootstrapStudioを用いて、骨組みを作成。
新規で、左のところから持ってくる。
HTMLのコピーは、bodyとかで右クリック
大枠：Fouryはあなたのお友達と、
4人で参加するイベントを探せます
・画像の追加
1.作る→カレンダー
2.探す→虫眼鏡
3.メッセージして会う メッセージ
・フォント画像使う
・アイコン
https://saruwakakun.com/design/tips/icon
・アイコンこのサイトがいい
・フリー画像
https://unsplash.com/s/photos/party
・写真の上の文字を見やすくする
https://www.wp-benricho.com/photoshop-photo-tutorial/
・背景を暗くすることで
→新レイヤーで黒を塗りつぶし、透明度30~50%にする
https://techacademy.jp/magazine/4538
■無駄な余白
→各要素でwidth: 100%;ではだめ。
大元の余白を取り除かねば
↓
.container{
padding-left: 0px;
padding-right: 0px;
}
で解決
・ ボタンをおしゃれにする
基本はBoottrapStudio参考。高さ調節だけ、以下の記事を参考
http://blog.eszett-design.com/2013/05/css.html
■CSSでフォントを制御する
https://blog.codecamp.jp/css-font-family
これのgooglefontを使う。
少し重くなるのがデメリット
1/11
■サイズ調整に苦戦
390×452で、以下で画質は落ちるけど、一応OK
/*Highlight*/
.highlight-clean {
color: #FCECEA;
//background-color: #fff;
// padding: 20px;
background-image: url("woman3.30.2.jpg");
// background-repeat: no-repeat; /* 画像の繰り返しを指定 */
background-position:center center; /* 画像の表示位置を指定 */
// background-size:contain; /* 画像のサイズを指定 こいつが一枚にするやつ */
width: 100%; /* 横幅のサイズを指定 */
}
■これですべてOK!
background-size:cover;
.highlight-clean {
color: #FCECEA;
background-position:center center;
background-image: url("woman2.30.3.jpg");
background-size:cover;
}
