目次
- 見出しを作る：<h1>-<h6>
- 段落を作る：<p>
- 改行する：<br>
- リストを作る
- 文字を強調する
- 下付き・上付き文字を作る：<sub>, <sup>
- 取り消し線を引く：<s>
- 文字サイズを変更する
- 文字の色を変更する
- リンクを作る：<a>
1．見出しを作る：<h1>-<h6>
<h1> , <h2> , <h3> , <h4> , <h5> , <h6> タグは、見出しをつける際に使用します。 <h1>が最上位の大見出しで、<h6>が最下位の小見出しです。Webにおける見出しの付け方も論文やドキュメントの見出しの付け方と同様です。構造化して見出しをつけることで情報が整理され、ユーザーにも理解しやすく、またSEOなどの観点でも良い影響があります。
<h1> H1 見出し1 </h1>
<h2> H2 見出し2 </h2>
<h3> H3 見出し3 </h3>
<h4> H4 見出し4 </h4>
<h5> H5 見出し5 </h5>
<h6> H6 見出し6 </h6>
2．段落を作る：<p>
<p> タグは段落要素です。文章の段落を作る際に使用します。
<p> 吾輩は猫である。名前はまだ無い。 </p>
<p> どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。 </p>
<p> この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始みはじめであろう。この時妙なものだと思った感じが今でも残っている。 </p>
3．改行する：<br>
<br> タグは文中で改行する際に使用します。 <br> はあくまで文章を分割することが目的であり、意味のある段落を作りたい場合は <p> タグを使用してください。
〒107-0062 <br>
東京都港区南青山1丁目15-9 <br>
第45興和ビル 9F <br>
4．リストを作る
リストには箇条書きと番号つきの2種類があります。
箇条書きリスト：<ul>
<ul> タグは順序のない箇条書きリストを作る際に使用します。
<ul>
<li> 春の花
<ul>
<li> 桜 </li>
<li> 梅 </li>
</ul>
</li>
<li> 夏の花
<ul>
<li> 向日葵 </li>
<li> 睡蓮 </li>
</ul>
</li>
</ul>
番号つきリスト：<ol>
<ol> タグは順序のある番号つきリストを作る際に使用します。要素の並びに意味がある場合はこちらを使用してください。
<ol>
<li> 金メダル </li>
<li> 銀メダル </li>
<li> 銅メダル </li>
</ol>
組み合わせて使う
<ul> と <ol> は組み合わせて使うこともできます。
<ol>
<li> 参加初日
<ul>
<li> 必ず受付をしてください </li>
<li> 参加費の現地支払希望者は受付の際にお申し出ください </li>
</ul>
</li>
<li> それ以降
<ul>
<li> 受付は不要です </li>
<li> 参加証を必ず身に付けてください </li>
</ul>
</li>
</ol>
5．文字を強調する
強い重要性を意味する太字：<strong>
<strong> タグは重要な情報や緊急性の高い情報を意味するテキストに使用します。装飾目的など、単に太字にしたい場合は後述の <b> を使用してください。
現地参加者の方は参加費決済後に表示されるQRコードを <strong> 必ず印刷して </strong> お持ちください。
単純な太字：<b>
<b> タグは読み手に注目させたいテキストのうち、特別な重要性がないものに使用します。
文中のキーワードや名称など、他と区別したい場合に使用してください。
吾輩は <b> 猫 </b> である。名前はまだ無い。
6．下付き・上付き文字を作る：<sub>, <sup>
<sub> タグは下付き文字を、 <sup> タグは上付き文字を作るために使用します。
CO <sub> 2 </sub> , E=mc <sup> 2 </sup>
7．取り消し線を引く：<s>
<s> タグはすでに正確ではなくなった情報を意味するテキストに使用します。
第九回学術大会は <s> オンライン開催 </s> ハイブリット開催です。
8．文字サイズを変更する
文字サイズは以下の形式で指定します。
<span style="font-size:`{サイズ指定}`;"> サイズを変更したい文字 </span>
{サイズ指定}の部分に値を指定することで、サイズを変更することができます。
いつものサイズ <br>
<span style="font-size:1.5em"> 1.5倍で表示 </span><br>
<span style="font-size:2em"> 2倍で表示 </span><br>
<span style="font-size:.8em"> 0.8倍で表示 </span><br>
<span style="font-size:24px"> 絶対値24pxで表示 </span><br>
<span style="font-size:11px"> 絶対値11pxで表示 </span>
1.5emや2emなどの{数値}emの指定は相対値指定です。元々のサイズが 1emとした時に、1.5倍や2倍、0.8倍などのサイズで表示されます。相対値指定の場合、ユーザーがブラウザの設定を変えて標準文字サイズを大きくしていた場合などにそれに合わせて文字が拡大・縮小されます。アクセシビリティやユーザービリティの面でも柔軟性のある指定の方法です。
24pxや11pxなどの{数値}pxの指定は絶対値指定です。元々の文字サイズに関係なく、指定した値のサイズで表示されます。
9．文字の色を変更する
文字の色は以下の形式で指定します。
<span style="color:`{色の指定}`;"> 色を変更したい文字 </span>
{色の指定}の部分に値を指定することで、色を変更できます。色は16進数のコードか、決められたキーワードで指定することができます。
文字の色を
<span style="color:red;"> 赤 </span> 、
<span style="color:#00f;"> 青 </span> 、
<span style="color:#008000;"> 緑 </span> 、
のように変更することができます。
指定方法の詳細や色見本についてはこちらを参照ください。
🔍 参照：- CSS: カスケーディングスタイルシート | MDN
文字の背景色を変更する
文字色と同様に背景色を設定することもできます。
文字の背景色を
<span style="background-color:red;"> 赤 </span> 、
<span style="background-color:#ff0;"> 黄 </span> 、
<span style="background-color:#008000;"> 緑 </span> 、
のように変更することができます。
組み合わせて使う
style="{スタイル指定}" は複数指定することができます。例えば以下のように文字の背景色と文字色を変更することも可能です。
文字の <span style="background-color:#00f; color:#fff;"> 背景色と文字色を同時に指定する </span> ことができます。
10．リンクを作る：<a>
<a> タグは別のページやファイルなどへのリンク作る際に使用します。
<a href="{URL}"> リンク </a>
{URL} の部分に以下のようにリンク先を指定してください。
くわしくは <a href="https://about-confit.atlas.jp/"> Confit紹介サイト </a> を御覧ください。
リンクを装飾する
ただのテキストリンクではなく、ボタンのような形に変更することもできます。
くわしくは <a href="https://about-confit.atlas.jp/" style="padding: .2em .4em; display: inline-block; border: 1px solid #008000; border-radius:4px; color: #008000; text-decoration:none; font-weight: bold; margin: 0 .2em;"> Confit紹介サイト </a> を御覧ください。
サンプルコードにある #008000 の指定箇所に他のカラーコードを指定すれば他の色に変更することができます。
リンク先を新しいタブで開く
target=”_blank” を使うと、リンク先を新しいタブで開くことができます。
くわしくは <a href="https://about-confit.atlas.jp/" target="_blank"> Confit紹介サイト </a> を御覧ください。
HTMLについてのさらに詳細な情報はこちらを御覧ください。
🔍 参照：HTML: HyperText Markup Language | MDN
上記で解決しない場合は、担当者までご連絡ください。