webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

responsible

responsive 全画面表示

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

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

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

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

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

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

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

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

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

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

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

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

一番大きいサイズの画像は300px*300px、1番小さいサイズの画像は140px*140px。 フォトショップでスライスをする。 「環境設定」でピクセル単位の作業ができる環境にする。 スライスして切りだした後のサイズがわかっている時は、「長方形選択ツール」→「固定…