html
寸法を何も指定しない状態 #wrapper{ width:450px; margin: 0 auto; padding: 100px 0 0 0;}ul { overflow: hidden;}li{ float: left;width: 180px;height: 60px;}li a { display: block;}</style> </head> <body><div id="wrapper"><ul><li><a href="#">いちばんめ</a></li><li><a href="#">にばんめ</a></li><li><a href="#">さんばんめ</a></li></ul></div></body>
<style> html, body, h1, p{ margin: 0; padding: 0; line-height: 1.0; font-family: YouGothic,"游ゴシック", sans-serif;}body{ font-size: 16px; background: #FFFFEE;}#wrapper{ width: 960px; margin: 0 auto;}h1{font-size: 50px; text-transform: uppercase…
フォント名に、スペースや全角文字が含まれる場合は、""(double quautation)で囲む。 YuGothic はMac用の指定。"游ゴシック"はwin用の指定。明朝体は、Yumincho(YuMinchouではない)"游明朝"。 <style>html, body, h1 { margin: 0; padding: 0; line-height: 1.0;}bo…
960 Grid System — Demo 1200px Grid System
現時点での、自分の手順を意識しておきたい。 font-size の基準は 16px。 line-height の基準は1.6。英文は 1.5。 幅を指定して margin: 0 auto; div で囲ったら、中の要素を指定するときには省略しない。省略してうまくいかないことが多い。 body の左側か…
http://ohtafelica.html.xdomain.jp/biz/ フッターのナビゲーションを修正 li の幅を揃えないで、文字の両サイドの空きを揃えるように修正。li a にdisplay: block;しない。文字の左右にpadding を指定。 要素検証して、ul に必要な幅を計算する。各々の、li…
p の中身がアルファベットの羅列だと文章として認識しないのか、きちんと折り返されないで、一直線に表示される。 p はブロック要素だから幅が指定できる。 margin: 0 auto; と記述すれば、親要素の真ん中に配置できる。 p のインライン要素として写真を取り…
実験の条件 リセットをかけた状態で、liが5つあるulの要素検証をしてみる。 bodyや#containerとの関係もみたいので、bodyに色を付けてみた。 #containerにはwidth: 500px;を設定した。 確認したかったことのまとめ bodyで指定したフォントサイズになってい…
卵料理カフェ 道は険しい。時間がかかりすぎだ。きょうはこれまで。 p要素は2次元空間でどのように広がっているのか?まだわかっていない.… ミスタイプでハマるケースが多すぎる。 html, body, h1, h2, h3, ul, li, footer{ margin: 0; padding: 0; line-he…
2column layout floatするには幅が必要。 大きいブロックをフロートさせて、小さなブロックは成り行きにした。 <p>はパラグラフであることを思い出した。 段落と段落の間は、p{ margin-bottom : 16px;}、のようにまとめて指定すると楽。 imgの周囲にマージンを</p>…
1column layout 面として、幅があるから左右の位置指定ができる、アタリマエのことをもう一度確認する。 #containerの幅を指定すれば、bodyに対して左右の位置を決められる。例えば、margin: o auto;といった具合に。 1カラムの場合は、#containerの中央に…
http://paulund.co.uk
coolors.co
幅があれば、マージンを指定できる。#containerに幅を指定する。指定することでmargin:o auto;の記述が意味を成す。 ulも同じ。幅を指定しないと、親要素の幅いっぱいなのか?幅を指定すれば親要素に対して位置を決められる。 ulで幅を決めると、左右の置き…
rgba background: rgba(); 背景の色を指定して、透明度も指定できる。 aの値は0から1。 0は透明、1は不透明、つまりソリッドカラーの状態。 border-radius: 50%とは円を作画することである。 一辺の長さのうち、どの割合を曲げるのか、ということ。 曲げ…
text-shadow text-shadowはCSS3の新要素。 text-shadow: 3px 3px 3px #AAAAAA; 最初の値はx方向のoffset、右が+。2番目の値はy方向のoffset、下が+。 3番目の値はボケ方の数字だけれども、いまひとつ理解できません。実験しました。数字が大きくなると等比…