ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

Responsive

web023 ヒーローヘッダー(マルチイメージ)

ヒーローヘッダー(マルチイメージ) ■考え方 ・2カラム(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>

web021 ヒーローヘッダー

ヒーローヘッダー ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。(引用) ■考え方 ・ビューポートの高さを考慮( E { height: [x%/100%]vh …

web013 RWD(Responsive Web Design)の考慮ポイント

RWDの考慮ポイント グリッド、リキッド、複合など、状況により判断する。■考慮ポイント ・viewportの設定(html:head) ・Fruid Imageの設定(css:reset) ・Media Queriesの設定(css) ※1 ーfloatの解除 ーfont-sizeの調整 ーbackground-imageのサイズ調整 ーナ…

website001 いい感じのウェブサイト〜Responsive〜

いい感じのウェブサイト〜Responsive〜 レスポンシブの観点で印象に残ったものを記載していきます。■Responsive relation.main.jp・fluidImageのポジショニングが絶妙だと感じました。 1050pxのブレークポイントで、メインキャラの顔のアップから入り、 だん…