投稿者: admin

【 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

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

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

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

padding:5px 10px 15px 20px;

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

padding:5px 10px 15px;

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

padding:5px 10px;

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

padding:5px;

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

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

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、
ウェブページのスタイルを指定するための言語です。

【HTML】

<h1>クレアネット</h1>

【CSS】

h1{
  color:red;
}

色指定のプロパティ値 rgba(0~255,0~255,0~255,0~1);

rgbと不透明度aで色指定できる。
rgbは0~255または%指定、
aは0~1で指定　※0（完全に透明）～1（完全に不透明）

【使用する時】
color,background-color
だけでなく
borderやbox-shadowなど色指定できるプロパティに使用できる。
特にデザイン画でbox-shadowに透明度を使用している場合が多いので、利用すると再現しやすい。

【opacityプロパティとの違い】
opacityだと全体に透明度の設定がかかる。
例えば背景だけ透過させたい場合、
background-colorにrgba()で透明度を設定すると背景だけに不透明度の設定ができる。