読者です 読者をやめる 読者になる 読者になる

レスポンシブの対応の基礎。

本日の授業は、

レスプンシブの基礎を確認した授業でした( ´ ▽ ` )ノ

レスプンシブとはPC画面サイズから携帯画面サイズに変化する、stylesheet作業です。

携帯サイズのに変更できるだけで、かなり需要があるHpになっちゃいます🌟

 

レスポンシブ基礎

用意するものは、

画像は高解度画像素材

html

<body>
  <div class="entry">
  <img src="img/ph1.jpg" alt="">
  <h1>記事のタイトル</h1>
 

<p>この文章は記事の本文です。この文章は記事の本文です。

</div>

 

css

  

  

img{
  border: none;
  vertical-align: bottom;
  }
  img{
  max-width:100%;
   
  }
  body{
  background:#E0E4E9;
  padding:20px;
  }
  h1 p{text-align:center;
  line-height:1.5;
  margin-bottom:1.0em;}

リセットを記入するしてから、このように記入。

この時に一番大事なのは

imgにmax-width:100%

これを指定するだけでレスポンシブ対応になっちゃいます。

個人的にbodyのpadddingを入れ忘れ、画像がめいいっぱいだったので気をつけたい。

 

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

幅を縮小していくと、このように変化*・.:*・'(*゚▽゚*)'・*:.。. .。.:*・゜゚・*

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

テキストも幅に合わせ回りこみ、画像も縦横比を保ったまま縮小している。

結構簡単にできたので、ぜひやってみてください。

 

クライアントワーク(友達のhp作り)の期限が着々と迫ってきていますが、レスポンシブをマスターすれば、素敵なHPになりますね ´ ▽ ` )ノ

 

まだまだ終わりそうにないけど、

すこしづづやっって行こう〜♪( ´▽`)

 

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