https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Study > CSSについて

CSSについて



共有CSS


共有CSS
共有CSS・リセットCSSを、サイトのメインCSSに組み込む
Common CSS参照

ページの先頭へ


要素に直接CSS NG


要素に直接CSSを指定しない ※完全にNG
 特に下記のような汎用性のある要素に、直接CSSを一括指定するのはNG!
 ID名・クラス名を付けて指定する
  【要素例】hX・div・ol・ul・li・dl・dt・dd・a・img・span・p・hr
タグ
							
img{←×
	width: 100%;
}
h2{
	padding: 20px 0 10px 40px;
}
ul{←×
	position: absolute;
	padding-left: 20px;
	vertical-align: bottom;
	width: 350px;
	text-align: center;
	list-style-position: inside;
}
div{←×
	float: left;
	text-align: center;
}
※上記要素を別で使いたい場合、 ・設定に汎用性がなく全てリセットしていかなければいけない ・必要な箇所を上書きするだけでなく、使わないプロパティも、 一つ一つ探して消していかなければいけない ・継承がキツく、容易にリセットできない・一括リセットできない
ID名・クラス名を付けて指定する ※下記a要素は、コーディング効率を考えると、要素に直接一括で指定をOKに!(勉強会後判断) a:link{←○ text-decoration: underline; ←ちなみに「none;」は継承はキツくないのでOKなど癖モノ font-size: 1em; color: #000; line-height: 1.5em; } a:visited{←○ color: #ccc; } a:hover{←○ color: #eee; }

※逆に全体に一括で付けたほうがいいCSS
 <body>への指定、リセットCSS関係
 例:<body>への、「font-size」「font-family」「color」「line-height」などサイトイメージ
 例:リセットの意味での<ul>への、「margin: 0; padding: 0;」等
 例:スマホサイトでの<img>への、「width: 100%; height: auto;」等


ページの先頭へ


「構造BOX」に詳細CSS NG


「構造BOX」と「詳細設定BOX」にCSSを分ける
「構造BOX」は、構造にまつわる設定のみ(幅や位置などページ構造のみ)にし、汎用性を高める

タグ
							
まず、「構造BOX」には、構造にまつわる「枠組み」のみ指定
#wrapper{
	width: 1200px;
    margin: 0px auto;
}
#main{
	width: 1000px;
}
#container{
	width: 710px;
	margin: 0 20px;
}
#sideOne{
	width: 250px;
}
※構造(枠組み)のみ指定(全ページ共通で使用)


「構造BOX」 + 「要素」等でCSSを指定しない NG例#container img{←× width: 100%; vertical-align: bottom; } #container h2{←× padding: 10px; }
「構造BOX」は、どのページでも共通で使用する。 が、上記指定では、「#container」内全ての「img・h2」に効いてしまう また継承がきつい 「構造BOX」は汎用性を持たせるため、詳細指定はしない。
↓↓↓ OK例: 「#container」BOXの中に更に、 「<section class="newsBox">中身</section>」BOXを作り指定 .newsBox img{ width: 100%; vertical-align: bottom; } .newsBox h2{ padding: 10px; }
設定したい範囲を、専用のID・クラス名で囲みBOXラップ 「#newsBox」内の要素のみに効くCSSになり、他に影響しない (「#newsBox」は「全ページ共通の構造BOX」ではない)
例:複数BOX一括指定も便利 #newsBox div,.mainBox div,.sideBox div{ display: inline; } #newsBox h2,.mainBox h2,.sideBox h2{ padding: 10px; } 設定したい箇所をBOXで囲み、ID名・クラス名を付けて個別指定する 「全ページ共通の構造BOX」には、構造以外に影響してしまうCSS設定はしない ただし、ヘッダー・フッターなどの他ページで絶対に変更のない、共通部分は除く <header> → CSS側で「 header img{ width: 100%; }」といった指定OK <footer>同上

構造BOXの説明Excel参照

スマートフォンサイトIMGクラス提案(幅100%)参照
→ 意見交換でコーディング効率を考え、スマホサイトでの「img{width:100%;}」等[「要素へ直接指定」をOKに!


ページの先頭へ


その他留意事項


CLASS名複数付加は1要素に3つまで
例:<div class="title mlr50 clearfix"> 3つのCLASS設定
※できるだけ3つまでにし、それ以上になる場合は専用のCLASSを付けまとめる。たくさん設定すると重くなる。

ページの先頭へ


命名法


命名法
例:後ほど。。。

ページの先頭へ


CSS例


<li>を使ったBOX横並び
例:フロートを使用・不使用で、それぞれ色んなパターンのBOX横並び例
※CSS3の「boxプロパティ」は、まだブラウザ対応がバラバラのため未試作
試作ページ参照

ページの先頭へ


便利&効率的&スマートなCSS


便利なCSS指定
運用実際ページ参照
:〇〇-child (子セレクタ系指定)
タグ
							
例:CSS
.box li:nth-child(2n+1){
	clear: both;
}
:nth-child(2n+1) ・・・ 親要素(上記の場合「box」)内で、奇数の子ごとにCSS指定可能
(上記は奇数の<li>ごとにフロート解除)

:nth-child(2n+0) ・・・ 親要素内で、偶数の子ごとにCSS指定可能
:nth-child(3n+1) ・・・ 親要素内で、3つの子ごとにCSS指定可能

ちなみに、
:nth-child(n) ・・・ n番目
2番目だけ :nth-child(2)
5番目だけ :nth-child(5)

:first-child ・・・ 最初の子
:last-child ・・・ 最後の子

							
							

〇 + 〇 (隣接セレクタ系指定)
タグ
							
例:CSS
.box li + li{
	margin-left: 10px;
}
<li>と<li>の間のみにCSS指定可能(最初の<li>にはマージンを入れたくないなど)
							
							

〇 > 〇 (直下の子セレクタ系指定)
タグ
							
例:CSS
.box li > img{
	width: 100%;
}
<li>の直下の<img>にのみにCSS指定可能(更に下層要素のIMGには適応しない)

例:HTML
<ul class="box">
	<li>
		<img src="ok.jpg" alt="">
		<a>
			<img src="no.jpg" alt="">
		</a>
	</li>
</ul>
上記のHTMLコードで上記CSSを使うと、ok.jpgは幅100%になるが、no.jpgには効かない
							
							


ページの先頭へ



次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会