フォローしませんか？
シェア
ゴーストボタンHTML <a href="#" class="button button-goast">READ MORE</a> CSS.button-goast{border:1px solid #fff;bockground-color:rgba(255,255,255,0.15)} z-indexセレクタ{z-index:値;}/*値には-2147483647〜2147483647の間で大きいものほど手前に表示される*/
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:block;/*要素をブロック要素にする*/ HTML<a class="btn href="URL">ボタン</a> CSS.btn{ background-color: #ccc; /* 背景色 */ text-align: center; /* 文字を要素の中央に */ color: #000; /* 文字の色 */ width: 300px; /* 要
自分用の備忘録です。 参考文献：HTML5&CSS3コーディングとサイト制作の教科書 要素とは<p>contents</p> 属性とは<a href="https://www.google.com">Google Top</a><!--href:属性--><!--"https://〜 属性値"--> 文構造を表すのに利用される主なタグ１．header要素２．footer要素３．main要素４．nav要素５．aside要素６．section要素（見出しをつけられない場合
文字コード<meta charaset="UTF-8"> ページ概要の指定方法<meta name="description" content="ページの概要を表すテキスト情報"><!--Googleの検索結果に利用される。約３００文字前後--> IE最適化の書き方<meta http-equiv="X-UA-Compatible" content="IE=edge"> マルチデバイス対応の記載方法<meta name="viewport" content="width
画像を挿入する<img src="画像の場所・ファイル名" alt="画像の説明"><!--src src属性/参照--><!--"画像の場所・ファイル名" src属性の値--><!--alt alt属性/代替テキスト--><!--"画像の説明" 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"><!--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="名前"><!--セキュリティに配慮したpost/配慮しないget--> type属性に設定できる値type="text"<!--１行のテキストボックス
CSSの基本書式セレクタ(どこに){プロパティ(どんな装飾):値(どの程度);}p{color:#ff0000;} HTMLにCSSを組み込むインラインでCSSを適用<タグ style="プロパティ:値;"><h1 style="color:#ff0000">猫カフェ</h1> エンベッドの指定方法<!--head要素にstyleタグを使用--><head><style>セレクタ{プロパティ:値;}</style></head> リンクでCSSを指定<head><lin
文字サイズを調節するよく使う相対単位と絶対単位相対単位：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を指定
カラム＝段組み 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
