Blog。日々書くことが大切。

久しぶりの更新のakiです。

f:id:aki-blog:20160607183205p:plain

梅雨に入り気分は憂鬱になりがちですね´д` ;

 

 

でも、そんな時は、この曲を聴いて元気出してます( ´ ▽ ` )ノ

ナオト インティライミさんの『Brave』です♪。

f:id:aki-blog:20160607172405p:plain

 

元気がない時は、めっちゃ元気が出るので聴いてみてくださいね!

 

 

さてさて。

今日のウェブサイト授業は、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を付け加えます。

今日はこれを忘れないように、復習頑張ります。

 

f:id:aki-blog:20160607183008p:plain

 

★ Blog.....

毎日書くのが習慣になれば、自分の記録としても残るし、皆様の意見も聞けるし、

良いことばかり〜

ビギナーのブログ会にも参加してみたんですが、皆さん本当にいい人ばかりで、

Blogの内容もためになる話や、興味がわくことばかりですごいと思いました。

そんな上級者の方もはじめは、あまり読まれなかったそうです。

一つ言えることは、、、、、、

書き続けること!

それが秘訣だそうです。

内容はなんでも良いし、そのうちに上手くなれるときいて、気軽に書けるようになりました!ありがとうございました( ´ ▽ ` )ノ

まだ書くことに抵抗がある初心者の方、一緒に頑張りましょうねー!!!