Try   HackMD
tags: Joken講座 CSS

Joken Webデザイン入門講座 #2

参考コード・サンプル集


▼ sample.html

<!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

.very-important-text {
  color:red;
  font-weight: bold;
  font-size: 30px;
  text-decoration-line: underline;
}

▼ プレビュー

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

プレビューリンク



2-1. セレクタとプロパティ1

スライド p.14~p.15

▼ sample.html

<!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

/* 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に影響を与えない。


2-2. セレクタとプロパティ2

スライド p.16~p.18

上記コードに、sectionタグの二つ目として記述してください。

▼ sample.html

<!-- ~~~ -->

<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

/* ~~~ */

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;
}

/* ~~~ */

プレビューリンク

3. reset css / normalize css

CSSを設定しても、設定もれがあったり、ブラウザによって微妙に異なったスタイルになったりする。そんなブラウザ差異をなくすために、reset.cssやnormalize.cssなどがある

これらのどれかを選び、ダウンロードして自分が作ったCSSファイルより先に読み込む。今回は ress.css を選びました。

<head>
    <link rel="stylesheet" type="text/css" href="ress.css">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

参考資料

4. displayプロパティ

displayプロパティは、ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する。>> リファレンスへ

  • display: inline;
    • インラインボックスを生成する（インライン要素にする）
    • 高さ・幅は設定できない。
  • display: block;
    • ブロックボックスを生成する（ブロックレベル要素にする）
    • 高さ・幅が設定できる
      • 設定した後の残りの領域は自動的にmerginがつく（必ず改行される）
  • display: inline-block
    • インライン要素とブロック要素の特徴を合わせたような挙動をする
    • 高さ・幅が設定できる
      • 設定した後の残りの領域はmerginがつかない。（必ず改行されるわけではない）
  • display: flex 
<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は上書きができ、かつ適応されるスタイルに優先度があるため、予期せぬスタイルがついたり、逆につかなかったりする。
参考：「CSS　優先度」で検索してみてください。

このような混乱を防ぐため、CSS設計が重要視されている。ここでは簡単に紹介する。

BEM

BEMはモダンなCSS設計の考え方の一つ。

BEM　＝　Block, Element, Modifier

  • Block：サイトを構成するひとかたまり
  • Element：Blockを構成する要素
  • Modifier：既存のBlockやElementと似ているけれど、見た目や動きが少しだけ違うもの
<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によるフロントエンドの設計
BEMを参考にしたCSS設計

Last changed by 
 
Chige
0
291
Published on HackMD