レスポンシブの対応の基礎。
本日の授業は、
レスプンシブの基礎を確認した授業でした( ´ ▽ ` )ノ
レスプンシブとは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を入れ忘れ、画像がめいいっぱいだったので気をつけたい。
幅を縮小していくと、このように変化*・.:*・'(*゚▽゚*)'・*:.。. .。.:*・゜゚・*
テキストも幅に合わせ回りこみ、画像も縦横比を保ったまま縮小している。
結構簡単にできたので、ぜひやってみてください。
クライアントワーク(友達のhp作り)の期限が着々と迫ってきていますが、レスポンシブをマスターすれば、素敵なHPになりますね ´ ▽ ` )ノ
まだまだ終わりそうにないけど、
すこしづづやっって行こう〜♪( ´▽`)