・ボーダーにはグラデーションがかけられないので、:before , :after を使う
→heightを決めて、バックグラウンドにグラデーションをかけて疑似的にボーダーのグラデーションに見せる
.example:before{
content:"";
display:block;
height:1px;
width:100%;
background: -webkit-gradient(linear, left top, right bottom, from(#f00), to(#00f));
background: -moz-linear-gradient(left, #f00, #00f);
background: linear-gradient(left, #f00, #00f);
}
CSSのみでアニメーション付きのドロップダウンメニューを実装してみます。
メニューオープン動作に使用しているtransitionプロバティのサポートは下記
ベンダープレフィックスとして-webkit-をつけましょう。
HTMLソース
<div id="nav-menu"> <input id="dropdown" type="checkbox" class="dropdown-toggle"> <label for="dropdown">クリックすると開くメニュー</label> <ul class="dropdown-menu"> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#">メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> </ul> </div>
CSS
#nav-menu label {
position: relative;
padding-left: 15px;
cursor: pointer;
}
/* 下矢印 */
#nav-menu label::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #5e5e5e transparent transparent transparent;
position: absolute;
top: 8px;
left: 0;
}
#nav-menu .dropdown-toggle:checked ~ ul {
height: 150px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
padding: 15px 0 0 30px;
}
#nav-menu .dropdown-toggle ~ ul {
height: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
padding: 0 0 0 30px;
}
#nav-menu .dropdown-toggle {
display: none;
}
できたのがこちら↓
:first-childは、親要素にとって第一番目の直下要素のみを対象とする擬似クラス
適用対象：要素内の最初の子要素
▼HTML この場合は【:first-child】は効く
<div class="sample sample1"> <p>1つ目のpタグ</p> <p>2つ目のpタグ</p> <p>3つ目のpタグ</p> </div><!-- sample -->
▼CSS
.sample1 p:first-child{
color:#ff0000;
font-weight:bold;
}
▼HTML この場合は【:first-child】は効かない
<div class="sample sample2a"> <h1>なんかしらのタイトル</h1> <p>1つ目のpタグ</p> <p>2つ目のpタグ</p> <p>3つ目のpタグ</p> </div><!-- sample -->
▼CSS
.sample2a p:first-child{
color:#ff0000;
font-weight:bold;
}
【 :first-of-type 】なら、指定した要素の前にどんなタグがあっても効く。
※ブラウザ実装状況はIE9からになります。
参考サイト：https://goma.pw/article/2015-02-06-0/
【 target=”_blank” 】を記述すると、新規のウィンドウで表示
▼通常のリンク先 記述方法
<a href="リンク先URL">アンカーテキスト</a>
▼別タブで開くリンク先 記述方法
<a href="リンク先URL" target="_blank">アンカーテキスト</a>
参考サイト：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を使用
p:before {
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)は、ある要素の隣接している子要素を最初から数えて、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
【1】コードのインデントを整える
1.上記のメニューから「コマンド」をクリック
2.ソースフォーマットの適用」をクリック
【2】ソースコードを一括で修正する。置換を使用
1.[Ctrl+f]で置換および検索
2.検索のボックスに修正する箇所をコピペ
3.置換のボックスに修正後のコードを記入
4.検索対象をサイトなど必要な範囲を選択
5.すべて置換を選択
※開いていないファイルを書き換える場合は、書き換えをしたら元に戻せないので注意。
marginは、要素の外側の余白のことです。
marginは、上下左右のマージンをまとめて指定するプロパティです。
上下左右を異なるマージン幅にしたい場合には、スペースで区切って複数の値を指定します。
auto （自動）を指定することもできます。
4つ値を指定する場合は上 右 下 左の時計回りの順
▼上5px 右10px 下15px 左20px
margin:5px 10px 15px 20px;
3つ値を指定する場合は上 左右 下の順
▼上5px 左右10px 下15px
margin:5px 10px 15px;
2つ値を指定する場合は上下 左右の順
▼上下5px 左右10px
margin:5px 10px;
1つだけ指定する場合は上下左右を一括で指定することになります。
▼上下左右5px
margin:5px;
▼上のみ指定
margin-top:5px;
▼下のみ指定
margin-bottom:5px;
▼左のみ指定
margin-left:5px;
▼右のみ指定
margin-right:5px;
borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。
スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
▼記述方法
border:1px solid #333;
・1pxの太さ
・solid=1本線
・#333=色の指定
参考サイト：http://www.htmq.com/style/border.shtml