dropdown-menu

CSSのみでアニメーション付きのドロップダウンメニューを実装してみます。
メニューオープン動作に使用しているtransitionプロバティのサポートは下記
ベンダープレフィックスとして-webkit-をつけましょう。

HTMLソース


CSS

できたのがこちら↓

:first-child

:first-childは、親要素にとって第一番目の直下要素のみを対象とする擬似クラス
適用対象:要素内の最初の子要素

▼HTML この場合は【:first-child】は効く

▼CSS

▼HTML この場合は【:first-child】は効かない

▼CSS

【 :first-of-type 】なら、指定した要素の前にどんなタグがあっても効く。
※ブラウザ実装状況はIE9からになります。

参考サイト:https://goma.pw/article/2015-02-06-0/

target=”_blank”

【 target=”_blank” 】を記述すると、新規のウィンドウで表示

▼通常のリンク先 記述方法

▼別タブで開くリンク先 記述方法

参考サイト:http://www.akagami.jp/seo/target-blank.html
参考サイト:https://liginc.co.jp/web/html-css/html/17315

擬似要素

:before擬似要素(対象となる要素のに指定した内容を追加)
:after擬似要素(対象となる要素のに指定した内容を追加)

ブロックレベルの要素に対して:beforeや:afterを使った場合は、
追加される内容もブロックレベル要素となります。
逆に、インライン要素に対して擬似要素を使った場合は追加される内容もインライン要素となります。
明示的に記述するならdisplayプロパティに対して値を指定して下さい。
(インライン要素の場合はblockは指定できません)。

※:before擬似要素と:after要素はIE6及びIE7では未サポートです。

▼:beforeと:afterを使う時に、文字を入れたい場合はcontentを使用

参考サイト:http://yossense.com/css-before-after/
参考サイト:https://liginc.co.jp/web/html-css/css/23099
参考サイト:http://www.htmq.com/style/content.shtml

nth-child(n)

・疑似クラス
nth-child(n)は、ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを適用します。
n番目というのは隣接している要素を全て数えるので、間に別の要素が有るとその要素もカウントしてn番目にスタイルが適用されます。

▼偶数行だけにスタイルを適用することで、しましまにする事も出来ます。
:nth-child(2n)
:nth-child(even)

▼奇数を指定したい場合は、下記のようにスタイルを指定します。
:nth-child(odd)
:nth-child(2n+1)(1番目の子要素を指定しその後2つおきにスタイルを指定)

▼任意の子要素にスタイルを適用したい場合は以下のように指定します。
:nth-child(5)/*5番目のみスタイルを適用*/
:nth-child(3n)/*3の倍数のみスタイルを適用/*
:nth-child(3n+5)/*5番目の子要素から3つおきにスタイルを適用*/
:nth-child(n+4)/*4番目以降の子要素にスタイルを適用*/
:nth-child(-n+3)/*3番目までの子要素にスタイルを適用*/

▼書き方
.sample li:nth-child(2n){}

参考サイト:http://design.webclips.jp/css3-nth-child/
参考サイト:http://zero.css-happylife.com/selectors/nth-child.shtml

疑似クラス

擬似クラスは記述した順に適用されていくため記述する順番に注意が必要です。

a:link(未訪問のリンク)
a:visited(訪問済みのリンク)
a:hover(マウスカーソルが重なったとき)
a:active(リンクをクリックしたとき)

▼書き方
a:link{
プロパティ:値;
}

参考サイト:http://html-coding.co.jp/knowhow/tips/rollover/
参考サイト:http://www.htmq.com/selector/link.shtml

【DW】便利な機能【インデント整形、置換】

【1】コードのインデントを整える

1.上記のメニューから「コマンド」をクリック
2.ソースフォーマットの適用」をクリック

【2】ソースコードを一括で修正する。置換を使用
1.[Ctrl+f]で置換および検索
2.検索のボックスに修正する箇所をコピペ
3.置換のボックスに修正後のコードを記入
4.検索対象をサイトなど必要な範囲を選択
5.すべて置換を選択

※開いていないファイルを書き換える場合は、書き換えをしたら元に戻せないので注意。

margin

marginは、要素の外側の余白のことです。

marginは、上下左右のマージンをまとめて指定するプロパティです。
上下左右を異なるマージン幅にしたい場合には、スペースで区切って複数の値を指定します。
auto (自動)を指定することもできます。

4つ値を指定する場合は上 右 下 左の時計回りの順
▼上5px 右10px 下15px 左20px

3つ値を指定する場合は上 左右 下の順
▼上5px 左右10px 下15px

2つ値を指定する場合は上下 左右の順
▼上下5px 左右10px

1つだけ指定する場合は上下左右を一括で指定することになります。
▼上下左右5px

▼上のみ指定

▼下のみ指定

▼左のみ指定

▼右のみ指定

border

borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。
スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。

▼記述方法

・1pxの太さ
・solid=1本線
・#333=色の指定

参考サイト:http://www.htmq.com/style/border.shtml

padding

paddingとは、要素内の余白のことです。

paddingとは上下左右のパディングをまとめて指定するプロパティです。
上下左右を異なるパディング幅にしたい場合は、スペースで区切って複数の値を指定することができます。

4つ値を指定する場合は上 右 下 左の時計回りの順
▼上5px 右10px 下15px 左20px

3つ値を指定する場合は上 左右 下の順
▼上5px 左右10px 下15px

2つ値を指定する場合は上下 左右の順
▼上下5px 左右10px

1つだけ指定する場合は上下左右を一括で指定することになります。
▼上下左右5px

※padding(パディング)には負の値やautoを指定することはできません。

参考サイト:http://www.htmq.com/style/padding.shtml
参考サイト:http://html-coding.co.jp/annex/dictionary/css/padding/