Blog。日々書くことが大切。
久しぶりの更新のakiです。
梅雨に入り気分は憂鬱になりがちですね´д` ;
でも、そんな時は、この曲を聴いて元気出してます( ´ ▽ ` )ノ
ナオト インティライミさんの『Brave』です♪。
元気がない時は、めっちゃ元気が出るので聴いてみてくださいね!
さてさて。
今日のウェブサイト授業は、1カラムの携帯サイズ対応のhpを作る。でした。
今や携帯需要がほとんどで、これができないと意味がない時代だそうです。
レスポンシブ対応にするには、htmlの中に、viewport contentを入れます。
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title></title> | |
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | |
<LINK rel="STYLESHEET" href="css/style.css"> | |
</head> |
stylesheetの中には、
@media screen and (max-width: 767px){}と記述し、%でサイズを可変できるように
します。
ちなみにタブレットサイズは、
@media screen and (max-width:959px){}と記述します。
今回は携帯用だったので。↓
@media screen and (max-width: 767px){
#container{
width:63%;
padding:1%;
}
のように、containerのwidth(幅は元のスタイルシート)のサイズに合わせた%に書き換えます。今回は63%です。
他の要素も指定していきます。
結構簡単のようで、難しいです。
paddingやmarginをそのままの比率で可変する場合は、
box-sizing:border-boxを付け加えます。
今日はこれを忘れないように、復習頑張ります。
★ Blog.....
毎日書くのが習慣になれば、自分の記録としても残るし、皆様の意見も聞けるし、
良いことばかり〜
ビギナーのブログ会にも参加してみたんですが、皆さん本当にいい人ばかりで、
Blogの内容もためになる話や、興味がわくことばかりですごいと思いました。
そんな上級者の方もはじめは、あまり読まれなかったそうです。
一つ言えることは、、、、、、
書き続けること!
それが秘訣だそうです。
内容はなんでも良いし、そのうちに上手くなれるときいて、気軽に書けるようになりました!ありがとうございました( ´ ▽ ` )ノ
まだ書くことに抵抗がある初心者の方、一緒に頑張りましょうねー!!!