CSS - oreference @ ウィキ

CSSのリファレンス

【表紙の真似をしたときのいろいろ】

◯セレクタの指定

idの指定 #

#header

classの指定 .
.subspecial

classの中のp要素 みたいな感じ
.class p {}

↓こんなかんじで <ul> 内をスタイルしたいとき
<div id="headerNavLin"><ul><li>リストアイテム</li></ul></div>

#headerNavLink

ul {
}

◯半角スペース
＆ｎｂｓｐ；
htmlで半角スペースを打っても反映されないのでこれを使う。

◯ボックスや画像を寄せたりする
float:;
rightかleftを入れる。
すげー使う。
必ず width を指定しないといけない。
2カラムにするときは合計で100%になるようにすればおっけい。

◯背景画像を入れるとか
背景の削除はGIMPで、アルファチャンネルを追加して削除みたいな感じ。
background-image: url("haikei.jpg)
background-size: 800px 600px;
background-repeat: no-repeat;

◯ボックスモデル
よくわかってない。ググればいけそう。

◯行間とか
line-height
なんかいじれるけど、よくわかってない。

◯文字の位置
text-align

• • • • • • • • • • ドットインストール レスポンシブデザインの-------------

<<レスポンシブデザインの仕組み>>
◯サイズ
スマホ: 320px - 480px
タブレット:; 480 - 768px
PC : それ以上

◯サイズに合わせたスタイルを書く

• 共通の設定
• スマホ用の設定
• タブレット用の設定 = widthが480pxを超えたら

→次のように書く。
@media all and (min-width: 480px) {
}

• PCの場合

→ @media all and (min-width: 768px) {
}

◯サイズによってメニューバーを隠したり、出したりする。

• スマホのとき

ヘッダーのナビを隠す

• タブレットのとき

フッターのナビリンクを隠す。
ヘッダーのナビを出す。
フッターンナビを隠す

• PCのとき

overflow:hidden → ボックスからはみ出た領域を表示しない
mainとsubで2カラム表示

◯Youtubeをうまく埋め込む

• よくわからん。

◯いい感じに余白を付けて、中央揃え
width: 95%;
margin: 0 auto;

◯list-style: none:
リストアイテムのマーカーを表示しない
「●」みたいなやつが消える！ 便利！

◯headerNavのリストアイテムが3つあるときに、こうするときれいに三分割になる

#headerNav

li {
float: left;
width: 33%;
text-align: center;
}
リストの要素(Home About Contact)
がそれぞれ33%ずつにきれいになる

◯画像をbodyの幅からはみ出ないようになる？
img {
max-width: 100%; }

◯レスポンシブデザインの考え方
viewport??
<meta name="viewport" content="width=device-width, initial=1.0” >
決まり文句。
要するにスマホ(=Device)のサイズに合わせますよということ。

◯ボックスモデルからはみ出た部分を非表示に
overflow: hidden:

◯display http://www.htmq.com/style/display.shtml

• 要素が表示されず、レイアウトに影響を与えない要素にする。

display: none block

• ブロックボックスをつくる

display: block

◯positionはやっぱりよくわからない(調べてない)
position: reactive absolute
top left とか

◯iframe なんか動画埋め込みとかできる
<iframe src="https://www.youtube.com/?rel=0" frameborder="0" allowfullscreen></iframe>

• frameborder="0" 枠が表示されない
• 動画URLのラストに ?rel=0 関連動画が表示されない
• allowfullscreen 全画面いける