入力補助ツールとHTMLタグ


いつもFC2ブログをご利用いただきありがとうございます。
FC2ブログスタッフです。

FC2ブログで記事を作成している時、入力補助ツールを使うとHTMLタグが挿入されますが、皆さんは各HTMLタグについてご存知でしょうか?

tool.png

今回は、入力補助ツールを使った際に挿入される「HTMLタグ」についてご説明したいと思います!

HTMLタグとは・・・?


現在、インターネット上で公開されているWEBページのほとんどは、HTML(Hyper Text Markup Language/ハイパーテキスト・マークアップ・ランゲージ)と呼ばれるでWEBページを作るために開発された言語で作成されており、 HTMLタグ(HTML要素)はWEBページを動かすための書式(命令)です。HTMLタグは「<」と「>」に囲まれた半角の文字で構成されており、<開始タグ>とを対にして使います。

htmltag.png

また、タグ(要素)の中に「属性」と呼ばれるタグの設定情報と「属性値」と呼ばれる設定の詳細を記載することで、タグの役割を細かく指定することができます。

<span>タグとstyle属性


<span>タグは、他のタグと違いタグ自身に意味を持っていませんが、<span>~</span>で囲んだ範囲を一つのグループとして定義するためのタグになります。<div>という似た働きをするタグもありますが、<span>タグは主に文章の中の一部に設定を行いたい場合に用いられます。

HTMLは各要素の意味や情報構造を定義するもの(骨組み)なので、通常はCSS(スタイルシート)と呼ばれる文書のスタイルを指定する言語を用いて装飾を行いますがstyle属性を指定することで、直接CSSを記述することができます

文字の色を変える


1.png <span style="color:#FF0000">テスト投稿</span>
色の指定は、「color」という属性値で指定されており、「#FF0000」の部分を好きな色のカラーコード(16進数)に変更することで、文字の色を変更することができます。カラーコードはGoogleなどの検索エンジンにて「カラーコード」と検索すると、色と16進数を調べられるサイトがいっぱいでてきます!

文字の大きさを変える


2.png <span style="font-size:x-large;">テスト投稿</span>
3.png <span style="font-size:large;">テスト投稿</span>
4.png <span style="font-size:x-small;">テスト投稿</span>

文字の大きさの指定は、「font-size」という属性値で指定されており、「x-large」の部分を変更することで文字の大きさを変更することができます。FC2ブログの入力補助ツールを使うと、「x-large」や「x-small」と言ったキーワードでサイズの指定が行われますが、この箇所をpx(ピクセル)やem(エム)を使った数値での指定や、%(パーセント)を使った%値での指定に変更することも可能です。

その他のタグ


タグが自動で挿入される他の入力補助ツールも見ていきたいと思います。

文字を強調する


5.png <strong>テスト投稿</strong>

<strong>~</strong>で囲んだ範囲の文字列を強調することができます。<em>という似た働きをするタグもありますが、<strong>タグの方がより強い強調になります。 文字を太字にしたい場合は、<b>タグを使うと良いでしょう。

文字を斜体にする


6.png <i>テスト投稿</i>

<i>~</i>で囲んだ範囲の文字列を斜体にすることができます。

文字を打ち消す


7.png <s>テスト投稿</s>

<s>~</s>で囲んだ範囲の文字列に打ち消し線を引くことができます。

文字に下線を引く


8.png <u>テスト投稿</u>

<u>~</u>で囲んだ範囲の文字に下線を引くことができます。

文字を引用する


9.png <blockquote><p>テスト投稿</p></blockquote>

<blockquote>~</blockquote>で囲んだ範囲は、他からの引用であることを示すことができるので、他のサイトから文章をコピーしてきた部分や、雑誌や本にあった文章を引用して紹介する時などに使われます。 また、<p>~</p>で囲んだ範囲は、ひとつの段落であることを表します。</p>タグの後には改行が1行分入りますが、改行を単に行う場合は、<br>タグを使いましょう。

水平線を引く


10.png <hr size="1"/>

<hr size="1"/>を挿入することで、水平線が引かれます。線の太さはデフォルトで「1」となっていますが、大きい数字を入力することで線を太くすることができます。

画像を挿入する


11.png <img src="https://blog-imgs-108.fc2.com/f/c/2/fc2blogstaff/profile.png" alt="profile.png" border="0" width="183" height="184">

<img>タグは、画像を表示させるためのタグで、自動で挿入されるタグの中には複数の属性が含まれています。

src属性は赤文字の属性値にURLを記入することで、画像やドキュメントなどの場所を設定することができます。

alt属性は画像がなんらかの影響で表示されない場合に、「この画像です」と言った代替テキスト情報を設定することができます。

border属性は画像の枠線の有無を指定することができます。デフォルトでは「0」となっているため、枠線が表示されないようになっていますが、数字を「1」にすることで枠線を付けることができます。

width属性height属性は挿入された画像などの要素の横幅(width)と高さ(height)を指定することができます。

文章にリンクを張る


12.png <a href="https://fc2blogstaff.blog.fc2.com/" target="_blank">FC2ブログ公式ちゃんねる</a>

<a>~</a>タグは、アンカー要素と呼ばれており、別のWEBページなどのURLへのリンクを設定することができます。リンク先の指定はhref属性、リンクの表示形式(フレーム形式)はtarget属性で設定します。

デフォルトではtarget属性が「_blank(新しいタブを開いて表示)」という属性値で指定されていますが、「_new(新しいウィンドウを開いて表示)」や「_self(現在開いている画面上に表示)」へ変更することで、リンクがクリックされた際の動作を指定することもできます。


入力補助ツールを使うたびにタグが挿入されるのが分りづらい方は、WYSIWYGテキストエディターのご利用を推奨いたします(簡易モードをOFFにしていただく必要がございます)。

WYSIWYGテキストエディターをご利用いただくことで、Word文書を作成するようにブログ記事を書くことが可能となります。
※WYSIWYGテキストエディターは、多機能のため、通信環境やパソコンの性能によっては、快適に動作しないことがあります。





FC2サービスでは、お客様からのご要望やリクエストを募集しております。
もし宜しければ、FC2ブログに関するご意見・ご要望を
下記のページからご投稿いただけますと幸いです。

▼FC2リクエスト
https://request.fc2.com/



FC2ブログに関してご不明な点がある場合は、
下記の専用お問い合わせフォームより詳細を添えてお問い合わせをお願いいたします。

▼FC2ブログお問い合わせフォーム
https://form1ssl.fc2.com/form/?id=15028

関連記事

【公式】FC2ブログスタッフ

FC2ブログの使い方やおすすめブログのご紹介など、FC2ブログのスタッフによる公式ブログです🐤

月間500億越えのPV数を誇るFC2サービスを使いこなして、ブログで情報発信していこう♪

FC2ブログ 公式ちゃんねるの公式Twitterも、フォローよろしくお願いします!



皆様の応援を心よりお待ちしております👌

web拍手 by FC2

検索フォーム

最新記事

新管理画面でTwitterとの連携/連携解除をしてみよう!【2021年最新版】 2021/05/06
カウンター画像をブログ上で非表示にする方法って? 2021/04/29
FC2ブログでFC2アフィリエイトプログラムを利用してみよう!2021年更新版 2021/04/22
スマートフォンでFC2ブログを利用してみよう!~FC2動画を投稿する方法編~ 2021/04/15
FC2おすすめブログのご紹介♪『Webテク倉庫』 2021/04/08

公式ブロガー

FC2ブログの公式ブロガーとしてご活躍されているブロガー様のご紹介です♪