More than 5 years have passed since last update.

HTML・CSS

Last updated at 2019-12-13Posted at 2019-11-06

HTML

webサイトの基本

　　◆ドメインとは
　　　インターネット上の住所のこと
　　　①　ＵＲＬ　　　　http://www.abc.com/
　　　②メールアドレス　Qiita@abc.com
　　　ドメイン取得業者より取得する。取得したドメインはURLにもメールアドレスにも使える

　　◆ホームページが表示される仕組み
　　　①ページ製作者がHTMLを作成
　　　②HTMLデータをインターネット上のサーバーにアップロード
　　　③ページ閲覧者がブラウザでアクセス
　　　④ブラウザがページを整形して表示

　　◆HTMLファイル作成時のルール
　　　①拡張子は.htmlか.htm
　　　②１ページにつき、１ファイル
　　　③トップページのファイル名はindex.html

HTMLの基本

　　◆HTMLの役割
　　　●ページの内容(コンテンツ)の記述
　　　　・文字の記述
　　　　・画像の表示
　　　　・改行や段落の設定
　　　　・見出し(hタグ)の設定

　　◆ホームページの基本ルール
　　　●**<!DOCTYPE html＞**
　　　　HTML5で書いていくという意味。
　　　●＜html lang="ja"＞＜/html＞
　　　　HTML文書の宣言。　lang="ja"は、日本語で書いていくという意味。
　　　●＜head＞＜/head＞
　　　　実際のweb画面に表示されない領域。文章についての情報を定義したり、
　　　　外部のファイルを呼び出すために使用する要素。
　　　●＜title＞＜/title＞
　　　　検索結果や、タブの所に表示されるページのタイトルを記述する。
　　　●＜meta charset="UTF-8"＞
　　　　文字化けを防ぐための文字コードの指定。
　　　●＜body＞＜/body＞
　　　　実際のweb画面に表示される内容をこの中に記述する。
　　　

URLとドメインとフォルダ

　　◆URLについて
　　　●URLは「ドメイン + フォルダ名」で構成される
　　　　例えば、abc.co.jpというドメインを取得して、
　　　　サーバーに
　　　　　①index.html
　　　　　②companyというフォルダに入ったindex.html
　　　　　③serviceというフォルダに入ったindex.html
　　　　というファイルがあった場合のそれぞれのページのURLは
　　　　　①www.abc.co.jp
　　　　　②www.abc.co.jp/company/
　　　　　③www.abc.co.jp/service/
　　　　となる。

リンクの挿入

　　◆リンクの書き方
　　　●外部リンク(別のサイトへのリンク)
　　　＜a href="リンク先のURL(絶対パス)"＞アンカーテキスト(リンクが貼られている文字列)＜/a＞
　　　●内部リンク(同じサイト内の別ページへのリンク)
　　　　内部リンクの場合、リンクタグの中に、絶対パスを記載する方法と、
　　　　相対パスを記述する方法がある。
　　　　■相対パスの記述
　　　　　①同じ階層へのリンク
　　　　　　＜a href="./ファイル名"＞アンカーテキスト＜/a＞
　　　　　　または＜a href="ファイル名"＞アンカーテキスト＜/a＞
　　　　　②１階層下へのリンク
　　　　　　＜a href="./フォルダ名/ファイル名"＞アンカーテキスト＜/a＞
　　　　　　または＜a href="フォルダ名/ファイル名"＞アンカーテキスト＜/a＞
　　　　　③１階層上のファイルへのリンク
　　　　　　＜a href="../ファイル名"＞アンカーテキスト＜/a＞
　　　　　④１階層上のフォルダの中へのリンク
　　　　　　＜a href="../フォルダ名/ファイル名"＞アンカーテキスト＜/a＞

オブジェクトの埋め込み

　　　◆画像の埋め込み
　　　　＜img src="パス"＞

　　　◆画像以外のオブジェクトの埋め込み
　　　　＜object data="パス"＞オブジェクトタイトル＜/object＞
　　　　※objectタグでも画像の埋め込みは可能

テーブル

　　　　<table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th>左見出し</th><th>右見出し</th>
        </tr>
　　　　　<tr>
          <td>左上</td><td>右上</td>
        </tr>
        <tr>
          <td>左下</td><td>右下</td>
        </tr>
      </table>

左見出し	右見出し
左上	右上
左下	右下

　　　　●tr：列　　　　●td：行　　　　●th：見出し(太字で中央揃えになる) 　　　　●border：テーブルの外枠の太さ　　　　●cellpadding：文字や画像のの周りにどれだけのスペースを持たせるか　　　　●cellspacing：borderとcellpaddingの間にどれだけのスペースを持たせるか　　　◆背景色を指定　　　　table,tr,tdそれぞれに　　　　**bgcolor="カラーコード"** 　　　　で指定することができる。

フォーム

フォームの書き方

　　＜form method="post" action="送信先プログラムのURI()"＞　　//index.htmlファイルをphpファイルに引き渡す。
　　　　詳細な設定　　　　　　　　　　　　　※postメソッド(＝POST通信)という
　　＜/form＞

input type

　◆テキスト入力/text
　　　＜input typ ="text" name="POSTで引き渡す箱の名前(任意)"＞
　　　※テキストボックスが表示される
　　　◆テキスト入力のオプション
　　　　●入力枠の横幅を調整
　　　　　＜input type="text" name="POSTで引き渡す箱の名前(任意)" **size = "50"**＞
　　　　●入力欄に、消えるヒントを表示
　　　　　＜input type="text" name="POSTで引き渡す箱の名前(任意)" **placeholder = "ヒント"**＞
　　　　●入力欄に、消えないヒントを表示
　　　　　＜input type="text" name="POSTで引き渡す箱の名前(任意)" **value = "ヒント"**＞

　◆パスワード入力/password
　　　＜input type="password" name ="POSTで引き渡す箱の名前(任意)"＞

　◆ファイル選択/file
　　　＜input type="file" name="POSTで引き渡す箱の名前(任意)"＞

　◆ラジオボタン/radio
　　　＜input type="radio" name="POSTで引き渡す箱の名前(任意)" value="送信する値"＞ボタンの名称

　◆チェックボックス/checkbox
　　　＜input type="checkbox" name="POSTで引き渡す箱の名前(任意)" value="送信する値"＞ボックスの名称

　　　◆送信ボタン/submit
　　　＜input type="submit" value="ボタンの表示名"＞

label

　　　通常「チェックボックス」や「ラジオボタン」は○や□を正確にクリックする必要があるが、
　　　inputタグをlabelで囲むと、文字のクリックだけで選択できる様になる。
　　例)
　　　＜label＞＜input type="radio" name="choice-box" value="first"＞選択肢①＜/label＞
　　　＜label＞＜input type="radio" name="choice-box" value="second"＞選択肢②＜/label＞

テキストエリア/textarea

　　　縦に広い入力エリア
　　　＜textarea name="POSTで引き渡す箱の名前(任意)" rows="高さ/行数" cols="幅/文字数"＞＜/textarea＞

プルダウンメニュー/select

　　　プルダウンリスト
　　　＜select name="POSTで引き渡す箱の名前(任意)"＞
　　　＜option value="送信する値"＞選択肢①＜/option＞
　　　＜option value="送信する値"＞選択肢②＜/option＞
　　　＜option value="送信する値"＞選択肢③＜/option＞
　　　＜/select＞

フォームの書き方

    <form method="XXX" action="XXX">
        <!--文字入力　size:横幅　placeholder:入力のヒント　value:すでに入力してある文字-->
        <p>名前<input type="text" name="XXX"></p>
        <p>ニックネーム<input type="text" name="XXX" size="50"></p>
        <p>メールアドレス<input type="text" name="XXX" placeholder="xxx@xxx.com"></p>
        <p>ＵＲＬ<input type="text" name="XXX" value="http://"></p>
        <!--パスワード-->
        <p>パスワード<input type="password" name="XXX"></p>
        <!--ファイルアップロード-->
        <p>ファイル<input type="file" name="XXX"></p>
        <!--ラジオボタン(1つ選択してほしい時)-->
        <p>性別
           <label><input type="radio" name="XXX" value="XXX">男</label>
           <label><input type="radio" name="XXX" value="XXX">女</label>
        </p>
        <!--チェックボックス(複数選択できる時)-->
        <p>希望
           <label><input type="checkbox" name="XXX" value="XXX">正社員</label>
           <label><input type="checkbox" name="XXX" value="XXX">派遣</label>
           <label><input type="checkbox" name="XXX" value="XXX">アルバイト</label>
        </p>
        <!--ラジオボタン、チェックボックスは<label>で囲むと、文字をクリックでも反応するようになる-->
        <!--ボタン-->
        <p><input type="submit" value="送信"></p>
        <!--テキストボックス　rows:高さ　cols:幅/文字数-->
        <p>お問い合わせ
            <textarea name="XXX" rows="4" cols="40" placeholder="問い合わせ内容を入力"></textarea>
        </p>
        <!--プルダウンメニュー-->
        <p>お住まいの都道府県
          <select name="XXX">
            <option value="XXX">東京都</option>
            <option value="XXX">神奈川県</option>
            <option value="XXX">千葉県</option>
            <option value="XXX">埼玉県</option>
          </select>
        </p>
    </form>

インデント

　　　◆インデント
　　　　タグの前に余白を入力することをインデントという。
　　　　インデントを入れることにより、
　　　　　①タグの階層がわかりやすい
　　　　　②開始タグと終了タグがわかりやすい
　　　
　　　◆インデントの入れ方
　　　　①Tabキーを使う
　　　　②前の行末でEnterキーを使う　

CSS

CSSとは

　　　◆CSSの役割
　　　　●内容(コンテンツ)の表示位置やデザインを調整する
　　　　　・文字の大きさ、フォント、色の調整
　　　　　・コンテンツの表示位置の調整
　　　　　・改行や段落の隙間の間隔の調整
　　　　　・見出し(hタグ)のデザインの調整

　　　◆CSSの作り方
　　　　①HTMLに直接記述
　　　　②外部ファイルに記述←今回はこれを学習
　　　　③インラインStyleとして記述

　　　　●CSSのファイル
　　　　　index.htmlとは別に、style.cssというファイルを作る。
　　　　　index.ｈｔｍｌのheadタグの中に、
　　　　　＜link rel="stylesheet" type="text/css" href="style.css"＞
　　　　　と記述し、style.cssへのリンクを設定する。

CSSの基本

◆CSSの構成

　　　　①セレクタ　＜body＞　＜header＞等
　　　　　スタイルを適用するHTMLの対象を示すもの
　　　　②宣言ブロック
　　　　　｛　｝で囲まれた部分
　　　　③プロパティ　font-size　color等
　　　　　フォントサイズ、各スペースの幅、背景色などの指定
　　　　④値(value)　30px　blue等
　　　　　各プロパティの値を指定する部分
　　　　※プロパティと値は「：」で区切る
　　　　※値の後には必ず「；」をつける

◆セレクタの種類

　　　 ①タイプセレクタ
　　　　header｛　｝
　　　　　headerを指定
　　　　footer{　}
　　　　　footerを指定
　　　　body{　}
　　　　　ｂｏｄｙを指定
　　　　p{　}
　　　　　pタグを指定
　　　　br{　}
　　　　　brタグを指定
　　　　h1〜h6{　}
　　　　　h1〜h6タグを指定
　　　　table{　}
　　　　　tableタグを指定
　　　　ul{　}
　　　　　リストを指定
　　　　blockquote{　}
　　　　　引用文を指定
　　　　img{　}
　　　　　画像挿入を指定
　　　　form{　}
　　　　　formを指定

　　　②IDセレクタ
　　　　#〇〇〇{　}
　　　　　先頭にシャープをつけ、その後に任意の名前をつける。
　　　　　※同じid名は、１ページ中に1度しか使えない
　　　
　　　③クラスセレクタ
　　　　.〇〇〇{　}
　　　　　先頭にドットをつけ、その後に任意の名前をつける。
　　　　　※同じclass名でも、１ページ中に何度も使える

　　　それぞれのセレクタで指定したタグの中にあるコンテンツに、
　　　宣言ブロックの内容が適用される

プロパティ

●colorプロパティ

　　　　　セレクタ｛
　　　　　　　　　color: カラーコード;
　　　　　　　　　｝
　　　　　対象部分のテキストを変更できる。
　　　

●font-sizeプロパティ

　　　　　セレクタ｛
　　　　　　　　　font-size: 〇〇px;
　　　　　　　　　｝
　　　　　対象部分のフォントの大きさを変更できる。

●background-colorプロパティ

　　　　　セレクタ｛
　　　　　　　　　background-color: カラーコード;
　　　　　　　　　｝
　　　　　対象部分の背景色を変更できる。

●font-familyプロパティ

　　　　　セレクタ｛
　　　　　　　　　font-family: メイリオ, MSPゴシック;
　　　　　　　　　｝
　　　　　対象部分のフォントの種類を変更できる。
　　　　　※記述している順番から優先的に変更される

●text-alignプロパティ

　　　　　セレクタ｛
　　　　　　　　　text-align: center;
　　　　　　　　　｝
　　　　　テキストを左寄せ/left、中央寄せ/center、右寄せ/rightで表示できる。

●line-heightプロパティ

　　　　　セレクタ｛
　　　　　　　　　line-height: 100%;
　　　　　　　　　｝
　　　　　指定した文字分の行間を空けることができる。
　　　　　※1=1em=100%　　pxでの指定もできる。

●list-style-typeプロパティ

　　　　　セレクタ｛
　　　　　　　　　list-style-type: none;
　　　　　　　　　｝
　　　　　＜li＞＜/li＞の箇条書きの表示デザインを変更できる。
　　　　　※●/disc、○/circle、■/square、表示なし/none

継承

　　　継承とは、親要素の性質がその子要素にも引き継がれること
　　　＜ul＞
　　　　＜li＞リスト１＜/li＞
　　　　＜li＞リスト２＜/li＞
　　　　＜li＞リスト３＜/li＞
　　　＜/ul＞

　　　＜ul＞は＜li＞に対して親要素
　　　＜li＞は＜ul＞に対して子要素

　　　例えば、ul{
　　　　　　　　font-size： 20px;
　　　　　　　　color: gray;
　　　　　　　　}
　　　とした場合、子要素である＜li＞のリスト全てに
　　　プロパティが継承されているため、すべてのリストが
　　　20pxで、グレイになる。

　　　※すべてのプロパティが継承されるわけではない
　　　
　　　例えば、通常borderプロパティは子要素に継承されないが、
　　　　　　　ul{
　　　　　　　　border: 1px solid black;
　　　　　　　　}
　　　　　　　li{
　　　　　　　　border: inherit;
　　　　　　　　}
　　　のように、子要素である＜li＞にinheritを指定することにより
　　　強制的に値を継承することができる。

様々なセレクタの使い方

　　　①カンマ区切り
　　　　複数の要素にまとめて適用
　　　　例)　.a, .b{
　　　　　　　　　color: blue;
　　　　　　　　　}
　　　　　　aクラスとbクラスの両方にcolor:blueが適用される。

　　　②スペース区切り
　　　　〇〇タグの中の〇〇タグ(子、孫要素)にのみ適用
　　　　例)　.a　p{
　　　　　　　　　color: blue;
　　　　　　　　　}
　　　　　　aクラスとの中にあるpタグだけにcolor:blueが適用される。

　　　③連結
　　　　連結は、2つの要素が組み合わされた場合のみ適用
　　　　例)　h2.color1{
　　　　　　　　　　color: blue;
　　　　　　　　　　}
　　　　　　＜h2　class="color1"＞＜h2＞のように
　　　　　　h2タグのcolor1にのみcolor:blueが適用される。

　　　　例2)　.a.b{
　　　　　　　　　color: blue;
　　　　　　　　　}
　　　　　　＜div　class="a　b”＞＜/div＞のように
　　　　　　クラスａとクラスｂを組み合わせた場合のみcolor:blueが適用される。

ボックス要素

①border

　　　　対象(テキスト/画像)を囲んでいる線の太さ、線のスタイル、色の指定

　　　　●borderプロパティ
　　　　　セレクタ｛
　　　　　　　　　border: 1px solid blue;
　　　　　　　　　｝
　　　　　左から、線の太さ、線の種類、線の色を記述する。
　　　　　※点線/dotted、線/solid、2重線/double、破線/dashed

②margin

　　　　対象(テキスト/画像)の外側の余白の指定

　　　　●marginプロパティ
　　　　　セレクタ｛
　　　　　　　　　margin: 〇〇px/〇〇em;
　　　　　　　　　｝
　　　　　対象の外側(4方向全て)に記述した分のスペースを空けられる。

③padding

　　　　対象(テキスト/画像)の内側(borderの内側)の余白の指定

　　　　●paddingプロパティ
　　　　　セレクタ｛
　　　　　　　　　padding: 〇〇px/〇〇em;
　　　　　　　　　｝
　　　　　対象の内側(4方向全て)に記述した分のスペースを空けられる。

　　　※border、margin、paddingとも、
　　　　●そのままだと全方向
　　　　●border-top/上、border-right/右、border-bottom/下、border-left/左
　　　　のように指定できる。
　　　　

　　　◆ボックスを作る
　　　　　セレクタ｛
　　　　　　　　　width: 〇〇px;
height: 〇〇px;
background-color: カラーコード;
　　　　　　　　　｝
　　　　　width、height、background-colorを指定すると、boxを作成できる。

position

　　　CSSで各要素の場所(レイアウト)を細かく指定する方法
　　　①position:absolute;
　　　　ブラウザの左上からの絶対値を指定する
　　　②position:relative;
　　　　元々の位置からの相対値を指定する方法
　　　③position:fixed;
　　　　ブラウザの左上からの絶対値を固定で指定する
　　　
　　　※レイアウトの位置は
　　　　top:　〇〇px;
　　　　left:　〇〇px;
　　　　bottom:　〇〇px;
　　　　等を使って指定する

float

　　　◆各要素を横並び/回り込みにする方法
　　　　　セレクタ｛
　　　　　　　　　float: left/right;
　　　　　　　　　｝

　　　◆回り込みの解除
　　　　　セレクタ｛
　　　　　　　　　clear: left/right/both(leftとright両方の解除);
　　　　　　　　　｝
　　　

レイアウト

　　　＜body＞
　　　コンテンツはこの中に記述
　　　　　＜header＞
　　　　　ヘッダー部分を記述
　　　　　＜/header＞
　　　　　＜main＞
　　　　　メインコンテンツを記述
　　　　　＜/main＞
　　　　　＜footer＞
　　　　　フッター部分を記述
　　　　　＜/footer＞
　　　＜/body＞

ブロック要素とインライン要素

　　　①ブロック要素
　　　　＜h1＞、＜h2＞、＜div＞、＜form＞、＜table＞、＜p＞、＜ul＞、＜li＞など
　　　　●２つ以上続けて書くと、自動的に開業されて表示される
　　　　●marginは、上下左右ともに効く
　　　　●paddingは、上下左右ともに効く
　　　　●text-alignは、そのブロック要素で囲んだ中身のコンテンツに対して効かせることができる
　　　　●改行させるには、floatを使用する

　　　②インライン要素
　　　　＜span＞＜img＞、＜a href＞、＜strong＞など
　　　　●２つ以上続けて書くと、改行されずに横並びに表示される
　　　　●marginは、左右は効くが、上下は効かない
　　　　●paddingは、左右は効くが、上下は表示がおかしくなる
　　　　●text-alignは、＜div＞や＜p＞などで囲うことで、そのテキストや画像対して効かせることができる
　　　　●改行させるには、＜div＞、＜p＞、＜display:block＞、＜ul＞＜li＞を使用する

　　　◆displayプロパティ
　　　　ある要素をブロック要素に変更したり、インライン要素に変更したりする
　　　　①display:block;
　　　　　テキストや画像などのインライン要素をブロック要素に変更
　　　　②display:inline;
　　　　　＜div＞、＜p＞などのブロック要素をインライン要素に変更
　　　　③display:inline-block;
　　　　　ブロック要素をインライン要素で表示したい場合に使用
　　　　　インライン要素のように横並びができ、ブロック要素のようにmarginやpaddingで上下左右の感覚を自由に指定できる

中央寄せ

　　　①インライン要素を中央寄せする場合
　　　　その要素をブロック要素化して、**text-align: center;を指定
　　　②ブロック要素を中央寄せする場合
　　　　その要素にmargin: 0 auto;**を指定

inputタグでの画面遷移

任意のページに遷移する

  <input type="button" onClick="location.href='./index.html'" value="遷移するページのパス">

直前のページに戻る

  <input type="button" onClick="history.back()" value="遷移するページのパス">

ベンダープレフィックス

ブラウザのベンダーがcssの拡張機能を実装するのに使用する識別子

接頭辞	対応ブラウザ
-webkit-	Google Chrome, Safari
-moz-	Mozilla Firefox
-ms-	Microsoft Internet Explorer
-o-	Opera

例：border-radiusにベンダープレフィックスをつけて実装する場合

.sample {
-webkit-borde-radius: 20px;   /* Google Chrome、Safari用 */
-moz-border-radius: 20px;    /* Mozilla Firefox用 */
-ms-border-radius: 20px;    /* Microsoft IE用 */
-o-border-radius: 20px;    /* Opera用 */
border-radius: 20px;      /* 「勧告候補」以降の対応 */
}

【ブラウザの対応状況が見れるサイト　「Can I use」】
　　　https://caniuse.com/#home

linear-gradient

　　　線形グラデーションの指定
　　　【Mozilla軽ブラウザの場合】
　　　background: -moz-linear-gradient(グラデーションの角度や報告、　開始色、　途中色、　終了色);

　　　【webkit系ブラウザの場合】
　　　background: -webkit-gradient(ｌｉｎｅａｒ、　開始位置、　終了位置、　from(開始色)、　to(終了色);

box-shadow

　　　ボックスに影をつける
　　　box-shadow: 水平方向の影の距離、　垂直方向の影の距離、　ぼかし距離、　広がり距離、　色、　insetをつけると内向きの影になる　;

cursor

　　　カーソルの形状を指定

例)カーソルの形状を指定

   button: hover{
     cursor: pointer; /*ボタンの上にカーソルが来たときに、カーソルがリンクカーソルになる*/
   }

擬似クラス

　セレクタに付加するキーワードのこと例えば、:hover擬似クラスの例であれば、ユーザーのポインターがあたったときにボタンの色を変更できる

例)hover擬似クラスの例

   button: hover{
     color: blue;
   }

:first-child

　　兄弟要素のグループの中で最初の要素を表す。

:last-child

　　兄弟要素のグループの中で最後の要素を表す。

:nth-child

　　兄弟要素のグループの中での位置に基づいて選択する。

　　◆tr:nth-child(odd)またはtr:nth-child(2n+1)
　　　HTMLテーブルの奇数行を表す
　　◆tr:nth-child(even)またはtr:nth-child(2n)
　　　HTMLテーブルの偶数行を表す
　　◆**:nth-child(7)**
　　　７番目の要素
　　◆**:nth-child(5n)**
　　　5,10,15等
　　◆**:nth-child(3n+4)**
　　　4,7,10,13等

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

HTML・CSS

HTML

webサイトの基本

HTMLの基本

URLとドメインとフォルダ

リンクの挿入

オブジェクトの埋め込み

テーブル

フォーム

フォームの書き方

input type

label

テキストエリア/textarea

プルダウンメニュー/select

リスト

インデント

CSS

CSSとは

CSSの基本

◆CSSの構成

◆セレクタの種類

プロパティ

●colorプロパティ

●font-sizeプロパティ

●background-colorプロパティ

●font-familyプロパティ

●text-alignプロパティ

●line-heightプロパティ

●list-style-typeプロパティ

継承

様々なセレクタの使い方

ボックス要素

①border

②margin

③padding

position

float

レイアウト

ブロック要素とインライン要素

中央寄せ

inputタグでの画面遷移

ベンダープレフィックス

linear-gradient

box-shadow

cursor

擬似クラス

:first-child

:last-child

:nth-child

HTML・CSS