Hello World

日頃のメモ

初めてのHTML

web制作でのメモ(ものすごい基礎)

HTMLとは

HTMLは、ページの要素や構造を指定するための言語
ホームページでいう文字みたいな

CSSとは

CSSはHTMLで作った要素を装飾するスタイルを指定する言語
ホームページのデザインは基本的にCSSでかける

HTMLにデザイン書き込んでもいいけど、文字とデザイン別々でやった方が整理しやすい

とりあえず先輩に教えてもらったHPを作ってみる
見た目はこんな感じ
f:id:eeko-amaryllis:20160829144337j:plain:w250 f:id:eeko-amaryllis:20160829144344j:plain:w300
大きさはこれくらい
f:id:eeko-amaryllis:20160829144327j:plain:w250

まずはじめにhtmlの骨組み

<!DOCTYPE html>
<html lang="ja"> 
  <head>
    <meta charset="utf8">
    <meta name="description" content="sample">
    <link rel="stylesheet" type="text/css" href="sample.css"> 
    <title>sample html</title>
  </head> 
  <body>
  </body>
</html>
html lang="ja"

<html>~</html>の直下には<head>と <body>がそれぞれ一つづつ必要でlang属性で言語を指定することができ、日本語ならja、英語ならen
<head>~</head>の間には、文書のタイトル等のヘッダ情報を記述
<body>~<body>には、実際にブラウザに表示される文書の本体を記述

link rel="stylesheet" type="text/css" href="sample.css"

rel="" stylesheet
type="" text/css , CSSMIMEタイプを指定
href="" URI , 読み込むスタイルシートファイルを指定

ここでheader,side,main,footerをbodyの中にかいていく

sample.html
<!DOCTYPE html>
<html lang="ja"> 
  <head>
    <meta charset="utf8">
    <meta name="description" content="sample">
    <link rel="stylesheet" type="text/css" href="ss.css"> 
    <title>sample html</title>
  </head> 
  <body>
    <div class="wrap">
      <div class="header">
        <font size="5" color="#ffffff">heder</font>
      </div>
      <div class="side">
        <font size="5" color="#ffffff">side</font>
      </div>
      <div class="main">
        <font size="5" color="#ffffff">main</font>
      </div>
      <div class="footter">
        <font size="5" color="#ffffff">footter</font>
      </div>
    </div>
  </body>
</html>

同じくcss

sample.css
.wrap{
  width: 960px; /*横幅定義*/
  margin: 0 auto; /*カラムを中央に寄せる*/
}

.header {
  height: 200px;
  width: 960px;
  background-color:#ff0000
}

.side {
  height: 300px;
  width: 320px;
  float: left;
  background-color:#00ff00
}

.main {
  height: 400px;
  width: 640px;
  float: left;
  background-color:#0000ff
}

.footter {
  height: 200px;
  width: 960px;
  clear: both;
  background-color:#000000
}

float: left;でsideとmainを横並びにすることができる、この時clear: both;も忘れずに
.wrapで幅を定義することでカラム落ちを防ぐことができる

こんな感じのHPになる
f:id:eeko-amaryllis:20160901161945p:plain


次にheaderのところにタイトルが来るので文字の中央寄せ下にずらし、heder,side,main,footterの区別をするべく空白と線を引いていく

sample.css
.wrap{
  width: 960px;
  margin: 0 auto;
}

.header {
  height: 70px;
  width: 960px;
  text-align: center; /*文字を中央に移動する*/
  margin-bottom: 50px; /*空白*/
  border-bottom: solid 10px #dddddd; /*hederの下に線*/
  background-color:#ff0000
}

.side {
  height: 300px;
  width: 320px;
  float: left;
  margin: 0px 0px 0px 30px;
  background-color:#00ff00
}

.main {
  height: 400px;
  width: 540px;
  float: left;
  margin: 0px 30px 30px 0px;
  border-left: solid 10px #dddddd; /*左側に縦線*/
  background-color:#0000ff
  }

.footter {
  height: 200px;
  width: 960px;
  clear: both;
  border-top: solid 10px #dddddd; /*上のに線*/
  background-color:#000000
  }

幾つか幅や高さの値も変えつつ、こんな感じ
f:id:eeko-amaryllis:20160901193747p:plain


次にsideとmainの内容とかいろいろ付け加えてみよう
今更ながらhtmlのところにフォントとかの設定してるからcssにまとめると(雑)
f:id:eeko-amaryllis:20160901232542p:plain