responsive 全画面表示

仕上がりの目標。 hoverすると、べた色が下から出てきて、文字の位置がセンターにくる。後ろのレイヤ―、<div id="photo">の「background」に画像をレイアウトする。手前のレイヤー、<div id="caption">の「background」に色ベタをレイアウトする。 #photo、の中に（入れ子で）#captionを配置</div></div>…

2016-08-02

画像をスライスしてコーディングするその6

css responsible rwd 楽しいおかず html

okazu-background いままではすべての画像をimgで処理していた。実際には、背景として画像を配置しなくてはいけない場面もある。画像を背景にした時、フルードイメージにするにはどうすればよいのか、というのが今回のテーマ。 imgと背景画像の違い「img…

2016-07-31

画像をスライスしてコーディングするその5 - カラム落ちでRWD

html css rwd responsible 楽しいおかず

okazu-columnFall PCサイズはフルードイメージの記述から一切変更しない。 3columnの幅、960pxより幅が狭くなった時に、フルードイメージ（縮小）ではなく、カラム落ちするように記述してみる。フルードイメージ→画像が縮小する。カラム落ち→画像は縮小しな…

2016-07-31

画像をスライスしてコーディングするその4 - フルードイメージでレスポンシブデザイン

楽しいおかず rwd responsible slice

okazu-fluidImage 完成したPC用のページをレスポンシブデザインにする。まずは、タブレット用のデザインを考える。いま、PC用の横幅は960pxなので、959px以下のサイズでメディアクエリーを記述する。 <meta name="viewport" content="width=device-width">をheadに記述する。 @media screen and (max-width: 95</meta>…

2016-07-29

画像をスライスしてコーディングするその3

responsible html css rwd 楽しいおかず slice

全体の幅は960px １列（カラム）の幅は320px いちばん大きな画像のサイズは300px floatによってマージンの相殺が起きないので、すべての画像の周りにマージンを取ると余白が均等になる。すべての画像にmargin: 10pxをつける。カラムにfloat leftをかける。…

2016-07-29

画像をスライスしてコーディングするその2

slice photoshop html css responsible rwd 楽しいおかず

スライスした画像をコーディングする。縦３列、一列ごとに、ユニットごとにまとめる。縦の列は<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>