アイカカがWebデザイナーになるまでの記録

Webデザイナーになるための職業訓練に通ってます。将来はフリーランスになりたいどす。

今日のHTML・CSS復習

ホームページができたきっかけ?

ホームページは書類をネット上でも見れるようにしたらいいのでは?ということではじまった、できたものだそうです。

で、普通にメモ帳に打つだけじゃ、ブラウザーに表示したら横一列に表示されるだけなので、どこかの団体(W3Cとか?)が綺麗に表示できるようなタグ作ってやるよって言ったのがHTML・CSSのはじまりのよう。

名称の呼び方

p要素

要素、というものはpのことでいうと<p>と</p>をセットで要素と呼ぶ

開始タグ、終了タグ

<p>が開始タグ

</p>が終了タグ

代表的な要素

  • p 文章・段落
  • br 改行
  • img 画像
  • ul リスト点
  • ol リスト数字
  • li リストの中身?
  • h1〜h6 見出し

HTML5からこんなのがでました

atricle、section、asideも?

この中にくくることによって、h1h2h3h2h3のように表示できるようになった?

HTML5より前だったら、h1h2h3h2h3のように使うことはきなかったとか。

HTML5を使っていることを宣言しなくちゃいけないよ!

<!DOCTYPE html>

という文言をメモ帳の一番上にいれて書くことにより、HTML5をつかってるよと宣言することができる。

入力しなくても、HTML5になるらしいけど、入れた方が安全だとか。

<html lang="ja">

日本語で表示させるよってこと

<meta charset="UTF-8">

これをいれると、文字化けしませんよ?かな

index.htmlとしてメモ帳で保存する時は文字コード

UTF-8に選択して保存

フォルダの階層

f:id:ai_takakura:20180920184847j:plain

フォルダの階層図

書くとこんなかんじ

色について

f:id:ai_takakura:20180920184852j:plain

わたし、10年近くしてて、このRGBの概念しらなかった。わろた。

#赤緑青の要素?というかそんなのでなりたってるんだね。

だから、これだったら、赤の部分がffだからフルってことだよね、それでまっかってことだよね。

アルファベットが入る時はどうなってるのかわからない

CSSの設定方法は3種類あるよ

  1. <h1 style="">で直接指定
  2. <head><style>中身</style></head>で指定
  3. style.cssを外部データとして取り込んで設定

よく使うから重要なCSS

line-height:XXpx 行間・行の高さ

よく使われるのは15pxとか16pxと聞いたけど、仕組みをみるかぎり
フォントサイズが10だったとして、ラインの高さを14にしたら、14-10=4で、
4が文字の上下に追加される感じになる。

だから、デフォが15だったとしても、フォントサイズ変えたら変わるよね。
ね?

30pxの30px
30px30px

30pxの100px
30pxの100px

30pxの0px
30pxの0px

あんま表示かわんないなぁ。

text-align: 行揃え

ブロックレベルの要素に使えるらしい。

leftだよー

rightだよー

centerだよー

justifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよー

startだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよー

endだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよー

ジャスティファイがうまく表示されていない気はするが、よしとしよう。

font-family: フォントを指定する

フォントはフォントファミリー名でも指定できるし、総称ファミリー名でも指定できる

フォントファミリーの場合は"MS P明朝"のように指定して、総称はserifってそのままかいていい。

font-weight: フォントの太さ

  • normal 普通400
  • bold 太文字700
  • bolder 太くなる
  • lighter 細くなる
  • 数値 100〜900まで100区切り?フォントによってはなくて太くなったり細くなったりしない

font-size: フォントサイズ

いろいろある

color: 色を指定する

色はカラーコードでも、名称でも、rgbでも表せれる

rgbの時は rgb(255, 111, 000);みたいな感じ

background-color: 背景色

ボックスの内容、パディング、ボーダーに適応される

マージンは透明

初期値はtransparentこれたしか透明

今日はとりあえず

こんなもので。復習の仕方確立しなきゃなぁ。でも復習は改めて大事だと思った。

抜けてたものをとりかえせる。

授業中もなるべく言われたところをしっかり理解しようと思う。

あああああ頑張る泣