11. HTML/CSS入門

HTML/CSSとは

  • 文章の構造を定義するHTML
  • デザインを指定するCSS
  • 要素とタグ
  • 属性： 要素の中に付加的な情報を埋め込む役割を持つ
  • CSSの記述方法
    • h1 { color: red; }
    • セレクタ { プロパティ: 値; }

HTML基礎

  • HTMLの基本構造
    • DOCTYPE宣言
    • html要素 <html lang="ja">
    • head要素
    • meta要素 <meta charset="UTF-8">
    • title要素
    • body要素
  • ドキュメントツリー
  • HTMLの特殊文字
    HTMLの中に半角の「<」や「>」を記入すると、HTMLタグの一部だと認識されます。
    代わりに「&lt;」「&gt;」を使います。
    • 代表的な特殊文字
    ブラウザでの表示特殊文字の書き方名称・解説
    <&lt;小なり
    >&gt;大なり
    &&amp;アンパサンド
     &nbsp;空白
    ©&copy;著作権記号

  • h1-h6要素
  • p要素
  • img要素 <img src="logo.png">
  • a要素 <a href="http://xxxxxxxx.jp/" target="_blank">
  • ul要素
  • li 要素

CSS基礎

  • CSSの適用方法
  • link要素 <link rel="stylesheet" href="momotaro.css">
  • HTML/CSSのソース表示
  • CSSのプロパティ
    • color
    • background-color
    • font-size
    • text-align (text-align: center;)
    • border (border-bottom: solid 1px #000000;)

CSSボックス

  • ボックス
  • margin： 境界線の外側の余白を指定
  • padding： 境界線の内側の余白を指定
  • 表示領域(widthとheight)
  • marginとpaddingの初期値
  • margin と auto と width (margin: 0 auto;)
  • ブロックボックス(div要素)
  • インラインボックス(span要素、a要素)
  • div要素とspan要素

article要素とsection要素

  • article要素: サイト内で自己完結しており、それ自体で独立したコンテンツとして成り立つもの
  • section要素: 文章内の節を表す

CSSセレクタ

  • id属性とclass属性

HTMLフォーム

  • 入力・送信フォーム
  • form要素： action属性にデータ送信先を指定し、PHPで受け取る
  • input要素
  • select要素、option要素
  • label要素
  • placeholder属性： ユーザのデータ入力の助けとなるようなヒントを表示できる
  • maxlength属性： 最大入力文字数を指定する
input要素[type属性]
属性の値役割種類
text改行なしのテキストテキストボックス
emailメールアドレステキストボックス
passwordパスワードテキストボックス
radio複数の選択肢から1つを選択ラジオボタン
checkbox複数の選択肢から0個以上を選択チェックボタン
submit入力されたデータを送信するボタン

レイアウト

  • ページ構成
  • セクションの定義
    • header要素： 見出しや概略など、ページのヘッダーを表す
    • footer要素： 作成者やコピーライトなど、ページのフッターを表す
    • nav要素： 同じWebサイト内の別ページへのリンク(ナビゲーション)を表す
    • article要素： サイト内で自己完結しており、それ自体で独立したコンテンツとして成り立つもの
    • aside要素： ページ内容と関連しているが、あまり重要ではないもの(広告、補足記事など)を表す
  • floatプロパティ： 指定された要素を左または右に寄せて配置する

WebProgramming入門

ホーム
WebProgramming入門
11. HTML/CSS入門
ホーム
トップ
タイトルとURLをコピーしました