Skip to content

開発研修 CSS

Jump to bottom
fr-itaya edited this page Apr 6, 2015 · 11 revisions

CSSを理解する

■目的

CSSの概念や記述方法などを理解します。

■課題

以下について調べてIssueに記述して下さい。

  • CSSとは
  • CSSの記述要素
  • 宣言ブロック
  • セレクタ
  • id
  • class
  • プロパティ
  • idとclassの違い

　

CSSを用いたレイアウト

■目的

CSSを用いて作成したフォームのレイアウトを変更します。

■課題

styleタグを用いて以下のレイアウトを対応して下さい。

  • ヘッダーの上下に余白を10px付ける
  • ヘッダーのフォントサイズを30pxにする
  • ヘッダーの背景色を変更する(色は自由)
  • フォーム画面の項目名の文字色を変更する(色は自由)
  • 確認画面の表組みに線を表示する
  • 完了画面の文言を強調表示する

　

CSSの外部ファイル化

■目的

CSSを外部ファイル化し読み込む方法を学びます。

■課題

作成したCSSを外部ファイル化し、HTML内で読み込むようにして下さい。

CSSを用いたレイアウト2

■目的

CSSを用いてより実践的なレイアウトを学びます。

■課題

次の内容のHTMLファイルを作成してください。

<!DOCTYPE html>
<html lang=ja>
<head>
  <meta charset="UTF-8" />
  <title>CSS training</title>
  <link rel="stylesheet" href="style2.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
</head>
<body>
  <div class="container">
    <div class="inner">
      <a href="#">
        <img src="http://lorempixel.com/250/350/abstract/1" alt="" class="pic" />
      <div class="text">
        <p class="title">Lorem Ipsum</p>
        <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia iure quisquam accusamus animi explicabo rerum ex nam possimus laborum vero, voluptatum nisi repellat architecto illum cum beatae eos deserunt nostrum.</p>
      </div>
      </a>
    </div>
  </div>
  <div class="container">
    <div class="inner">
      <a href="#">
        <img src="http://lorempixel.com/250/350/abstract/2" alt="" class="pic" />
        <div class="text">
          <p class="title">lorem ipsum</p>
          <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia iure quisquam accusamus animi explicabo rerum ex nam possimus laborum vero, voluptatum nisi repellat architecto illum cum beatae eos deserunt nostrum.</p>
        </div>
      </a>
    </div>
  </div>
  <div class="container">
    <div class="inner">
      <a href="#">
        <img src="http://lorempixel.com/250/350/abstract/3" alt="" class="pic" />
        <div class="text">
          <p class="title">lorem ipsum</p>
          <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia iure quisquam accusamus animi explicabo rerum ex nam possimus laborum vero, voluptatum nisi repellat architecto illum cum beatae eos deserunt nostrum.</p>
        </div>
      </a>
    </div>
  </div>
  <div class="container">
    <div class="inner">
      <a href="#">
        <img src="http://lorempixel.com/250/350/abstract/4" alt="" class="pic" />
        <div class="text">
          <p class="title">lorem ipsum</p>
          <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia iure quisquam accusamus animi explicabo rerum ex nam possimus laborum vero, voluptatum nisi repellat architecto illum cum beatae eos deserunt nostrum.</p>
        </div>
      </a>
    </div>
  </div>
</body>
</html>

CSSを外部ファイル化し、style2.cssという名前で保存してください。
その後、style2.cssにて以下のレイアウトを対応して下さい。
見本: http://gyazo.x64.fact/data/6c48772aff2e04ab3057f5e57e581102.png

  • body
    • 背景色を薄いグレー(#eee)にする
  • .container
    • 要素の表示形式を、インラインレベルのブロックコンテナにする
    • 要素の表示形式を、インラインボックスに設定する。この時先頭に*を付けておく
    • 拡大率を1にする。この時、先頭に*を付けておく
    • 幅を画像と同じ250pxに指定する
    • 外側に余白を上下左右5pxずつとる
  • .container .inner
    • 背景色を白(#fff)にする
    • 影を付ける。水平方向、垂直方向には移動させず、1pxぼかす。影の色は黒の透明度0.25を指定する。ベンダープレフィクスを付け、主要ブラウザ(Firefox, Chrome, Opera, IE)で見られるようにする。
  • .container .inner a
    • 拡大率を1にする。この時、先頭に*を付けておく
    • 要素の表示形式をブロックボックスにする
    • テキストの装飾を解除する
  • .container .inner a:after(:afterは疑似要素の一種です。時間があれば調べてみて下さい)
    • 疑似要素に内容""を挿入する
    • 要素の表示形式をブロックボックスにする
    • 要素の回り込みを解除する
    • 要素の高さを0に指定する
    • ボックスを非表示にする
    • はみ出た部分を非表示にする
  • .container .inner a:hover(:hoverの意味は調べてみて下さい)
    • 影を付ける。5px下に影を移動させ、15pxぼかす。影の色とベンダープレフィクスは.container .innerと同様。
  • .container .inner a .pic
    • 幅と高さにそれぞれ画像サイズを指定する(250x350)
  • .container .inner a .text
    • 外側の余白を20pxにする
  • .container .inner a .text .title
    • タイトルの文字色を指定する(色は任意)
    • フォントサイズを20pxにする
    • 文字を太字にする
  • .container .inner a .text .desc
    • 上に外側の余白10pxをとる
    • 本文の文字色を指定する(色は任意)
  • [偶数個目の.container] .inner a ([]内はどのようなセレクタになるか考えてみて下さい)
    • ボックスの配置を相対位置にする
  • [偶数個目の.container] .inner a .pic
    • 上に外側の余白200pxとる
  • [偶数個目の.container] .inner a .text
    • ボックスの配置を絶対配置にする
    • 上からの表示位置を0にする

Copyright (C) fact-real, Inc. MIT License

Clone this wiki locally