soybean PC tablet タブレットは小型のPCという意識で使われているから、PCのレイアウトに準じた。 全体を#container で囲って、padding 8px 周囲につけた。 smart phone ナビゲーションの横幅を50%にして、border をnth-child(); を使って変更した。 border…

この手法は<img>でしか使えない。画像をbackgroundにした場合は使えません。 <img> には幅高さを指定しない。dreamweaverでドラッグすると幅高さが記述されてしまうので、要注意。 windowの横幅に合わせたいけれども、画像のオリジナルサイズ以上にはしたくない時に使…

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大きいグレーの長方形を下にできた。それを上辺からはみ出さないように、左右均等に配置し…

ヘッダーにナビゲーションを作る 帯状のナビゲーションを作る。ナビゲーションの見栄えはボディー全体。 ボタンの部分はセンター揃え ボディー全体の横幅を使うのは、ナビゲーションだけで、他のコンテンツは横幅960pxとする。 このパターンで作る手順を、パ…

全く同じ手順で、スマホ用。767pxが、ブレイクポイント。 overflow: inherit;がなにもしないデフォルトの状態。 @media screen and (max-width: 767px){ #container{ width: 98%; padding: 1%;}#header{ margin-bottom: 1%;}#nav{ margin-bottom: 1%;}#wrapp…

その1 のCSS に以下のコードを書き足します。 containerの幅はbodyに対しての割合。 containerの中にある要素の幅は、containerの幅=940pxに対する割合で指定する。 要素の上下につくpadding marginの大きさも、親要素の横幅に対する割合で指定する。つまりp…

Q01 ポイントは、メイン画像にname属性をつけること。 id , class はCSSを使うようになってからのやり方、だそう。 name 属性は旧式のやり方。 要素の値を使うときは、name属性を使う。 onMouseOver="mainImg.src='abc.jpg`" ダブルクオーテーションの中は、…

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

フォント名に、スペースや全角文字が含まれる場合は、""(double quautation)で囲む。 YuGothic はMac用の指定。"游ゴシック"はwin用の指定。明朝体は、Yumincho(YuMinchouではない)"游明朝"。 <style>html, body, h1 { margin: 0; padding: 0; line-height: 1.0;}bo…

http://paulund.co.uk

rgba background: rgba(); 背景の色を指定して、透明度も指定できる。 aの値は０から１。 ０は透明、１は不透明、つまりソリッドカラーの状態。 border-radius: 50%とは円を作画することである。 一辺の長さのうち、どの割合を曲げるのか、ということ。 曲げ…

text-shadow text-shadowはCSS3の新要素。 text-shadow: 3px 3px 3px #AAAAAA; 最初の値はx方向のoffset、右が＋。2番目の値はy方向のoffset、下が＋。 3番目の値はボケ方の数字だけれども、いまひとつ理解できません。実験しました。数字が大きくなると等比…