82回目授業内容　CSS3〜イラストレーターでバナー作成

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

CSS3

  • CSS3に慣れよう
  • 癖を付けよう
<meta name="viewport" content="width=device-width">
  • class属性やid属性も含め、属性の値を使うセレクタ
[class] {color: hotpink;}
  • [class="ham"]と指定した要素に適用
[class="ham"] {color: hotpink;}
  • class属性の値が「ham」を含む場合に適用
[class*="ham"] {color: hotpink;}
  • class属性の値が「ham」で始まる場合に適用
[class^="ham"] {color: hotpink;}
  • class属性の値が「ham」で終わる場合に適用
[class$="ham"] {color: hotpink;}
  • class属性の値が「ham」というスペース区切りの語句を含む場合に適用
[class~="ham"] {color: hotpink;}
  • class属性の値が「ham」」というハイフン区切りの語句から始まる場合に適用
[class|="ham"] {color: hotpink;}
  • 擬似クラス
a:link { color: green; }
a:visited { color: gray; }
a:hover { color: orange; }
a:focus { color: hotpink; }
a:active { color: red; }
  • :after擬似要素
h2:before, h2:after {
  content: "★";
  color: red;
}
h2 {
  font-size: 32px;
  font-family: 'Arial Black';
  background-color: greenyellow;
}
h2:before, h2:after {
  margin-right: 10px;
  font-family: 'メイリオ';
}

<h2>HAM SANDWICHES</h2>
<p>:before擬似要素は、要素の直前に内容を挿入する際に使用します。</p>
<p>:after擬似要素は、要素の直後に内容を挿入する際に使用します。</p>
  • :first-letter擬似要素
p:first-letter {
  font-size: 32px;
  font-weight: bold;
  line-height: 24px;
  padding: 10px;
  background-color: greenyellow;
  float: left;
}

<p>焼きたての手作りパンで新鮮なハム、トマト、チーズ、レタスを挟んだサンドイッチです。マスタードをピリッときかせたマヨネーズソースがおいしくて、お店の近くを通るたびに買いこんでしまいます。日替わりメニューもあって、毎日いろいろなサンドイッチが楽しめます。</p>

バナー広告作成

脱線話（復活）

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。