レスポンシブの対応の基礎。
本日の授業は、
レスプンシブの基礎を確認した授業でした( ´ ▽ ` )ﾉ
レスプンシブとは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になりますね ´ ▽ ` )ﾉ
まだまだ終わりそうにないけど、
すこしづづやっって行こう〜♪( ´▽｀)
