久しぶりに更新。
しばらくプロゲートで道場に挑戦していた。現在レベル21で、まだまだここからである。
プロゲートで覚えたことを箇条書きで書く!
1.opacityとposotionプロパティでスケスケ追従ヘッダーを実現!
2.margin 0 auto で中央にバッチリな感じのコンテンツ!
3.大体のページを構成するコンテンツはdivタグでまとめてある。
4.大事なのはdivタグをどう包んで構成するか。
5.hoverでゆっくり色が変わるのはCSSのtransitionで!
6.line-heightを使うと綺麗に縦の中央に寄せられるぞ!
7.text-alignとmargin 0 autoや、opasityとrgbaのように似た効果だけど使い分けるべきものがある!
8.displayで要素を変更すると結構自由にもののポジションが動かせる。
9.要素やセレクタの組み合わせでかなりの自由度でHPは作れる。あとは技術知識とデザイン。
で、気付いたんだけど、とんでもない沼に足を踏み入れていたようだよ。
あけみ
タグ | 用途・効果 |
---|---|
<!DOCTYPE html> | webブラウザにHTMLで作られたファイルだと伝える |
<meta charset="〇〇"> | HTMLに使用されている文字コードの指定 head内に書き込む |
<html></html> | 「ここからここまでHTMLです」という指示 |
<head></haed> | HPの情報をまとめておく大事なところ |
<body></body> | 「HPの内容、本文はここ!」という指示 |
<title></title> | ブラウザに表示されるサイトのタイトル |
<style type="text/css"></style> | 「ここからここまでCSSです」という指示 別のファイルでCSSを作っている場合は使用しない |
<link rel="〇〇" href="〇〇"> | ページやファイルを関連付ける relがファイルとの関係性 hrefはそのファイルはコレです、という意味 |
<div></div> | 「このグループはこれを適用します!」という指示 |
タグ | 用途・効果 |
---|---|
<p></p> | 段落の指定 |
<br> | 改行の指示 |
<b></b> | 太字にするよ! |
<em></em> | CSSで指定した方法でフォントを強調 |
<h1></h1> | ページのタイトルクラスの大見出し |
<h2></h2> | 大見出し h6まで大きさ順にある |
タグ・属性 | 用途・効果 |
---|---|
<ul></ul> | 囲んだ範囲がリストであることを示す |
<li></li> | リスト内の項目 |
<ol></ol> | 番号のあるリストが作れる |
<a></a> | 囲んだ範囲にリンクを挿入 |
href="〇〇" | <a>や<div>内で使用する"属性" hrefで指定したファイルを開いたり適用したりする |
id="〇〇" | href同様、"属性" 本文内でidを振り分けた地点を繋いでリンクにしたりできる |
<img> | 画像の表示 |
src="〇〇" | "属性" 画像のファイルの指定 |
alt="〇〇" | "属性" 画像が表示されない場合に表示する文字 |
ワード | 意味・用法 |
---|---|
margin | 一番外側の余白 |
padding | 全体の最も内側の余白 背景と本文が接近し過ぎぬよう設定する |
border | マージンとパディングの間の余白 主に背景の領域 |
width | 幅 上記三点を指定する際に使う |
height | 高さ widthと同様の用法 |
position | ボックスの配置方法(基準位置)指定用プロパティ 相対位置か絶対位置か指定する 以下4項目はpositionプロパティの値 |
static | 特に配置方法を指定しない、初期値 top,bottom,left,rightは適用されない |
relative | 相対位置への配置 staticを指定した場合に表示される位置が基準位置 |
absolute | 絶対位置への配置 親ボックスにstatic以外が指定されていた場合は 親ボックス左上が基準位置となる 指定されていない場合ウィンドウ全体の左上が基準位置となる |
fixed | 絶対位置への配置はabsoluteと一緒 だがスクロールしても位置が固定されたままになる ここまでpositionプロパティの値 |
時間を見ながら随時追加……。