6:HTML&CSSの初歩を学んだ所で、実際に適当な目標物を作ってイクゥ!(ヘッダー作成)③
・今回はヘッダーに、「ロゴ」と「リスト」を作っていく。
→詰まり、ヘッダー内で2つの要素に分割(division)する。
【M(豆知識)】
<li>要素にlist-styleプロパティを用いてnoneを指定することで、先頭の黒点を消せる。
・floatプロパティを用いることで指定して要素を横並びに出来る。
→「float:left;」
・paddingプロパティを使うことで、要素に余白を入れる事が出来る
→「padding:値;」
※上下左右だけでなく、指定の方向に余白を入れたい場合は
「paddinng-top/-bottom/-left/-right 」の様にどれかを指定する。
また、下記の様にまとめて挿入することも可能
「padding:20px 10px 20px 10px;」上から順に時計回りに適用される。
値が「padding:20px 10px;」の様に値が2つだと、「上下」「左右」に適応される。
5:HTML&CSSの初歩を学んだ所で、実際に適当な目標物を作ってイクゥ!②
・レイアウトとは何ぞや?
→ヘッダー(ページ上部のメニュー)、メイン(主なコンテンツ)、フッター(ページ下部のメニュー)の3つから成り立っている。
・<div>要素でレイアウトを構成する。
※「div」とは「division」の略で、「分割」という意味(3要素に分けましょう!)
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
【M(豆知識)】
エディタには補完機能がある!
→「タグ名」+「Tabキー」によって補完してくれる
例)div → <div></div>
※余計なものまで補完される場合がある為注意。
4:HTML&CSSの初歩を学んだ所で、実際に適当な目標物を作ってイクゥ!①
・実際のHTMLファイルには下記の様な決まった型が必要!(決まった呪文みてぇな奴。C+にもそんなんあった希ガス!)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
・・・
</body>
<html>
こんな感じに、<html>要素の中に<head>要素と<body>要素が必要!
※<head>要素にはページに関する情報、<body>要素には実際に表示したい内容を書く。<head>要素については今後勉強していく!<body>要素は、これまでに学んだ内容ですな。
※先頭の<!DOCTYPE html>はHTMLのバージョンを宣言する為の物でDOCTYPE宣言という。必ず記述する物だと念頭に入れておく。
・<head>要素の中身について
①文字コードの指定・・・ページの文字化けを防ぐ事が出来る。
→HTMLのバージョンが「HTML5」の場合、<meta charset="utf-8">とする。
②ページのタイトル設定・・・<title>要素で指定されたタイトルが、ブラウザのタブ上に現れる
③CSSの読み込み・・・下記の様にhref属性で読み込むCSSファイルを指定する
<link rel="stylesheet"href="stylesheet.css"> 線引いた所が読み込むCSSのファイル名を記述する。
3:爵えもんはレベルが上がった(テッテレー♪)
・background-colorプロパティで背景色を変更出来る
→色の指定はcolorと同じ方法
・width/heightプロパティを使うことで要素の横幅/高さを指定できる
→font-sizeと同じようにpxで大きさを指定する
・要素にclassを使って名前をつける事が出来る
→<li class="selected">HTML</li> この様にHTMLにselectedというクラス名を付けて、CSSの方では .selected{ color:red; } の様にclass名で指定する。class名で指定する場合は先頭に「.(ドット)をつける
※複数の要素に同じクラス名をつけた場合CSSで、そのクラス名を指定すると、それら全てに同じCSSが適用される。
2:CSSとはなんぞや
・CSSはHTMLの要素に、「色」、「大きさ」、「配置」を付与してページをデザインするための言語のこと。大抵のWebページは、この二つと+α(動きを付けたりetc...)で構成されている。
・CSSはHTMLとは別のファイルに記述する
→HTMLで用意した要素に対して、「どこの」「何を」「どうする」かを指定できる。この時、対象の要素をセレクタ、変更項目をプロパティという
例)セレクタ名{
color:red;
font-siza:20px;
font-family:serif;
}
・colorプロパティは「color:#ff0000;」の様に16進数で表記する
※主要な色、赤とかはredなどのように指定できる
→プロパティの末尾には「:(コロン)」、行末には「;(セミコロン)」を忘れないように!
・CSSでは /* */ でコメントを記入することが出来る
・font-sizeプロパティを使うことで文字の大きさを変更出来る
→これは、px(ピクセル)という単位を用いて記述する
・font-familyプロパティを使うことで、フォントの種類を指定できる
例)h1{
font-family:serif;
}
p{
font-family:"Avenir next"
}
※フォント名にスペースが入る場合は、ダブルクォーテーションで囲む。
1:HTMLのついでにMacのショートカットも勉強
テキストには「タグ」と呼ばれる印を付けることで見た目を自由に変える事ができる。
・<h1> テキスト </h1> で文字のサイズを変更できる!
※1〜6まであり、1の方が字が大きい!。「h」‥‥「heading(見出し)」。
【M(豆知識)】※Mac
「Command」+「左/右矢印」で行の先頭/末尾に移動出来る!
・<p> テキスト </p>で段落を変更出来る!
→<h1>や<p>で囲まれたテキストは改行される!
※「p」‥‥「paragraph(段落)」
・<!--> テキスト <-->でテキストを挿入出来る!
→テキストはブラウザに表示されずメモとして使える。プログラミング業界では「明日の自分は他人」という言葉があり、忘れることを念頭に、コメント挿入の癖を付ける。
・<a> テキスト </a>でテキスト名のリンクを作れる(つまりクリック出来る)
→しかし、これだけではただクリックできるだけ。そこで下記のように href属性を付与する!
<a href="url"> テキスト </a>‥‥urlの部分にリンク先のURLを付けることでそのページに飛べるようになる。
※「a」と「href」の間にスペース! URLは「"」で囲むことを忘れないように気をつける!
・<img>で画像を表示できる!
→こいつは下記のように src属性をつける必要がある
<img src="url">‥‥urlの部分に貼り付けたい写真のリンクを付けることで画像を付けれる
※<img>要素はテキストを囲む事がないので終了タグが要らない!
・<li>要素(子要素)と<ul>や<ol>要素(親要素)で下記ようなリストを作れる
※ulで黒点、olで数字(連番)を付与出来る
・banana
→親子関係を分かりやすくする為、「Tab」キーでインデント(字下げ)して記載する