プロパティ
Background系プロパティ
cover 目いっぱい表示 切れてもいいから
contain 切っちゃだめ
文字系プロパティ
文字を半透明にすると読めなくなるので、背景だけを透明にするようにするとよい。参照４
リストタグを使用するときに、頭に１２３，とか数字のパターンを指定したり、独自画像を指定したりできる。
練習問題
レイアウトデザイン 練習問題②
既にマークアップしているHTMLファイルと、セレクタだけ用意してあるCSS
のファイルが用意してあります。
HTMLのファイルを確認しながら、「style.css」のプロパティと値を入力し、
Webページを見本「training-problems_00２.jpg」と同じにしましょう。
保存はこまめに行っていきましょう。
事あるごとに保存をしましょう。途中で消えたら最初からやり直しになってしまうので注意してください。
上書き保存のショートカット“Ctrl+S”
プロパティと値を考える練習問題です。
この練習のポイント！
まず「レイアウト」以外の内容のCSSの記述を練習してましょう。
逆に言うと「文字」と「配色」のCSSの記述は目に見える内容ですので、だからこそ
この基本的なCSSはしっかりと把握しておきましょう。
「デザインラフ」の注意点として、Webページで完全再現は難しい内容があります。
特徴を理解して、実務ではクライアント（発注者）さまに説明できるように
理解を高めておきましょう。
また、この問題が解けた方は次の練習として、「ｓtyle.css」をゼロから書くと良い練習
になるでしょう。コーダーを目指す方はぜひ挑戦してみてください。
編集するファイルは下記のみです。
style.css
ヒント！ 使用するのは下記のタグのみです。
背景画像
background: url(images/home_body_1280.jpg) no-repeat center top;
background: url(images/pict_tel_001.png) no-repeat left center;
背景色
background-color: #fadcdc;
background-color: #333;
background-color: #ffffff;
透明な背景色
background: rgba(255,255,255,0.7);
ワンポイントアドバイス！
スペシャルヒントページは下記になります。
参考サイトURL
https://samplesdl.me/training_html-css/training-problems_02_answer/
文字サイズ
font-size: 70%;
font-size: 80%;
font-size: 90%;
font-size: 95%;
font-size: 130%;
font-size: 160%;
font-size: 300%;
文字の太さ
font-weight: bold;
文字の種類（明朝体）
font-family: “游明朝”, YuMincho, “Hiragino Mincho ProN W3”, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “ＭＳ Ｐ明朝”, “ＭＳ 明朝”, serif;
コメント