8月5日(火) 講義内容- 実技(HTML・CSS基礎)5-

Pocket

◆疑似クラス(教科書/辞典 P160)

擬似クラスとは要素が特定の状態にある場合にスタイルを指定するものである

○要素名:link まだ訪問していないページへのリンク ※ほとんど使わない(aタグのみで指定する時と同じ)
○要素名:visited すでに見たページへのリンク
○要素名:hover マウスオンしている状態
○要素名:active 要素を選択したとき
○要素名:focus 要素にフォーカスが移ったとき

CSSで使用する例

a:link { color: #0000ff; }   /* 未訪問のリンク */
a:visited { color: #000080; } /* 訪問済みのリンク */
a:hover { color: #ff0000; }  /* ポイント時のリンク */
a:active { color: #ff8000; }  /* 選択中のリンク */

このlink → visited →hover →active の順番で指定する。順番が違うとCSSがきかない。
設定をしたくない物がある場合は、飛ばしてもかまわないが、順番は守る。

例えばvisitedの設定をしたくない時は、次のhoverの指定をしてあげる。

◆本日使用したプロパティと値

cssプロパティ
◎display:block   インラインレベル要素をブロックレベル要素に変換するプロパティ(p.328)
◎list-style-position:inside   リストマーク(黒丸など)をliの要素の中に入れる。「outside」はデフォルト設定。(P.268)
◎list-style-type:none   リスト項目の先頭に表示されるマークの種類を設定する。(noneは、リストマーク無し)(p.262)
◎text-indent     文章の段落などの一行目のインデント幅を指定する際に使用する。インデントには負の値を指定することも可能(p.199)

◆CSSスプライト

「テキストを非表示にしたところに背景画像を忍ばせる」という技術
一枚画像をbackground-positionで、画像置換と呼ばれるCSSの小技を応用で作られる。
>>詳しくはこちら http://lopan.jp/css-sprites/

 

a_block_setsumei1

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください