「CSS」の編集履歴(バックアップ)一覧はこちら
「CSS」(2014/09/01 (月) 01:46:55) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
CSSのリファレンス
【表紙の真似をしたときのいろいろ】
◯セレクタの指定
idの指定 #
#header
classの指定 .
.subspecial
子要素の指定とかはまだ全然わからん。
◯半角スペース
 
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
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 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 全画面いける