もっと綺麗に。もっとわかりやすく記事が書けたらいいのに。
ホームページやブログを運営する時に、どうしてもhtmlのタグという知識が必要になってきます。
ここでは、更新に必要な、最低限知っておきたいhtmlタグについて説明します。
文章を思うように作る
改行する
1 | <br /> |
1 | <br> |
改行を表すhtmlタグです。WYSIWYG（ウィジウィグ）を使用する場合、ブログを更新する際に、Enterを押すと、自動的に挿入されたりします。更新ソフトのWYSIWYG（ウィジウィグ）によっては、Shift+Enterで改行となる場合もあります。スラッシュがあるなしの違いですが、どちらでも動作に問題はありません。構築の規格によって、スラッシュがある方が現在では正式である場合が多いです。
段落を作る
1 | <p></p> |
文章は段落で通常分けられます。段落でわけるほうが相手にも伝わりやすくなります。また、検索エンジンにも情報の固まりとして知らせる事ができるので、対策として有利になります。WYSIWYG（ウィジウィグ）を使用する場合、Enterを押すと反映される場合が多いようです。
画像を使う
1 | <img src="" /> |
1 | <img src=""> |
srcの部分に、画像へのパスを入力すると、画像が表示されます。
通常画像をアップロードすると自動的にこちらのタグが挿入される場合が多いです。タグを編集しなくては行けない場合は、タグの閉じる部分をきちんと押さえ、タグを移動させる必要がある場面があるかもしれません。
1 | <strong></strong> |
こちらのタグを使うと、文字が太字になります。pタグ内にで特に強調したい部分をstrongで囲むと効果的です。多用しすぎると、検索エンジンへ悪影響を及ぼす可能性がありますので、適切な部分で使用する必要があります。
文字をイタリックにする
1 | <i></i> |
こちらのタグを使うと、文字が斜体文字になります。文章作成のマナーとして、強調したい場合に使えます。
リストを作る
1 2 3 4 5 | <ul> <li></li> <li></li> <li></li> </ul> |
1 2 3 4 5 | <ol> <li></li> <li></li> <li></li> </ol> |
箇条書きにして伝えたいときに役に立つタグです。ulやolで始まりを表し、liタグの中にコンテンツを入れる事で、作られます。
改行のタグを使う事で実現も可能です。正式な表記はこのリストタグを使う事で表現する事が良いとされています。
引用を使う
1 | <blockquote></blockquote> |
ホームページやブログの更新マナーとして、どこかから引用したり、参照したりする場合は、引用であることを明示する必要があります。
ご自分が一生懸命作り上げた文章を他人にコピーされるのは、不快となります。
リンクを作る
1 | <a href=""></a> |
自分のホームページやブログ内、あるいは、他人のページへリンクを貼る場合のタグです。hrefの中に指定のURLを記載することで、タグ内の内容をクリックするとページを移動します。ホームページ外にリンクする場合は、target=”_blank”を使用すると、新しいウィンドウを開く事ができ、閲覧者の混乱を防ぐ事ができます。
1 | <a href="mailto:"></a> |
こちらの指定をし、mailto:の後ろにメールアドレスを記載すると、使っているメーラーが開きます。問い合わせが欲しい時など、この設定が有効である場合があります。
基本的なhtmlタグのまとめ
基本的なタグを覚える事で、更新がぐっと楽になります。WYSIWYG（ウィジウィグ）だけを使い続けていると、細かい修正ができなくなったり、最悪の場合、記事を壊してしまう事になりかねない場合もあります。こちらの基本タグに、classやidを負荷することで、オリジナルのデザインを反映する事が可能です。
例えば、
1 | <strong class="red_style">赤い文字にする</strong> |
のようにした場合、red_styleというクラスが設定されていれば、文字は赤くなります。
専門的な知識は必要ありません。基本的なhtmlタグを覚えてホームページ運営を楽しくしましょう。
Amazonで購入したおすすめ商品
お疲れ様です。パソコン仕事は体を痛めます。長時間のパソコン仕事で、肩や目が痛い方はこちらがおすすめです。
快適な環境で仕事をしたいですね。
肩が上がらない。姿勢が悪くなる。
腕を広げてタイピングできるので、肩への負担が軽減されます。
目の奥が痛い！時に。
画面の色を損なうことなく、パソコンを長時間見るときに役立ちます。
見た目はエッジが効いている？ので、集中モードの時に。
ネットが遅くて困る！接続数足りてる？
パソコン・スマホ・タブレットを８０台まで接続できてこの値段。
