Island_in
HTML5&CSS3の備忘録
1.linuxのインストール 2.vscodeのdeb.をダウンロード https://code.visualstudio.com/download 3.ランチャーに追加
ゴーストボタン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; /* 要
br要素<br>要素は、文中に改行を指定する要素です。空要素なので終了タグは必要ありません。改行をして表示することが妥当な場合のみ使用しましょう。見た目の調整はCSSで行うようにしてください。 ©は特殊文字コピーライトの行頭に記述する©は特殊文字の一種です。どの環境でも共通して表示させるためには「＆copy;」と記述してください
<!--HTML--><head><title>お問い合わせフォームを作る</title></head><body><form action="program.php method="post"><dl> <dt>お問い合わせの種別</dt> <dd> <label><input type="chckbox" name="category" value="お問い合わせ”>お問い合わせ</label> <label><input type
セレクタの選択/*input要素にtype属性を指定することで様々な入力や選択用の項目を挿入できる*/input要素の個別の属性セレクタを指定する場合input[type="type属性"]{プロパティ:値;} フォーム全体のinputセレクタを指定する場合input{プロパティ:値;} 送信ボタンのを目立たせるp.submit{text-align:center;} 文字の太さを変更するセレクタ{font-weight:値;} font-weightプロパティの値数
表や各セルに枠線をつけるtable{border:線の太さ 線の種類 線の色;} 線の重なりを調節するtable{border-collapse:値;} border-collapseプロパティの値collapse：隣接するセルの線を重ねる /*border-collapse:collapse;で重ねるよう指定した線は相殺される*/ /*優先度はborder-topよりborder-bottom,border-leftよりもborder-right*separ
リストの先頭につく図形や数字の指定li{list-style-type:種類;} 代表的なlist-style-typeプロパティの種類none/*なし*/disc/*黒丸*/circle/*白丸*/square/*黒四角*/decimal/*数字*/cjk-ideographic/*漢数字*/decimal-leading-zero/*0から始まる数字*/lower-roman/*小文字のローマ数字*/upper-roman/*大文字のローマ数字*/lower-greek
カラム＝段組み 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
ブロックレベルとインラインブロックレベル・幅のサイズに関係なく上から連なっていく・widthやheightを指定できる・幅を指定しない場合、親要素(要素自身を囲う一段上の要素)のcontentと同じ幅になる・上下のmargin、paddingを指定できる・前後に改行が入る 主なブロックレベル<p>要素：段落<h1-6>要素：見出し<div>要素：要素の囲い<ul><ol>要素：リスト<li>要素：リストの項目 インライン・左から右へ横に並ぶ・widthやheightを指定
文字サイズを調節するよく使う相対単位と絶対単位相対単位：em 1em=1文字分の長さ ： % 親要素に対しての％絶対単位：px 1px=画面上の1ピクセル スマートフォン向けサイトの単位vw：幅指定vh：高さ指定***meta要素のviewportで最適化調整を併用100vw,100vhが１基本単位 文字サイズの指定セレクタ{font-size:数値と単位;} 行間の調整セレクタ{line-height:数値または数値と単位;} 書体の指定/*Google fo
CSSの基本書式セレクタ(どこに){プロパティ(どんな装飾):値(どの程度);}p{color:#ff0000;} HTMLにCSSを組み込むインラインでCSSを適用<タグ style="プロパティ:値;"><h1 style="color:#ff0000">猫カフェ</h1> エンベッドの指定方法<!--head要素にstyleタグを使用--><head><style>セレクタ{プロパティ:値;}</style></head> リンクでCSSを指定<head><lin
form要素の書き方<form action="プログラムの場所・ファイル名" method="送信方法">フォームの内容</form> フォームの入力形式を定義する「input」要素<form action="program.php" method="post"><input type="入力する形式属性値" name="名前"><!--セキュリティに配慮したpost/配慮しないget--> type属性に設定できる値type="text"<!--１行のテキストボックス
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>
順番の指定を必要としない箇条書き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
