96's blog

WEBサイト制作科 6ヶ月コース

CSS01

絶対パス相対パス

  • 絶対パス webサーバーを経由してファイルを見つけにいく。
  • 相対パス 今あるフォルダからファイルを見つけにいく。
    • 下の階層へは名前を指示。例./img/01.jpg(./は今あるフォルダ。省略して「img/01.jpg」も可)
    • 上の階層へは名前は不要。例../01.jpg(1つ上の階層の01.jpg)
    • 「../../img/01.jpg」だと2コ上の階層のimgフォルダの01.jpgになる。
  • トップページをindex.htmlにするのはルール。
  • トップ以下の各カテゴリーごとにもトップと同じグローバルナビゲーションを持つindex.htmlを設定。

CSSの記述

  • Cascading Style Sheet
  • cascade=滝。親→子→孫へと指定していく様子を水の流れが分かれながら落ちていく滝に見立てている。
  • CSSの作業で多くの時間を割くのが、CSSを正しく表示できないが世界中で使われているInternet Explorerへの対策。
  • zen garden(webサイト)=1個のHTML文書をさまざまなパターンのCSSで表示できるサイト。
  • HTMLでは要素と呼ばれるものが、CSSではセレクタと呼ばれる。
  • 初心者は「:」と「;」に注意。
  • タブではなく半角スペースを使おう。
  • 「color」といったらフォントの色を指す。
  • 同じセレクタに対する命令が複数あるときは、より下に記述された方が実行される。margin、paddingの記述で注意。
  • コメントアウト=ブラウザ表示に影響させない形で作業上のメモなどを書き込むことができる。例 /*スラッシュとアスタリスクで囲む*/

要素・セレクタに名前をつける

  • id名
    • HTML→h1 id="○○○"
    • CSS →h1#○○○
  • class名
    • HTML→h1 class"○○○"
    • CSS →h1.○○○
  • キャメルケース(キャメルボックス)=名前に2つの単語を組み合わせて設定する時は、2つ目の単語の頭文字を大文字にするという慣例がある。例)"colorGreen"。統一し忘れると別物として扱われてしまう。

色 Web初心者の勉強法「ボックスモデル」

  • 16進数 ヘキサデシマル
  • RGBのBはblueviolet(青紫)
  • 各色の明度・彩度をそれぞれ16進数で表現した6ケタで色をしめす。
  • web上にあるカラーチャートを利用。

色と人の感覚

  • 補色関係の色同士はなじむ。(面積に注意)
  • 色と売れるものの関係は大きい。
  • 明度(brightness)は時間軸を表す。白に近づくと未来(新しさ)、黒に近づくと過去(古さ)をイメージさせる。人が1番印象に残るのが色同士の明度の違いによるコントラスト。
  • 彩度(saturation=血の気)は活気を表す。純色に近づくと活気があり、グレーに近づくと静かなイメージになる。

ボックスモデル

  • ボックス=要素が持っている表示領域。たとえば、文字自体のまわりに余白が確保されていて、その中で文字の位置を調整できる。
  • margin=ボックスの外側。他の要素が持っているボックスとの距離を指定できる。
  • border=ボックスの輪郭。
  • padding=ボックスの輪郭と実際の中身の間の余白。中身が体でボックスが服だとしたらpaddingは肩パッド!
  • paddingはマイナス値の指定はできない。marginはできる。
  • marginをautoに指定すると、左右のmarginを均等に配置して表示する。
  • marginの相殺=上にあるボックスが下側に指定するmarginと、下にあるボックスが上側に指定するmarginでは、値の大きい方が優先して表示される。記述のルールとして、上のボックスに下側のmarginを設定して、下のボックスには上側のmarginを設定しないようにする。また、左右に配置されたボックスのmarginは合計して表示される。
  • 文字にpaddingを設定したときに、左より上下の余白が大きく見えるが、文字自体にアセンダ(ウムラウトなど)とディセンダ(yの下の部分など)が含まれていており、見た目以上に1文字分の高さがあるため。