初めてのLP制作依頼の作業をしている、ねこらのん（@nekoranon256）です。
HTMLとCSSのおさらいでまとめ。
混乱するので一旦初心に戻ります。
「これをやったら良い」という情報が多くて自己処理がまだできていないので1つづつ！
ProgateのHTML
Progateでやったことは以下のとおり。
- 全体構造
- head内に記載するもの
- body内に記載するもの
順番にまとめていきます。
全体構造
全体像は以下のとおり。
- <html>の中に<head>や<body>がいる
- <head>ページの設定に関する情報でページ内には表示されないもの
- <body>実際に表示したい内容
- <!DOCTYPE html>最新のHTML5のバージョンの宣言
head内
head内に記載するもの。
- <meta charset="utf-8">文字コード
※文字化け防止 - <title>ページタイトル
- <link rel="CSSファイル読み込み宣言" href="読み込むCSSファイル名">>CSSの読み込み
body内
body内に記載するもの。
- タグ
- <h1>のhはheadingの略
- <p>はparagraph段落の略
- <!---->コメント
- <a>リンク作成
- <a href="url">href属性でリンク先指定
※ダブルクオーテーションを忘れずに - <img src="url">src属性で画像表示
※終了タグは不要 - <ol>数字リスト、<ul>黒丸リスト
※インデントをつけることで親子関係をわかりやすくする - <div>はdivisionの略
- <span>文中の一部を変更したい場合使用
- ブロック要素：<div><p><h1>改行される
- インライン要素：<span><a>改行されない
- input要素：1行の入力用
<input type="submit" value="ボタンに表示されるテキスト">
※終了タグが不要 - textarea要素：複数行入力用
ProgateのCSS
CSSはHTMLに対し色、大きさ、配置などを指定し、ページをデザインするための言語。
- CSSについてセレクタ：どこの（h1の）、プロパティ：何を（色を）、値：どうする（赤にする）
- インデントいる
- コロンとセミコロンが必要
- /**/コメント
- font-sizeはpxで指定
- font-familyでフォントの種類を決める
- widthは横、heightは高さ
- 一部だけ指定したい場合はclassを使う。
※classを使う場合は『.』が必要でタグのみの場合は『.』は不要 - <li>にlist-noneでリストのマークを消す
- float: left;要素が左に横並びになる
- paddingで要素に余白
- float:right：要素が右に横並びになる（右端にいく）
- borderで太さ、種類、色
- marginは外側の余白
- 『,』で同じセクレタ指定可能
※h1,p{ これで2つ指定可能
おわりに
まとめていくだけじゃなくて手を動かした方が良いんだろうけど…頭が追いつかないので一度まとめ。
もりけん塾（@terrace_tech）
Thanks：もりけんさん