初めてのHTML
==2019/5/22========= 以下の記事はものすごく雑で、いくつかプログラムに誤りもあるのでいつかもうちょっと丁寧に書き直したい
web制作でのメモ(ものすごい基礎)
HTMLとは
HTMLは、ページの要素や構造を指定するための言語
ホームページでいう文字みたいな
CSSとは
CSSはHTMLで作った要素を装飾するスタイルを指定する言語
ホームページのデザインは基本的にCSSでかける
HTMLにデザイン書き込んでもいいけど、文字とデザイン別々でやった方が整理しやすい
とりあえず先輩に教えてもらったHPを作ってみる
見た目はこんな感じ
大きさはこれくらい
まずはじめに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 , CSSのMIMEタイプを指定
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になる
次に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 }
幾つか幅や高さの値も変えつつ、こんな感じ
次にsideとmainの内容とかいろいろ付け加えてみよう
今更ながらhtmlのところにフォントとかの設定してるからcssにまとめると(雑)