2022年11月18日
【HTML】HTML覚えておくと便利なソースコード
ファンブログのデフォルトの文字の大きさが小さい・・と思っている方必見！
少しだけカスタマイズするだけで、デフォルトの文字の大きさを変えることができます。
また、ファンブログではカスタマイズによるサポートは対象外となりますので、ご了承ください
https://fanblogs.jp/support/archive/36/0
色の名前とカラーコードが一目でわかるWEB色見本
https://www.colordic.org/
エクセルにhtmlのソースコードをテキストで貼り付ける方法！
https://laplace-man.com/excel-html-paste/
ブログの記事内にソースコードを表示させる３つの方法
https://takumisenka.com/blogunei/blognicod
アングル ブラケット
< ⇒< > ⇒> & ⇒&
HTMLタグ・読み方一覧
http://yume.hacca.jp/koiki/tagulist.htm
HTMLタグの読み方と使い方を初心者にもわかりやすく解説
https://web-camp.io/magazine/archives/89677
１.新しいタブでリンク先を開く
<a href="#任意">表示名</a>クリック側
<h2 id="任意">行先名</h2>行先
任意は同名にする
<A HREF="https:○○"target="_blank">表示文字○○</A>
2.アコーディオン
<div><details> <summary>試合結果をクリックで見る/クリックで閉じる</summary>
<i>内容<i>
</details></div>
3.非表示にする
<!-- ここへ文字 -->で囲まれた部分がコメントです。
<!-- -->
4.文字の色を変える
<font color="red">赤</font>非推奨
<span style="color:brown">茶色</span>
5.文字の大きさを変える
https://hmaster.net/text.html
テキスト、フォントタグは文字の大きさを変えたい時などに使います。
<font size="数字">〜</font>で文字の大きさを変えることが できます。 フォントサイズは1〜7まで指定できます。
デフォルトはフォントサイズを3に指定した時の大きさになります。
【ブラウザ表示】
フォントサイズ1〜7
ソース
<font size="1">フォントサイズ1</font>
<font size="2">フォントサイズ2</font>
<font size="3">フォントサイズ3</font>
<font size="4">フォントサイズ4</font>
<font size="5">フォントサイズ5</font>
<font size="6">フォントサイズ6</font>
<font size="7">フォントサイズ7</font>
■ bigタグでのサイズ変更
<big>〜</big>で文字を大きくする事ができます。 フォントサイズが1増えます。 <big><big>〜</big></big>のように bigタグで囲まれた文字をさらにbigタグで囲むとフォントサイズが2増えます。
【ブラウザ表示】
フォントサイズ3
フォントサイズ4と同じ大きさの文字
フォントサイズ5と同じ大きさの文字
ソース
フォントサイズ3
<big>フォントサイズ4と同じ大きさの文字</big>
<big><big>フォントサイズ5と同じ大きさの文字</big></big>
■ smallタグでのサイズ変更
<small>〜</small>で文字を小さくする事ができます。 bigタグとは逆にフォントサイズが1減ります。 <small><small>〜</small></small>のように smallタグで囲まれた文字をさらにsmallタグで囲むとフォントサイズが2減ります。
【ブラウザ表示】
フォントサイズ3
フォントサイズ2と同じ小さ目の文字
フォントサイズ1と同じ小さ目の文字
ソース
フォントサイズ3
<small>フォントサイズ2と同じ小さ目の文字</small>
<small><small>フォントサイズ1と同じ小さ目の文字</small></small>
6.スペースを入れる
htmlにスペースを入れられる特殊文字とは
【 】：半角スペースと同じサイズの空白
【 】： の空白より小さい空白
【 】：半角スペースより間隔がやや広い空白
【 】：全角スペースとほぼ同じサイズの空白
【HTML table】表を作成する基本からレイアウトの方法までを解説
https://www.sejuku.net/blog/49377
表全体の幅を変える
表全体の幅を変えるので、table要素にwidth属性で幅の大きさを指定しましょう。
ピクセルで指定する場合のサンプルコード
<!DOCTYPE html>
<html>
<head>
<title>表全体の幅をピクセルで指定する</title>
</head>
<body>
<table border="1" width="200">
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>田中</td>
<td>27</td>
</tr>
<tr>
<td>佐藤</td>
<td>42</td>
</tr>
</table>
</body>
</html>
table の枠線を１本の細い線にする方法
https://bit.ly/3VOabIL
まず最初はHTMLだけで指定する方法。
<table border="1" cellspacing="0" cellpadding="0">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
セル１ セル２
セル３ セル４
次はCSSを併用する方法。
<table border="1" style="border: 1px solid black; border-collapse: collapse;">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
tableはデフォルトでborder-spacingが設定されており、そのままの状態でborderを追加すると2重枠で表示されます。これを解除にはtableにborder-collapse:collapse;を設定します。
<table class="border">
<tr>
<th>th</th>
<td>td</td>
</tr>
</table>
線なし
table class="noborder">
<tr>
<th>th</th>
<td>td</td>
</tr>
</table>
画像にリンクを付けるHTMLコード
https://blog.codecamp.jp/programming-html-pic-link
それでは実際のHTMLコードを見ていきましょう！
特定のページに飛ぶ画像ボタンのHTMLコード
image
<a href="sample2.html"><img src="next.png" alt="次へ"></a>
<a href="〜">・・・</a> のaタグで囲まれた部分が、リンクとなります。aタグで画像表示タグである <img src="〜"> を囲むことで画像ボタンがリンクになります。この場合は、画像のリンクで別のページに移動できるようにしています。
クリックで画像を拡大表示させるHTMLコード
image
<a href="harinezumi.jpg"><img src="harinezumijpg" alt="ハリネズミ秋のお散歩" width="120" height="100"></a>
リンク先を画像ファイルとすることで、クリックした画像が拡大表示(実寸表示)されるHTMLコードです。
JavaScriptを使うと、もっと自由に画像をページ内で操作できます。単純な拡大(実寸)表示だけでは物足りない方は、挑戦してみましょう。
弊社参考記事： CodeCampus jQueryを使いこなそう！便利すぎるプラグイン15選！
別タブで開きたいときのHTMLコード
image
先ほど紹介したHTMLコードでは、ブラウザの同じタブで別ページや画像が開いてしまいます。閲覧者が「戻る」を頻繁に押さないといけない、もとのページに戻るのが面倒、などの問題が発生する場合は、別のタブで開く HTMLコードを書き加えましょう。
<a href="harinezumi.jpg" target="_blank" > <img src="harinezumi.jpg" alt="ハリネズミ秋のお散歩" width="120" height="100"> </a>
リンクのタグであるaタグに target="_blank"を書き加えることで、別のタブでリンクが開きます。
枠をつける - HTMLのお勉強
https://bit.ly/3UQascW
HTMLのみ＊コピペで簡単♪かわいい囲み枠デザイン
https://www.moca-memo.com/2019/10/kakomiwaku.html
HTMLで水平線を引く方法
https://web-camp.io/magazine/archives/83127
サンプルコード
水平線の太さを10pxにする
<hr size="10">
水平線の横幅を300pxにする
<hr width="300px">
水平線の位置を右に変更する
<hr align="right" width="300">
水平線の色を変更する
<hr color="red">
水平線の影を非表示にする
<hr noshade>
１．hrのみ
<hr>
２．size="5"
<hr size="5">
３．width="100"
<hr width="100">
４．width="200"
<hr width="200">
５．width="50%"
<hr width="50%">
１．width="30%" align="left"
<hr width="30%" align="left">
２．width="30%" align="center"
<hr width="30%" align="center">
３．width="30%" align="right"
<hr width="30%" align="right">
４．color="blue"
<hr color="blue">
５．noshade
<hr noshade>
６．size="10" width="50%" color="green"
<hr size="10" width="100%" color="green">
HTMLのみ＊コピペで簡単♪かわいい囲み枠デザイン
https://www.moca-memo.com/2019/10/kakomiwaku.html
A8/
トップページ記事を固定し、日付表示をなしにする方法
https://fanblogs.jp/customizeblog/archive/8/0
1.トップページ固定
2.画像クリックで拡大
3.日付表示を消す方法
のソースコード
ブログに訪問した際に、始めに表示される記事を設定する事ができます。<br>
通常は最新記事が最初に表示されますが、過去に作成した記事を常にトップページに表示できます。<br>
トップページにしたい記事の編集画面で、<br>
公開日時の年を下記画像のように2200など、かなり未来の日付に変更します。<br>
<a href="/customizeblog/file/E38388E38383E38397E3839AE383BCE382B8E59BBAE5AE9A.png" target="_blank"><img alt="トップページ固定.png" src="/customizeblog/file/E38388E38383E38397E3839AE383BCE382B8E59BBAE5AE9A-thumbnail2.png" border="0"></a><br>
(画像クリックで拡大)<br>
<br>
これでその記事が常にトップページに表示されるようになりました。<br>
<br>
次に日付表示を消す方法です。<br>
まずCSSの編集画面を開きます。<br>
<a href="/customizeblog/file/CSS.png" target="_blank"><img alt="CSS.png" src="/customizeblog/file/CSS-thumbnail2.png" border="0"></a><br>
(画像クリックで拡大)<br>
<br>
以下の表示箇所に赤線部分 display:none; を追記します。<br>
<a href="/customizeblog/file/E697A5E4BB98E8A1A8E7A4BAE381AAE38197E381AB.png" target="_blank"><img alt="日付表示なしに.png" src="/customizeblog/file/E697A5E4BB98E8A1A8E7A4BAE381AAE38197E381AB-thumbnail2.png" border="0"></a><br>
(画像クリックで拡大)<br>
<br>
これで日付の表示は消えていると思います。<br>
文字の大きさを変更する方法
https://fanblogs.jp/customizeblog/archive/6/0
A8のケース
まず最初はHTMLだけで指定する方法。線が太い
<table border="1" cellspacing="0" cellpadding="0">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
次はCSSを併用する方法。線がやや細い
<table border="1"width="600" style="border: 1px solid black; border-collapse: collapse;">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
線薄目くすみ
gainsboroグレー
#dcdcdc
#66cdaa緑系
#d8bfd8ピンク系
翡翠色ひすいいろ
#38b48b
芥子色からしいろ
#d0af4c
<table border="1"width="600" style="border: 1px solid black; border-collapse: collapse;">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
<table border="1" style="border-collapse: collapse">
<tr>
<td>サンプル</td>
<td>サンプル</td>
</tr>
<tr>
<td>サンプル</td>
<td>サンプル</td>
</tr>
</table>
table {
border-color: #fc0606;
}
/* CSSコード */
table {
border-color: #fc0606;
}
少しだけカスタマイズするだけで、デフォルトの文字の大きさを変えることができます。
また、ファンブログではカスタマイズによるサポートは対象外となりますので、ご了承ください
https://fanblogs.jp/support/archive/36/0
色の名前とカラーコードが一目でわかるWEB色見本
https://www.colordic.org/
エクセルにhtmlのソースコードをテキストで貼り付ける方法！
https://laplace-man.com/excel-html-paste/
ブログの記事内にソースコードを表示させる３つの方法
https://takumisenka.com/blogunei/blognicod
アングル ブラケット
< ⇒< > ⇒> & ⇒&
HTMLタグ・読み方一覧
http://yume.hacca.jp/koiki/tagulist.htm
HTMLタグの読み方と使い方を初心者にもわかりやすく解説
https://web-camp.io/magazine/archives/89677
１.新しいタブでリンク先を開く
<a href="#任意">表示名</a>クリック側
<h2 id="任意">行先名</h2>行先
任意は同名にする
<A HREF="https:○○"target="_blank">表示文字○○</A>
2.アコーディオン
<div><details> <summary>試合結果をクリックで見る/クリックで閉じる</summary>
<i>内容<i>
</details></div>
3.非表示にする
<!-- ここへ文字 -->で囲まれた部分がコメントです。
<!-- -->
4.文字の色を変える
<font color="red">赤</font>非推奨
<span style="color:brown">茶色</span>
5.文字の大きさを変える
https://hmaster.net/text.html
テキスト、フォントタグは文字の大きさを変えたい時などに使います。
<font size="数字">〜</font>で文字の大きさを変えることが できます。 フォントサイズは1〜7まで指定できます。
デフォルトはフォントサイズを3に指定した時の大きさになります。
【ブラウザ表示】
フォントサイズ1〜7
ソース
<font size="1">フォントサイズ1</font>
<font size="2">フォントサイズ2</font>
<font size="3">フォントサイズ3</font>
<font size="4">フォントサイズ4</font>
<font size="5">フォントサイズ5</font>
<font size="6">フォントサイズ6</font>
<font size="7">フォントサイズ7</font>
■ bigタグでのサイズ変更
<big>〜</big>で文字を大きくする事ができます。 フォントサイズが1増えます。 <big><big>〜</big></big>のように bigタグで囲まれた文字をさらにbigタグで囲むとフォントサイズが2増えます。
【ブラウザ表示】
フォントサイズ3
フォントサイズ4と同じ大きさの文字
フォントサイズ5と同じ大きさの文字
ソース
フォントサイズ3
<big>フォントサイズ4と同じ大きさの文字</big>
<big><big>フォントサイズ5と同じ大きさの文字</big></big>
■ smallタグでのサイズ変更
<small>〜</small>で文字を小さくする事ができます。 bigタグとは逆にフォントサイズが1減ります。 <small><small>〜</small></small>のように smallタグで囲まれた文字をさらにsmallタグで囲むとフォントサイズが2減ります。
【ブラウザ表示】
フォントサイズ3
フォントサイズ2と同じ小さ目の文字
フォントサイズ1と同じ小さ目の文字
ソース
フォントサイズ3
<small>フォントサイズ2と同じ小さ目の文字</small>
<small><small>フォントサイズ1と同じ小さ目の文字</small></small>
6.スペースを入れる
htmlにスペースを入れられる特殊文字とは
【 】：半角スペースと同じサイズの空白
【 】： の空白より小さい空白
【 】：半角スペースより間隔がやや広い空白
【 】：全角スペースとほぼ同じサイズの空白
【HTML table】表を作成する基本からレイアウトの方法までを解説
https://www.sejuku.net/blog/49377
表全体の幅を変える
表全体の幅を変えるので、table要素にwidth属性で幅の大きさを指定しましょう。
ピクセルで指定する場合のサンプルコード
<!DOCTYPE html>
<html>
<head>
<title>表全体の幅をピクセルで指定する</title>
</head>
<body>
<table border="1" width="200">
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>田中</td>
<td>27</td>
</tr>
<tr>
<td>佐藤</td>
<td>42</td>
</tr>
</table>
</body>
</html>
table の枠線を１本の細い線にする方法
https://bit.ly/3VOabIL
まず最初はHTMLだけで指定する方法。
<table border="1" cellspacing="0" cellpadding="0">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
セル１ セル２
セル３ セル４
次はCSSを併用する方法。
<table border="1" style="border: 1px solid black; border-collapse: collapse;">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
tableはデフォルトでborder-spacingが設定されており、そのままの状態でborderを追加すると2重枠で表示されます。これを解除にはtableにborder-collapse:collapse;を設定します。
<table class="border">
<tr>
<th>th</th>
<td>td</td>
</tr>
</table>
線なし
table class="noborder">
<tr>
<th>th</th>
<td>td</td>
</tr>
</table>
画像にリンクを付けるHTMLコード
https://blog.codecamp.jp/programming-html-pic-link
それでは実際のHTMLコードを見ていきましょう！
特定のページに飛ぶ画像ボタンのHTMLコード
image
<a href="sample2.html"><img src="next.png" alt="次へ"></a>
<a href="〜">・・・</a> のaタグで囲まれた部分が、リンクとなります。aタグで画像表示タグである <img src="〜"> を囲むことで画像ボタンがリンクになります。この場合は、画像のリンクで別のページに移動できるようにしています。
クリックで画像を拡大表示させるHTMLコード
image
<a href="harinezumi.jpg"><img src="harinezumijpg" alt="ハリネズミ秋のお散歩" width="120" height="100"></a>
リンク先を画像ファイルとすることで、クリックした画像が拡大表示(実寸表示)されるHTMLコードです。
JavaScriptを使うと、もっと自由に画像をページ内で操作できます。単純な拡大(実寸)表示だけでは物足りない方は、挑戦してみましょう。
弊社参考記事： CodeCampus jQueryを使いこなそう！便利すぎるプラグイン15選！
別タブで開きたいときのHTMLコード
image
先ほど紹介したHTMLコードでは、ブラウザの同じタブで別ページや画像が開いてしまいます。閲覧者が「戻る」を頻繁に押さないといけない、もとのページに戻るのが面倒、などの問題が発生する場合は、別のタブで開く HTMLコードを書き加えましょう。
<a href="harinezumi.jpg" target="_blank" > <img src="harinezumi.jpg" alt="ハリネズミ秋のお散歩" width="120" height="100"> </a>
リンクのタグであるaタグに target="_blank"を書き加えることで、別のタブでリンクが開きます。
枠をつける - HTMLのお勉強
https://bit.ly/3UQascW
HTMLのみ＊コピペで簡単♪かわいい囲み枠デザイン
https://www.moca-memo.com/2019/10/kakomiwaku.html
HTMLで水平線を引く方法
https://web-camp.io/magazine/archives/83127
サンプルコード
水平線の太さを10pxにする
<hr size="10">
水平線の横幅を300pxにする
<hr width="300px">
水平線の位置を右に変更する
<hr align="right" width="300">
水平線の色を変更する
<hr color="red">
水平線の影を非表示にする
<hr noshade>
１．hrのみ
<hr>
２．size="5"
<hr size="5">
３．width="100"
<hr width="100">
４．width="200"
<hr width="200">
５．width="50%"
<hr width="50%">
１．width="30%" align="left"
<hr width="30%" align="left">
２．width="30%" align="center"
<hr width="30%" align="center">
３．width="30%" align="right"
<hr width="30%" align="right">
４．color="blue"
<hr color="blue">
５．noshade
<hr noshade>
６．size="10" width="50%" color="green"
<hr size="10" width="100%" color="green">
HTMLのみ＊コピペで簡単♪かわいい囲み枠デザイン
https://www.moca-memo.com/2019/10/kakomiwaku.html
A8/
トップページ記事を固定し、日付表示をなしにする方法
https://fanblogs.jp/customizeblog/archive/8/0
1.トップページ固定
2.画像クリックで拡大
3.日付表示を消す方法
のソースコード
ブログに訪問した際に、始めに表示される記事を設定する事ができます。<br>
通常は最新記事が最初に表示されますが、過去に作成した記事を常にトップページに表示できます。<br>
トップページにしたい記事の編集画面で、<br>
公開日時の年を下記画像のように2200など、かなり未来の日付に変更します。<br>
<a href="/customizeblog/file/E38388E38383E38397E3839AE383BCE382B8E59BBAE5AE9A.png" target="_blank"><img alt="トップページ固定.png" src="/customizeblog/file/E38388E38383E38397E3839AE383BCE382B8E59BBAE5AE9A-thumbnail2.png" border="0"></a><br>
(画像クリックで拡大)<br>
<br>
これでその記事が常にトップページに表示されるようになりました。<br>
<br>
次に日付表示を消す方法です。<br>
まずCSSの編集画面を開きます。<br>
<a href="/customizeblog/file/CSS.png" target="_blank"><img alt="CSS.png" src="/customizeblog/file/CSS-thumbnail2.png" border="0"></a><br>
(画像クリックで拡大)<br>
<br>
以下の表示箇所に赤線部分 display:none; を追記します。<br>
<a href="/customizeblog/file/E697A5E4BB98E8A1A8E7A4BAE381AAE38197E381AB.png" target="_blank"><img alt="日付表示なしに.png" src="/customizeblog/file/E697A5E4BB98E8A1A8E7A4BAE381AAE38197E381AB-thumbnail2.png" border="0"></a><br>
(画像クリックで拡大)<br>
<br>
これで日付の表示は消えていると思います。<br>
文字の大きさを変更する方法
https://fanblogs.jp/customizeblog/archive/6/0
A8のケース
まず最初はHTMLだけで指定する方法。線が太い
<table border="1" cellspacing="0" cellpadding="0">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
次はCSSを併用する方法。線がやや細い
<table border="1"width="600" style="border: 1px solid black; border-collapse: collapse;">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
線薄目くすみ
gainsboroグレー
#dcdcdc
#66cdaa緑系
#d8bfd8ピンク系
翡翠色ひすいいろ
#38b48b
芥子色からしいろ
#d0af4c
<table border="1"width="600" style="border: 1px solid black; border-collapse: collapse;">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
| セル１ | セル２ |
| セル３ | セル４ |
<table border="1" style="border-collapse: collapse">
<tr>
<td>サンプル</td>
<td>サンプル</td>
</tr>
<tr>
<td>サンプル</td>
<td>サンプル</td>
</tr>
</table>
table {
border-color: #fc0606;
}
| 果物 | りんご | バナナ |
|---|---|---|
| 色 | 赤 | 黄色 |
/* CSSコード */
table {
border-color: #fc0606;
}
【このカテゴリーの最新記事】
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
-
no image
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/11645488
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック
