Responsive
ヒーローヘッダー（マルチイメージ） ■考え方 ・２カラム(header,container)でfloatをかける。 ・高さは単位vhで調整。 ・横は%指定。 ・headerのロゴを中央指定★ポイント■コード html <body> <header> <img src="img/logo.svg" alt="logo"> </header> <div id="container"> <div class="ph topL"> <div class="text"> <h2>Frog</h2> <p>~Episode1~</p> </div> </div> <div class="ph topR">…</div></div></body>
ヒーローヘッダー ヒーローヘッダー（Hero Header）とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。（引用） ■考え方 ・ビューポートの高さを考慮( E { height: [x%/100%]vh …
RWDの考慮ポイント グリッド、リキッド、複合など、状況により判断する。■考慮ポイント ・viewportの設定(html:head) ・Fruid Imageの設定(css:reset) ・Media Queriesの設定(css) ※１ ーfloatの解除 ーfont-sizeの調整 ーbackground-imageのサイズ調整 ーナ…
いい感じのウェブサイト〜Responsive〜 レスポンシブの観点で印象に残ったものを記載していきます。■Responsive relation.main.jp・fluidImageのポジショニングが絶妙だと感じました。 1050pxのブレークポイントで、メインキャラの顔のアップから入り、 だん…
