電脳世界の空間的平面設計

現在WEBサイト制作の学校に通い勉強しています。その覚書きです。

CSS

floatが効かない width:100%;の罠

CSS

widthの初期値 何も指定していない場合 widthの指定は100%になっている Q、何に対して100%なの? A、親要素の幅に対して たとえば直ぐ上の親要素が<div class="container">で.containerの幅が960pxだった場合 中にある<h1>の幅は960pxになる。 その為floatを効かせても、ズレる 思い</h1></div>…

CSS no-repeatが効かない理由

CSS

no-repeatが使えない background-imageではno-repeatが使えない background-colorでもno-repeatは使えない background-repeat 本来no-repeatはbackground-repeatで使う属性 repeat、repeat-x、repeat-y も同様 ショートハンドプロパティ backgroundでは全て…

レイアウトが崩れる!あなたはボックスモデルを本当に理解しているのか!?

レイアウトが崩れる!あなたはボックスモデルを本当に理解しているのか!? でけぇ、なげぇ。 レイアウトが決まらない殆どの理由はボックスモデルを理解してないからだと思います。 つーか、僕がそうだった、最近やっと解ってきたよ!。 まぁ、そんな訳で僕…

HTMLにidでは無くclassを使う理由

業界ではidを使わずclassを多用するそうな。 では、それは何故か。 javascriptなんかのWEBプログラムにidを使うから idを使わずに空けておく為なのだと。 じゃあ何故WEBプログラムではidを使うのかというと その方がプログラムが早く動きサイトが軽くなるか…

CSS z-index の使い方

CSS

z-indexのzとは奥行きのこと x=よこ、y=たて、z=おくゆき というわけで対象を手前に置いたり、奥に置いたりすることが出来るという指定です。 z-index: 100; positionとセットで使う 業界に入ったらでかい数字がz-indexに使われているらしい その狙いとは…

背景を透明にしたい! CSS3で透明度を利かせるやり方

二つの透明度 透明度はopacityとrgbaで指定できる。 じゃあどっちでも良いじゃん。 と、思うじゃん? ところがどっこい効果が違います。 opactyの場合 例えばあるdivの背景を透明にしたい場合 opactyで指定すると文字も透明度が変わってしまいます なので、d…

背景を動画にする

yachin29.hatenablog.com このブログが最高に解りやすいです。 うん。 今度追記しよう。

サイトの背景を画像にする

画像の大きさは1400×700が良いらしい モニターの画面比率は16:9だが ブラウザバーなどの高さを考えると16:8ぐらいになる 2:1ですね。 画像がそのままだとデータ重いです。 グーグルは重い画像データを表示させるサイトを弾くそうなので 画…

テーブルの練習

テーブルの練習 HTML <h1>テーブルの練習</h1><table><caption>宿泊料金表</caption><tr><th>部屋タイプ</th><th colspan="3">ツイン</th><th colspan="2">シングル</th></tr><tr><th>グレード</th><td>スタンダード</td><td>エグゼクティブ</td><td>スイート</td><td>スタンダード</td><td>エグゼクティブ</td></tr><tr><th>平日</th><td>15,800円</td><td>20,800円</td><td rowspan="2">58,000円<…</td></tr></table>