###### tags: `Joken講座` `CSS` # Joken Webデザイン入門講座 #2 # 参考コード・サンプル集 <br> --- # 1. CSSファイルの指定の仕方 **スライド p.9~p.11** ▼ sample.html ```htmlmixed <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>#2 sample-1</title> <!-- スタイル属性にCSSを記述 --> <style> .important-text { color:red; font-weight: bold; font-size: 20px; } </style> <!-- リンクタグでCSSファイルを読み込み --> <link rel="stylesheet" href="./sample.css"> </head> <body> <p>普通の文字</p> <!-- スタイル属性でCSSを記述 --> <p style="color:red;">赤い文字</p> <!-- headタグのスタイル属性からクラスを指定 --> <p class="important-text">重要！</p> <!-- CSSファイルからクラスを指定 --> <p class="very-important-text">ｽｺﾞｸｽｺﾞｸとても重要！！</p> </body> </html> ``` ▼ sample.css ```css .very-important-text { color:red; font-weight: bold; font-size: 30px; text-decoration-line: underline; } ``` ▼ プレビュー ![](https://i.imgur.com/iVHyJJN.png) [**プレビューリンク**](https://chige12.github.io/joken-web-beginners-2/sample-1/sample.html) <br><br> --- # 2-1. セレクタとプロパティ1 **スライド p.14~p.15** ▼ sample.html ```htmlmixed <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>#2 sample-2</title> <link rel="stylesheet" href="./sample.css"> </head> <body> <header> <h1>タイトル</h1> </header> <main> <section class="advice"> <h2>アドバイス</h2> <p>文章を書くpタグは段落なので改行っぽく使うのもアリ。</p> <p>ちょうどいいタグがない時はdivタグを使おう。divタグはただの箱って感じ。classを付けてスタイルを適応しよう。</p> <p class="notes">※spanタグも便利だよ</p> <div class="conclusion"> <p class="top-text">- 結論 -</p> <p class="content"><span>divタグ</span>が万能！</p> </div> </section> </main> <footer> <p>footerです</p> </footer> </body> </html> ``` ▼ sample.css ```css /* header */ header { margin-top: 40px; } header h1 { background: lightgrey; } /* main */ main { font-size: 16px; } section.advice { background: #52443c; color: white; padding: 60px; } h2,p { padding: 0 30px; } .advice .notes { font-size: 14px; } .conclusion { margin: 30px; padding: 10px; background: white; } .conclusion p { text-align: center; color: darkorange; font-weight: bold; } .conclusion .top-text { font-size: 24px; } .conclusion .content { font-size: 20px; } /* footer */ /* footerはあえて記述なし */ ``` これをそのまま実行すると、footer内のpが影響を受けてしまう。 `h2,p {~~~}` のところは `.advice h2,.advice p {~~~}` とすることで、限定した指定になるため、保守性が高くなる。（え、これどこが影響してるの？？がなくなる） これでfooter内のpに影響を与えない。 <br> # 2-2. セレクタとプロパティ2 **スライド p.16~p.18** 上記コードに、sectionタグの二つ目として記述してください。 ▼ sample.html ```htmlmixed <!-- ~~~ --> <section class="sample"> <h2>サンプル実演</h2> <div class="sample-1"> <h3 class="sample-caption">Sample-1 スライドp.16</h3> <div class="sample-box"> <p class="sample-propaty"> p.sample-propatyの中のテキスト。 </p> </div> </div> <div class="sample-2"> <h3 class="sample-caption">Sample-1 スライドp.17</h3> <div class="sample-box"> <p class="sample-propaty"> あいうえおかきくけこさしすせそ。 </p> </div> </div> </section> <!-- ~~~ --> ``` 以下のCSSも追加で記述 ▼ sample.css ```css /* ~~~ */ section.sample { background: #ddd; } .sample-1,.sample-2 { border-top: 1px solid black; padding: 20px; } .sample-1 .sample-box,.sample-2 .sample-box { border: 1px solid #aaa; background: white; margin: 0 30px; } /*スライドにでてたサンプルのCSS*/ .sample-1 p.sample-propaty { font-weight: bold; font-size: 30px; text-decoration-line: underline; border: 2px double red; cursor: pointer; } .sample-2 p.sample-propaty { width: 100px; height: 100px; margin: 12px; padding: 8px; background: red; color: #fff; } /* ~~~ */ ``` [**プレビューリンク**](https://chige12.github.io/joken-web-beginners-2/sample-2/sample.html) # 3. reset css / normalize css CSSを設定しても、設定もれがあったり、ブラウザによって微妙に異なったスタイルになったりする。そんなブラウザ差異をなくすために、reset.cssやnormalize.cssなどがある - すべてのスタイルをリセットする - [HTML5 Doctor Reset CSS](http://html5doctor.com/html-5-reset-stylesheet/) - [日本語翻訳](http://www.html5.jp/html5doctor/html-5-reset-stylesheet.html) - [Yahoo! (YUI 3) Reset CSS](https://yuilibrary.com/yui/docs/cssreset/) - デフォルトのスタイルをつける - [Normalize.css](http://necolas.github.io/normalize.css/) - [ress.css](https://github.com/filipelinhares/ress) - `dist/`の中の`ress.min.css`を使ってファイルサイズを削減 - 自分で書き換えたいなら普通の`ress.css`を使おう - Reboot.css これらのどれかを選び、ダウンロードして自分が作ったCSSファイルより先に読み込む。今回は ress.css を選びました。 ```htmlmixed <head> <link rel="stylesheet" type="text/css" href="ress.css"> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> ``` 参考資料 - https://webdesign-trends.net/entry/8137 # 4. displayプロパティ displayプロパティは、ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する。[>> リファレンスへ](http://www.htmq.com/style/display.shtml) - `display: inline;` - インラインボックスを生成する（インライン要素にする） - 高さ・幅は設定できない。 - `display: block;` - ブロックボックスを生成する（ブロックレベル要素にする） - 高さ・幅が設定できる - 設定した後の残りの領域は自動的にmerginがつく（必ず改行される） - `display: inline-block` - インライン要素とブロック要素の特徴を合わせたような挙動をする - 高さ・幅が設定できる - 設定した後の残りの領域はmerginがつかない。（必ず改行されるわけではない） - `display: flex` - フレックスコンテナ（フレックスボックス）を生成する - CSS3から追加 - 段組みレイアウト（横並び）が簡単につくれる - おすすめ参考記事 - [日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet) ```htmlmixed <body> <div style="display:inline;"> インラインボックス </div> <div style="display:block;"> ブロックボックス </div> <div style="display:inline-block;"> インラインブロック </div> <div style="display:flex;"> <p>あいうえお</p> <p>かきくけこ</p> <p>さしすせそ</p> <p>たちつてと</p> </div> </body> ``` # 5. CSS設計とBEM CSSは上書きができ、かつ適応されるスタイルに優先度があるため、予期せぬスタイルがついたり、逆につかなかったりする。 <small> 参考：「CSS　優先度」で検索してみてください。</small> このような混乱を防ぐため、CSS設計が重要視されている。ここでは簡単に紹介する。 ## BEM BEMはモダンなCSS設計の考え方の一つ。 BEM　＝　Block, Element, Modifier - Block：サイトを構成するひとかたまり - Element：Blockを構成する要素 - Modifier：既存のBlockやElementと似ているけれど、見た目や動きが少しだけ違うもの ```htmlmixed <form> <div class="wrapper"> <!-- Block --> <div class="wrapper__property">名前</div> <!-- Element --> <input class="wrapper__input" type="text"> <!-- Element --> </div> <div class="wrapper"> <!-- Block --> <div class="wrapper__property">コメント</div> <!-- Element --> <input class="wrapper__input wrapper__input_bigger" type="text"> <!-- Element --> </div> <input class="button" type="submit" value="登録する"> <!-- Block --> </form> ``` 詳しくは以下URL、もしくは「BEM　CSS設計」で検索 [BEMによるフロントエンドの設計](https://app.codegrid.net/entry/bem-basic-1) [BEMを参考にしたCSS設計](https://qiita.com/mrd-takahashi/items/07dc3b4bad027daa2884)