0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

HTML/CSSを始めよう!

Posted at

HTML

HTMLは全体を要素として前に開始タグをつける、後には終了タグを。
空要素:タグで囲うコンテンツがなく、その存在を開始タグだけで示す要素のこと(終了タグはない)
例)img要素・br要素・br要素・input要素・meta要素・link要素
属性を指定することもできる。
例)src・alt

  • 全体構造
    DOCTYPE宣言の中に
    html要素の中に
    head要素body要素を順に一つずつ配置する
    html要素:HTML文書のルート(DOMツリーの頂点)となる要素。すべての要素はこの要素の中に書く。グローバル属性であるlang属性を指定してその文書で使用されている言語の種類を示す。
    head要素:HTML文書のメタデータコンテンツをいれるための要素。この要素の中にtitle要素をいれる
    body要素:HTML文書のコンテンツを入れるための要素。
    title要素:それがHTML文書のタイトルまたは名前であることを示す要素。
    meta要素
    link要素
    div要素:他のほとんどの要素と異なり、その範囲が何であるのかを示さない要素。他に使用すべき適切な要素がない場合にのみ使用することが推奨される。class属性・lang属性・title属性などを指定することで用途を示す。
    span要素:div要素と同様にその範囲が何であるかを示さない要素。class属性・lang属性・title属性などを指定することで用途を示す。

  • セクション
    h1~h6要素:セクションの見出しとなる要素
    hgroup要素:見出しとサブタイトル、副題などをグループ化する
    article要素
    section要素:一般的なセクションを表す要素
    aside要素
    nav要素:そのページのおけるナビゲーションのリンクを含むセクション
    header要素:その部分のヘッダーであることを示す要素
    footer要素:自分自身を含むもっとも近いセクションのフッターであることを示す要素
    main要素:その部分がその文書における主要なコンテンツであることを示す要素
    adress要素:自分自身を含むもっとも近いarticle要素またはbody要素の内容に関する問い合わせ先を示す要素

  • テキスト
    p要素:一つの段落を表す(paragraph)
    a要素:href属性を指定すると、そのa要素の要素内容がリンクになります。
    em要素:強調されている部分を示すための要素
    strong要素:その要素の内容が重要、緊急性を示す要素。
    blockquote要素:引用してきた文章を示す要素
    br要素:改行させるための空要素

  • リスト
    ul要素:箇条書きのような項目を持つリストを表すための要素。この要素内にli要素としてマークアップする

  • グローバル属性
    すべての要素に共通して指定できる属性のこと。
    class属性:それを指定した要素が属する種類・分類を示すための属性
    id属性:それを指定した要素に固有の名前をつけるための属性。固有ですので同じページ内の他のid属性に同じ値を指定できない
    lang属性:要素内容と属性値の言語の種類を示す属性
    title属性:ブラウザではツールチップで表示される
    style属性:CSSの宣言

  • 問い合わせフォーム

CSS

セレクタ:CSS適用先
セレクタに続く{}の範囲全体を宣言ブロックと言い、その中のそれぞれの表示指定は宣言という。
宣言ブロックの中に宣言が複数ある場合は;で区切る。セレクタは,で区切ることで複数指定することが可能。
宣言の前半部分のキーのようなものがプロパティといい、値の部分をという。

link要素は関連する別の文書やファイルなどを示すための空要素。外部スタイルシートを読み込む際にも、このlink要素が使用される。
style要素は要素内容としてCSSを組み込むことができる。

TH TH
TD TD
TD TD
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?