初めての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)