CSS


※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

CSSのリファレンス

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

◯セレクタの指定

idの指定 #
#header
classの指定 .
.subspecial

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

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

◯半角スペース
&nbsp;
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: 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 全画面いける