カテゴリ:CSS( 3 )

 

CSSでスマホ対応する方法

一般的にというか今のコーダーならほとんどの人がこれを書くと思います
Media Queriesと言われるやつですね

@media screen and (max-width:1024px) {
}
@media screen and (max-width:768px) {
}

どっこい僕がこれを嫌う
だって、ファイルが意味不明になっていくんだもん

結局のところ、スタイルを上書き処理しているので
なして?って思っている


んで、PHPを使っている自分としては
< section class="wrapper">
< div class="">

< /section>

という記述にしておき
$device は、デバイスによって自動的に切り替え処理をしている

こうする事で、スタイルシートも切り変える
pc.css
sp.css
を個々で読み込みを変えるわけ

こっちのほうがソースが読みやすくなった
[PR]

by hiro__neko | 2016-06-28 10:44 | CSS  

センタリングいろいろ覚書

一番簡単なセンタリングは
< center >hogehoge< /center >

Block要素センタリングするには
< div >
< ul >< li >hogehoge< /li >< /ul >
< /div >

div {
width:100%; //として
}

ul {
width:900px; //として
margin:0 auto 0 auto;
}

でもこの場合、LIの数で横幅が可変なので
究極がこれ
< div >
< ul >< li >hogehoge< /li >< /ul >
< /div >

div {
width:100%; //として
text-align: center;
}

ul {
display: inline-block;
}

親要素の影響をうけてくれるので、センタリングされます。
liがいくつあっても自動でセンタリングなので重宝

とりあえず覚書でした
[PR]

by hiro__neko | 2015-09-03 13:58 | CSS  

備忘録 CSSで Height 100%

Webページ内に配置したボックスなどのブロック要素で
要素の高さを100%に伸ばそうとしたところ
ちょいちょい忘れるので備忘録

CSSで「height:100%;」と記載するわけですが

< html>
< body>
< div id="container">< /div>
< /body>
< /html>


とした場合
CSSは下の通り。

html,body {
height: 100%;
}

#container {
height: 100%;
min-height: 100%;
}

body > #container {
height: auto;
}


「html」タグと「body」タグに「height:100%;」
要素に対しては
「height:100%;」と「min-height:100%;」

「body」タグの中に入るブロック要素全体の高さが
「body」タグより大きくなった場合には「height: auto;」に切り替える指定も追加します。

参考元:http://black-flag.net/css/20110621-3232.html



[PR]

by hiro__neko | 2013-06-21 11:48 | CSS