学び12mg ヘッダー

HTMLとCSSの勉強記録

最新の記録 4月8日「プロゲート学びメモ」

久しぶりに更新。

しばらくプロゲートで道場に挑戦していた。現在レベル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は作れる。あとは技術知識とデザイン。

で、気付いたんだけど、とんでもない沼に足を踏み入れていたようだよ。

あけみ

Study Dialy TOPへ




月別アーカイブ

2019年04月

2019年03月

2019年02月

2019年01月


自分用の索引

基本の基本編

タグ用途・効果
<!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まで大きさ順にある


bodyを彩ったりカスタマイズするタグと属性

タグ・属性用途・効果
<ul></ul>囲んだ範囲がリストであることを示す
<li></li>リスト内の項目
<ol></ol>番号のあるリストが作れる
<a></a>囲んだ範囲にリンクを挿入
href="〇〇"<a>や<div>内で使用する"属性"
hrefで指定したファイルを開いたり適用したりする
id="〇〇"href同様、"属性"
本文内でidを振り分けた地点を繋いでリンクにしたりできる
<img>画像の表示
src="〇〇""属性" 画像のファイルの指定
alt="〇〇""属性" 画像が表示されない場合に表示する文字


CSSで使われる用語 基本編

ワード意味・用法
margin一番外側の余白
padding全体の最も内側の余白
背景と本文が接近し過ぎぬよう設定する
borderマージンとパディングの間の余白
主に背景の領域
width
上記三点を指定する際に使う
height高さ
widthと同様の用法
positionボックスの配置方法(基準位置)指定用プロパティ
相対位置か絶対位置か指定する
以下4項目はpositionプロパティの値
static特に配置方法を指定しない、初期値
top,bottom,left,rightは適用されない
relative相対位置への配置
staticを指定した場合に表示される位置が基準位置
absolute絶対位置への配置
親ボックスにstatic以外が指定されていた場合は
親ボックス左上が基準位置となる
指定されていない場合ウィンドウ全体の左上が基準位置となる
fixed絶対位置への配置はabsoluteと一緒
だがスクロールしても位置が固定されたままになる
ここまでpositionプロパティの値

時間を見ながら随時追加……。

コンテンツ
学び12mg
inserted by FC2 system