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

webかたつむり

ウェブデザインを勉強中

実験

bevel emboss

photoshop のベベルとエンボスについて bevelは面取りのイメージ。 エンボスは内側から叩き出すイメージ。 ベベル(外側)はよくわからない。ベベル(内側)、テクニック「滑らか」 ベベル(内側)テクニック(ジゼルハード) エンボス、テクニック(滑らか)

position: relative; について

箱を2つ縦に並べる。position は指定しない。つまり、position: static; のまま。 box1に、position; relative:を追加すると… なにも変わりません。 こんどは、box2のborderを外して、boxshadowをつけてみる。 あとに記述した内容で上書きされるから、上のよ…

制作実習 wire frame

http://ohtafelica.webcrow.jp/clogoWireframe/ 頭のなかにあるアイディア、思いつき、なんでもいいから整理してみようと思う。 具体的な図面に起こすだけで、実行不可能、あるいは思っていたほど面白くないアイディアは多いものだ,と気がつく。 まずは「た…

frame chart

1200-1500 1300-1500 制作課題を作るのはいいけれども、htmlファイルがbrouser上でどのように表示されるのか、気になって仕方がない。 そこで、フレームチャートを作ってみた。 width: 1300px height: 1500pxとwidth: 1200px height: 1500pxの2つ。 おもに…

css について整理したい

background-size contain、は縦横の比率を維持したまま(スクイーズはかけないで)画像が絶対に切れないように配置される。比率が合わない時は背景色が見えてしまう。下の例だと画像の横サイズ合わせ。 cover、は縦横の比率を維持したまま(スクイーズはかけ…

box-shadow

box-shadow:0 10px 0 0 #777; offset-y 10px box-shadow:0 10px 10px 0 #777; blur radius 10px box-shadow:0 10px 0 10px #777; spread radius 10px 上下左右に10px大きいグレーの長方形を下にできた。それを上辺からはみ出さないように、左右均等に配置し…

リストからナビゲーション、再び

リセットして、何もしない状態。 float: left; を使って、li を横に並べる ul に overflow: hidden; li に float: left;をかけた状態。 display: inline-block で li を横に並べてみると… li に display: inline-block を指定した状態。 リセットを掛けた状…

p について考える。

p の中身がアルファベットの羅列だと文章として認識しないのか、きちんと折り返されないで、一直線に表示される。 p はブロック要素だから幅が指定できる。 margin: 0 auto; と記述すれば、親要素の真ん中に配置できる。 p のインライン要素として写真を取り…

ul について考える。

実験の条件 リセットをかけた状態で、liが5つあるulの要素検証をしてみる。 bodyや#containerとの関係もみたいので、bodyに色を付けてみた。 #containerにはwidth: 500px;を設定した。 確認したかったことのまとめ bodyで指定したフォントサイズになってい…