見出しの要素
h1~h6要素。h1が一番大きい。改行される。
段落
ｐ要素。
paragraph（段落）の略。改行される。
コメント
＜!ｰｰ ｰｰ＞で囲んだテキストのこと。
コメントに書かれた要素はブラウザに表示されないため、メモとして使用できる。
CSSの場合は、/* */で囲む。
リンク
a要素。
リンクのとび先を指定するには、href属性を追加する。
<a href=”url“>
urlの部分にリンク先のURLを指定する。
画像を表示する
img要素。
テキストを囲わないので、終了タグはない。
リスト
li要素。
箇条書きにしたいテキストをそれぞれ＜li＞で囲む。
liを囲む要素によって種類が変わる！
- <ul>要素で囲むと、黒点が先頭につく
- <ol>要素で囲むと、数字が連番でつく
リストのマークをなくすには、CSSでlist-styleプロパティでnoneを指定すると、リストの先頭のマークが消える。
CSS：文字の大きさ・色など
- 文字の大きさ：font-size:35px;
- 文字の色：color:色コード;
- フォントの変更：font-family:フォント名;【フォント名にスペースがある場合は””で囲む】
- 背景色：background-color:色コード;
- 高さ：height:35px;
- 幅：width:35px;
heightやwidthは、pxではなく単位を％にすると、相対的な大きさを指定できる。
HTMLの全体構造
<html>要素の中に<head>要素と<body>要素が必要。
<head>要素にはページに関する情報を書く。Webページには表示されない。
<head>要素の中では、①文字コードの指定(文字化けを防ぐため)、②ページのタイトルの設定(ブラウザのタブに表示される)、③CSSの読み込みなどを行う。
HTMLからCSSを読み込むためには、<link rel=”stylesheet”>を用いる。←読み込む宣言。
<link rel=”stylesheet” href=”stylesheet.css”>のように、href属性で読み込むCSSファイルを指定する。
body>要素には実際に表示したい内容を書く。
＜div＞要素
レイアウトを構成する。「div」は「division」の略。
要素をグループ化するために使用する。
ヘッダーの中身を横並びにする
CSSで、floatプロパティを用いる。
- float:left;：左から順に横並びになる
- float:right;：右から順に横並びになる
要素を左右に配置したいときにも使用する。
余白
枠線の内側の余白：paddingを用いる。
枠線の外側の余白：marginを用いる。
ブロック要素とインライン要素
ブロック要素：改行される(h1、div、pなど)
インライン要素：改行されない(a、spanなど)
要素に枠線をつける
CSSで、borderプロパティを用いる。
枠線の太さ、種類、色を指定する。
特定の場所に着けたい場合は「border-方向」とする。
入力欄
・一行のテキスト入力を受け取る：＜input＞(終了タグは不要)
・複数行のテキスト入力を受け取る：＜textarea＞＜/textarea＞
送信ボタン
＜input＞要素を使用する。
＜input type=”submit”＞
- type属性を指定することができ、type属性にsubmitを指定すると、送信ボタンになる
- 日本語ブラウザでは、デフォルトで「送信」になる。
＜input type=”submit” value=”保存”＞
value属性に任意の値を指定することで、ボタンに表示されるテキストを変更できる！
背景画像を指定する
CSSで背景画像を指定するにはbackground-imageプロパティを用いる。
使い方：background-image: url(画像のURL);
↑この場合、表示範囲を埋め尽くすまで、画像が繰り返されることがある。
１枚の画像で表示範囲を埋め尽くすには：上記にプラスしてbackground-size: cover;を指定する
要素を中央寄せにする
margin:0 auto;のように、marginの左右にautoを指定する。
要素を透過させる
CSSで、opacityプロパティを用いる。これは要素の中身すべてを透過させる。
透明度は0.0(完全に透明) ~ 1.0(完全に不透明)の数値で指定する。
背景色のみを透明にするには、rgbaプロパティを用いる。
rgbaは4つの値をコンマ（,）区切りで入れます。4つ目の値が透明にする度合いで、0 ~ 1の数値で指定します（値が小さいほど透明になります）。(例：background-color:rgba(84,190,10,0.5))
文字の間隔を指定する
letter-spacingプロパティを用いる。(例：letter-spacing:2px;)
ボタンの作り方
ボタンは<a>タグで指定する。
<a>タグは初期状態でインライン要素になっているが、displayプロパティを使うと、インラインブロック要素に変更できる。
displayプロパティは以下を指定できる！
- block（ブロック要素）
- inline-block（インラインブロック要素）
- inline（インライン要素）
ボタンにカーソルが乗った時の変化を指定する
CSSで、セレクタ:hoverとすることで指定できる。
例：div:hover{background-color:red;}
アニメーションをつける
transitionを使う。
「変化の対象」や、「変化にかかる時間」などを指定できる。
多くの場合、hoverと組み合わせて使用する。
例
- div{transition:all 1s}
- div:hover{background-color:red;}
ボタンの角を丸める
border-radiusプロパティを用いる。
数字が大きいほど角が丸くなります。(単位はpx)
左寄せ・中央寄せ・右寄せ
text-alignプロパティを用いる。
テキスト、インライン要素、インラインブロック要素の配置を指定できる。
leftで左寄せ、centerで中央揃え、rightで右寄せ。
中央寄せ補足
- 広い範囲を囲うようなブロック要素の場合：margin:0 auto;を用いる
- テキストやボタンのようなインライン要素・インラインブロック要素の場合：text-align:center;を用いる
コメント