rwd
上のPC用ページをレスポンシブに変える。 方針 ロゴはヘッダーのようにトップに置く。 画像、キャプションと交互に表示する。 画像は背景なのでwidth: 100%; height: 0; padding-bottom: で写真の領域を確保する。backgroundの画像をレスポンシブにする時は…
仕上がりの目標。 hoverすると、べた色が下から出てきて、文字の位置がセンターにくる。 後ろのレイヤ―、<div id="photo">の「background」に画像をレイアウトする。 手前のレイヤー、<div id="caption">の「background」に色ベタをレイアウトする。 #photo、の中に（入れ子で）#captionを配置</div></div>…
okazu-background いままではすべての画像をimgで処理していた。 実際には、背景として画像を配置しなくてはいけない場面もある。 画像を背景にした時、フルードイメージにするにはどうすればよいのか、というのが今回のテーマ。 imgと背景画像の違い 「img…
okazu-columnFall PCサイズはフルードイメージの記述から一切変更しない。 3columnの幅、960pxより幅が狭くなった時に、フルードイメージ（縮小）ではなく、カラム落ちするように記述してみる。 フルードイメージ→画像が縮小する。カラム落ち→画像は縮小しな…
okazu-fluidImage 完成したPC用のページをレスポンシブデザインにする。 まずは、タブレット用のデザインを考える。 いま、PC用の横幅は960pxなので、959px以下のサイズでメディアクエリーを記述する。 <meta name="viewport" content="width=device-width">をheadに記述する。 @media screen and (max-width: 95</meta>…
全体の幅は960px １列（カラム）の幅は320px いちばん大きな画像のサイズは300px floatによってマージンの相殺が起きないので、すべての画像の周りにマージンを取ると余白が均等になる。 すべての画像にmargin: 10pxをつける。 カラムにfloat leftをかける。…
スライスした画像をコーディングする。 縦３列、一列ごとに、ユニットごとにまとめる。 縦の列は<div>のクラスで、ユニットは<ul>でまとめる。 まずは整理整頓。 <body><div id="container"><div class="leftColumn"><h1 class="a1 size22"><img src="img/a01_logo.png"></h1><nav><ul class="a2"><li class="size11"><img src="img/a02_nav01.png"></li><li class="size11"></li></ul></nav></div></div></body></ul></div>
一番大きいサイズの画像は300px*300px、1番小さいサイズの画像は140px*140px。 フォトショップでスライスをする。 「環境設定」でピクセル単位の作業ができる環境にする。 スライスして切りだした後のサイズがわかっている時は、「長方形選択ツール」→「固定…
まずは、PC用にコーディングしてから、レスポンシブに対応させる。 headerではレイアウト上、<h1>より上に<p>があるけれども、これはレイアウトの問題で、文書構造を変えてレイアウトしないように気をつける。 縦方向のレイアウトはpositionを使う。 本来「縦」に並</p></h1>…
soybean PC tablet タブレットは小型のPCという意識で使われているから、PCのレイアウトに準じた。 全体を#container で囲って、padding 8px 周囲につけた。 smart phone ナビゲーションの横幅を50%にして、border をnth-child(); を使って変更した。 border…
html <html lang=ja""><head><meta charset="utf-8"><title>無題ドキュメント</title><link rel="stylesheet" href="style.css"></head> <body><div id="logo">logo</div><div id="header">header</div> <div id="nav"><ul><li><a href="#">menu1</a></li><li><a href="#">menu2</a></li><li><a href="#">menu3</a><…</li></ul></div></body></html>
この手法は<img>でしか使えない。画像をbackgroundにした場合は使えません。 <img> には幅高さを指定しない。dreamweaverでドラッグすると幅高さが記述されてしまうので、要注意。 windowの横幅に合わせたいけれども、画像のオリジナルサイズ以上にはしたくない時に使…
ヘッダーにナビゲーションを作る 帯状のナビゲーションを作る。ナビゲーションの見栄えはボディー全体。 ボタンの部分はセンター揃え ボディー全体の横幅を使うのは、ナビゲーションだけで、他のコンテンツは横幅960pxとする。 このパターンで作る手順を、パ…
全く同じ手順で、スマホ用。767pxが、ブレイクポイント。 overflow: inherit;がなにもしないデフォルトの状態。 @media screen and (max-width: 767px){ #container{ width: 98%; padding: 1%;}#header{ margin-bottom: 1%;}#nav{ margin-bottom: 1%;}#wrapp…
その1 のCSS に以下のコードを書き足します。 containerの幅はbodyに対しての割合。 containerの中にある要素の幅は、containerの幅=940pxに対する割合で指定する。 要素の上下につくpadding marginの大きさも、親要素の横幅に対する割合で指定する。つまりp…
色と、幅、高さを指定して、#wrapperで囲んで、中の#mainと#side をfloat で並べた状態。 #main はfloat: left; #sideはfloat: right; にしておく。rwdの時は両方ともfloat: left; にするよりも、この方が都合がいいのかもしれない。 （本日の気付き）#conta…
メディアクエリー @media screen and (max-width: px){}（どこにスペースを入れるのか細心の注意を払う）間違えると機能しない。 波括弧の中に、指定した条件の場合のスタイルシートを書く。 ブレイクポイントとは、スタイルを変えるポイントのこと。 今回の…
レスポンシブデザイン SmartPhoneにどう対応させるか。SPできちんと見えているか？ モバイル版googleで検索すると、”スマホ対応”と表示されるサイトがある。 どうすれば、”スマホ対応”になるのか？ googleのmobile friendly test に合格すればよい。 https:/…
