HTML&CSS

スマートフォン対応のコーディング

viewportの設定/*viewport=表示領域*//*縮小を行わせないようにするために、viewportのサイズとデバイス画面のサイズを同じにする*/ <head> <meta name="view port" content="width-device-width,initial-scale=1.0"> <title>シングルページレイアウト</title> <link rel="stylesheet" href="https://xxxx">

displayプロパティ

display:block;/*要素をブロック要素にする*/ HTML<a class="btn href="URL">ボタン</a> CSS.btn{ background-color: #ccc; /* 背景色 */ text-align: center; /* 文字を要素の中央に */ color: #000; /* 文字の色 */ width: 300px; /* 要

HTML基本

自分用の備忘録です。参考文献：HTML5&CSS3コーディングとサイト制作の教科書要素とは<p>contents</p> 属性とは<a href="https://www.google.com">Google Top</a> 文構造を表すのに利用される主なタグ１．header要素２．footer要素３．main要素４．nav要素５．aside要素６．section要素（見出しをつけられない場合

headの中に入る要素

文字コード<meta charaset="UTF-8"> ページ概要の指定方法<meta name="description" content="ページの概要を表すテキスト情報"> IE最適化の書き方<meta http-equiv="X-UA-Compatible" content="IE=edge"> マルチデバイス対応の記載方法<meta name="viewport" content="width

画像表示とリンクのマークアップ

画像を挿入する<img src="画像の場所・ファイル名" alt="画像の説明"> パスの記述例<img src="images/ring.jpg"> リンクの設定<a href="リンク先のパスやファイル名・URL" target="_blank">テキストや画像<a/><!--href

リストとナビゲーションのマークアップ

順番の指定を必要としない箇条書きul要素<ul><li>リストの項目１</li><li>リストの項目２</li><li>リストの項目３</li><li>リストの項目４</li></ul> 順序付きリスト<ol><li>リストの項目１</li><li>リストの項目２</li><li>リストの項目３</li><li>リストの項目４</li></ol> 定義リストを作る<dl><dt>見出し項目１</dt><dd>見出し項目１の内容</dd><dt>見出し項目２</dt><dd

表組みのマークアップ

table要素とtableの子要素<table border="1"><caption>表組みの見出し・説明文</caption><thead><tr><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th></tr></thead><body><tr><th>見出しセル</th><td>通常セル</td><td>通常セル</td></tr><tr>

フォームの基本

form要素の書き方<form action="プログラムの場所・ファイル名" method="送信方法">フォームの内容</form> フォームの入力形式を定義する「input」要素<form action="program.php" method="post"><input type="入力する形式属性値" name="名前"> type属性に設定できる値type="text"<!--１行のテキストボックス

CSSコーディングの基本

CSSの基本書式セレクタ(どこに){プロパティ(どんな装飾):値(どの程度);}p{color:#ff0000;} HTMLにCSSを組み込むインラインでCSSを適用<タグ style="プロパティ:値;"><h1 style="color:#ff0000">猫カフェ</h1> エンベッドの指定方法<head><style>セレクタ{プロパティ:値;}</style></head> リンクでCSSを指定<head><lin

CSS 見出し・段落のスタイリング

文字サイズを調節するよく使う相対単位と絶対単位相対単位：em 1em=1文字分の長さ　　　　： % 親要素に対しての％絶対単位：px 1px=画面上の1ピクセルスマートフォン向けサイトの単位vw：幅指定vh：高さ指定***meta要素のviewportで最適化調整を併用100vw,100vhが１基本単位文字サイズの指定セレクタ{font-size:数値と単位;} 行間の調整セレクタ{line-height:数値または数値と単位;} 書体の指定/*Google fo

ボックスモデル

ブロックレベルとインラインブロックレベル・幅のサイズに関係なく上から連なっていく・widthやheightを指定できる・幅を指定しない場合、親要素(要素自身を囲う一段上の要素)のcontentと同じ幅になる・上下のmargin、paddingを指定できる・前後に改行が入る主なブロックレベル<p>要素：段落<h1-6>要素：見出し<div>要素：要素の囲い<ul><ol>要素：リスト<li>要素：リストの項目インライン・左から右へ横に並ぶ・widthやheightを指定

CSSレイアウト

カラム＝段組み Flexboxでレイアウトする親要素のセレクタ{display:flex;} sample HTML<body><div class="box"><div class="item">子要素１</div><div class="item">子要素２</div><div class="item">子要素３</div><div class="item">子要素４</div></div></body> sample CSS.box{display:flexbox

リストとナビゲーションのスタイリング

リストの先頭につく図形や数字の指定li{list-style-type:種類;} 代表的なlist-style-typeプロパティの種類none/*なし*/disc/*黒丸*/circle/*白丸*/square/*黒四角*/decimal/*数字*/cjk-ideographic/*漢数字*/decimal-leading-zero/*0から始まる数字*/lower-roman/*小文字のローマ数字*/upper-roman/*大文字のローマ数字*/lower-greek

表のスタイリング

表や各セルに枠線をつけるtable{border:線の太さ線の種類線の色;} 線の重なりを調節するtable{border-collapse:値;} border-collapseプロパティの値collapse：隣接するセルの線を重ねる /*border-collapse:collapse;で重ねるよう指定した線は相殺される*/ /*優先度はborder-topよりborder-bottom,border-leftよりもborder-right*separ

フォローしませんか？

#HTML5