Hello, World!

難しいことは書けません

初めてのHTML

==2019/5/22=========
以下の記事はものすごく雑で、いくつかプログラムに誤りもあるのでいつかもうちょっと丁寧に書き直したい


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