css
Q5 ｄを書き忘れてロスタイム。しょっちゅうやっているね… <script> var d=new Date();var year=d.getFullYear();var month=d.getMonth()+1;var date=d.getDate(); var dayIndex=d.getDay();var week=new Array('日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '…
http://ohtafelica.webcrow.jp/20160428/border-radius/ <html lang="ja"><head><meta charset="utf-8"><title>opacity</title><style>html, body, div{ margin: 0; padding: 0; line-height:1.0; font-family: "游ゴシック", YouGothic, sans-serif; /*reset ------------------------------------------------…</meta></head></html>
opacity <html lang="ja"><head><meta charset="utf-8"><title>opacity</title><style>html, body, div{ margin: 0; padding: 0; line-height:1.0; font-family: "游ゴシック", YouGothic, sans-serif; /*reset ---------------------------------------------------*/}#wrapper{ width: 1000px; margin: 30px au…</meta></head></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…
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 のインライン要素として写真を取り…
卵料理カフェ 道は険しい。時間がかかりすぎだ。きょうはこれまで。 p要素は２次元空間でどのように広がっているのか？まだわかっていない.… ミスタイプでハマるケースが多すぎる。 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;といった具合に。 １カラムの場合は、#containerの中央に…
幅があれば、マージンを指定できる。#containerに幅を指定する。指定することでmargin:o auto;の記述が意味を成す。 ulも同じ。幅を指定しないと、親要素の幅いっぱいなのか？幅を指定すれば親要素に対して位置を決められる。 ulで幅を決めると、左右の置き…
rgba background: rgba(); 背景の色を指定して、透明度も指定できる。 aの値は０から１。 ０は透明、１は不透明、つまりソリッドカラーの状態。 border-radius: 50%とは円を作画することである。 一辺の長さのうち、どの割合を曲げるのか、ということ。 曲げ…
text-shadow text-shadowはCSS3の新要素。 text-shadow: 3px 3px 3px #AAAAAA; 最初の値はx方向のoffset、右が＋。2番目の値はy方向のoffset、下が＋。 3番目の値はボケ方の数字だけれども、いまひとつ理解できません。実験しました。数字が大きくなると等比…
