TEST よく使うやつ
12月
31日
■線を引く
実線、太さ1ピクセル、プラム色 → < hr style="border: 1px solid plum;" >
実線、太さ1ピクセル、プラム色 → < hr style="border: 1px solid plum;" >
■改行
< br >Breakの略
■フォントサイズを5にする
< p >< font size="5">フォントサイズ５の場合< /font >< /p >
フォントサイズ５の場合
■太文字にする
< b >bで太文字< /b >
で太文字
< strong > strongで太文字 < /strong >
strongで太文字
b＝見た目を太くすることだけが目的。
strong＝重要だと強調するタグ。ほかのところより重要とみなす。
SEO対策に有効だが、使いすぎると下げられる。
※bで書いてもstrongに変換されるサイトも。
■フォントサイズを7にして太文字にする。
< p>< strong>< font size="7">フォントサイズ７で太文字の場合< /font>< /strong></p >
フォントサイズ７で太文字の場合
「フォントｰ強調-サイズ」ーの順
■箇条書き・中黒
unordered list（順序がないリスト)
< ul >
< li>項目１< /li>
< li>項目２< /li>
< li>項目３< /li>
< /ul>
- 項目１
- 項目２
- 項目３
■箇条書き・番号
ordered list（順序のあるリスト）
< ol >
< li>項目１< /li>
< li>項目２< /li>
< li>項目３< /li>
< /ol>
- 項目１
- 項目２
- 項目３
■特殊記号のコード
「 < 」など、記号はhtml上ではコードの一部とみなされてしまう。
記号を書くときは文字表記をする。
;の前は十先にはスペースを詰める。
< ; "<"
> ; ">"
  ; " "（空白）
¥ ; "¥"
&bull ; "•"
&rarr ; "→"
■文字の配置（水平）
< p style="text-align: left" > 左寄せ< /p >
左寄せで書いた
< p style="text-align: center" >中央寄せ< /p >
中央寄せで書いた
< p style="text-align: right" > 右寄せ< /p >
右寄せで書いた
■アンダーラインを引く
< u >普通のライン< /u >
普通のライン
< span style="border-bottom: solid 5px red;" >太めの赤ライン</span >
太めの赤ライン
< u >普通のライン< /u >
普通のライン
< span style="border-bottom: solid 5px red;" >太めの赤ライン</span >
太めの赤ライン
■囲み文字
枠…点線、plum背景、白文字ffffff
< div style="padding: 10px; margin-bottom: 10px; border: 1px dotted plum; background-color: plum; color: #ffffff;"> タイトル </div >
枠…点線、plum背景、白文字ffffff
< div style="padding: 10px; margin-bottom: 10px; border: 1px dotted plum; background-color: plum; color: #ffffff;"> タイトル </div >
タイトル
■段落をつける
< br>…改行するタグ。段落をつけるのではない。
閲覧するデバイスによってガタガタになってしまう。
< p>…文章全体を段落で区切るタグ。
1段落目と２段落目は文字数が違う…自動的に改行がつく。
こんにちは。紫のバラの人です、なんていいながら今日もだらだらと過ごすのですが。今日はこんなできごとがありました。ああああああああああああああああああああああああああ猫が少なく。散歩をしても。
< P>こんにちは。紫のバラの人です< /P> < P>なんていいながら今日もだらだらと過ごすのですが。今日はこんなできごとがありましたあああああああああああああああああああああああああ< /p> < P>猫が少なく。散歩をしても< /P>
< br>…改行するタグ。段落をつけるのではない。
閲覧するデバイスによってガタガタになってしまう。
< p>…文章全体を段落で区切るタグ。
1段落目と２段落目は文字数が違う…自動的に改行がつく。
こんにちは。紫のバラの人です、なんていいながら今日もだらだらと過ごすのですが。今日はこんなできごとがありました。ああああああああああああああああああああああああああ猫が少なく。散歩をしても。
< P>こんにちは。紫のバラの人です< /P> < P>なんていいながら今日もだらだらと過ごすのですが。今日はこんなできごとがありましたあああああああああああああああああああああああああ< /p> < P>猫が少なく。散歩をしても< /P>
こんにちは。紫のバラの人です
なんていいながら今日もだらだらと過ごすのですが。今日はこんなできごとがありました。ああああああああああああああああああああああああああ
猫が少なく。散歩をしても
■囲み文字
枠線だ。線の太さ３。
< div style="border: 3px solid;">枠線だ。線の太さ３< /div>
枠線だ。線の太さ３
枠線だ。線の太さ３。背景plum色。
< div style="border: 3px solid; background-color:plum ;">枠線だ。太さ３。背景plum色。< /div>
枠線だ。太さ３。背景plum色
枠線だ。線の太さ３。背景plum色。枠線もplum色
< div style="border: 3px solid plum; background-color:plum ;">枠線だ。太さ３。背景plum色。< /div>
枠線だ。太さ３。背景plum色。
枠線だ。線の太さ３。背景plum色。枠線もplum色。文字の上下左右の余白を20p
< div style="border: 3px solid plum; background-color:plum; padding: 20px 20px 20px 20px;">枠線だ。太さ３。背景plum色。< /div>
枠線だ。太さ３。背景plum色。
枠線だ。線の太さ３。背景plum色。枠線もplum色。文字の上下左右の余白を20p。文字は白
< div style="border: 3px solid plum; color: #ffffff; background-color:plum; padding: 20px 20px 20px 20px;">枠線だ。太さ３。背景plum色。< /div>
枠線だ。太さ３。背景plum色。
background-color:plum ;
■画像を表示（GoogleDriveから）
Driveに画像をアップ。共有しリンクを取得。
< img src="https://drive.google.com/file/d/1aidFPM2PnJKjWr4wrqGN7KlkPaNlZHNC/view?usp=sharing" >
この、「d/のあと～/」までがID。これをコピー。
< IMG SRC="https://drive.google.com/uc?id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"/ >
この＝idのところにペースト。
Driveに画像をアップ。共有しリンクを取得。
< img src="https://drive.google.com/file/d/1aidFPM2PnJKjWr4wrqGN7KlkPaNlZHNC/view?usp=sharing" >
この、「d/のあと～/」までがID。これをコピー。
< IMG SRC="https://drive.google.com/uc?id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"/ >
この＝idのところにペースト。
■入力フォーム
■上下線
borderで上下だけに線を引く
borderで上下だけに線を引く
