Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML/CSS 1カラムレイアウト勉強会資料

naa
May 10, 2019

HTML/CSS 1カラムレイアウト勉強会資料

ProntiatVRでのWEB班勉強会での資料

naa

May 10, 2019
Tweet

More Decks by naa

Other Decks in Programming

Transcript

  1. まずは下準備 • webフォルダを作る • 以下のファイルを新規作成し、webフォルダに 入れていく • web.html • main.css

    • imagesフォルダ(使う画像を入れるフォルダ) • background.jpgとtop.jpgをダウンロードして、 imagesフォルダに入れる webフォルダ web.html main.css imagesフォルダ background.jpg top.jpg
  2. 相対パス • パス:ファイルの場所を示すもの • 相対パス:基準となるファイルから見た,そ のファイルの場所 • 同じ階層→「./ファイル名」,もしくはそのま ま「ファイル」 •

    フォルダの一つ下の階層のファイル→「フォ ルダ名/ファイル名」 今回のtop.jpgでいうと,web.htmlを起点にすると同じ階層のimagesフォルダの 一つ下の階層にあるため, ”images/top.jpg”と記述する top.jpg 基準となるファイル 挿入したい画像
  3. headerの編集(1/4) • headerの色を設定し、高さを70pxにする • 「Web班 ~ProntiatVR~」の文字のサイズと 色を指定する • line-heightプロパティを使えば、文字の行 間を調節することができる。70px(header

    の高さ)と指定することで、文字の高さが ちょうど中央になる。 • 参考URL https://udemy.benesse.co.jp/development/web/line-height.html headerの高さ:70px (参考URLから引用)
  4. menuの編集(3/3) • list-style: noneで<li>タグの「・」を消 せる • margin: [上] [右] [下]

    [左] で指定できるのでいい感じにする • ついでに「Web班 ~ProntiatVR~」の文 字の左にもmarginを足しておく
  5. 重ねる! • 背景に配置するものはposition: relative; • 重ねて配置するものはposition: absolute; • を設定する •

    z-indexの値が大きいほど前面に配置される ので,top_imgを0,top_textを1に設定する • あとは,テキストを好きな位置に持っていく だけ!数値を変えていろいろ動かしてみよ う!