2017年5月17日水曜日

文字表示

タグリファレンスなのに第一回はタグを使っていなくて申し訳ないですが、

まずは画面に文字を表示するロジックをひとつ


まず、メモ帳を開き
本文にただ

test

この1単語を書いて
名前をつけて保存しましょう
ここでは、
index.html
と名づけましょう

これで保存し、保存したファイルをダブルクリックするだけで

インターネットエクスプローラが起動し
画面に、

test

と表示されたはずです

これだけでホームページになるのです

基本はこんな単純な仕組みです。
これをいかに作り進めるかてサイト作りは進展します。

んでは、第1回はこんな感じで

HTMLタグ参考リンコレ

こんばんは、
燃えPaPaです。

ちょっと先日見つけた便利なWEBサービスのご紹介です。

無料のWEBサービス提供の定番の、ninjaのサービスで、
手軽にリンク集を生成できるサービス

リンコレ
http://lcll.jp/

というものがリリースされました。

こちら、URLと短評をつけるだけで、
手軽にソーシャルブックマークのようにリンク集を生成できます。

このブログでも、多くのHTMLタグ情報を紹介しておりますが、
他の方の簡単手引きのように作っているサイト等でも、
よいものが多数ありますので、少し参考になるといいな、と思いまして、

ちょっと実験も兼ねて


HTMLタグ参考サイト


って、作ってみましたー。
よろしければ、これからサイト作りを志す方に役立てていただきたいな、と。


燃えPaPa

<br />改行

htmlを書く際に、

ソースファイル中で、本文に改行を入れたとしても、
ブラウザで見た際には改行されません。

例:
ソースファイルで、
----

この文章は、
改行されてますか。

----

と書いたとしても、ブラウザを通してモニタで見ると、

----

この文章は、改行されてますか。

----
と一続きの文章にされてしまいます。
このような文で改行して欲しい場合は、

改行タグ br を入れます。

書き方としては、
改行したいところに

<br />

を入れるだけです。
※以前は<br>でもよかったが、xhtmlの普及により、単体のタグでは閉じを意味する / を入れる

先ほどの文章では、

----

この文章は、<br />改行されてますか。

----

と書けば、ブラウザ上では、

----

この文章は、
改行されてますか。

----

として改行されて表示される。

サイト上で長い文章や、テーブル内に入れた文章は、行末でも自動改行されますが、
基本的には、適宜改行タグを入れて見やすくする方が一般的です。


<hr />水平線

<hr />水平線
(hr ← horizontal rule)


<hr />このタグを入れたところに、(サイズ等指定していない限り)横一直線の棒(水平線)が挿入されます。
内容的に、文章の前後を分けたい、段落分けをはっきり見せたい、などの時によく利用されます。

↓実際



通常、何も指定しないデフォルトでは、

黒色で
1px幅
表示領域の左端から、右端まで

の線が表示されます。
もちろん、このままではサイトデザインとかみ合わないことも多々ありますので、
スタイル指定で、

size (線の幅)
width (線の長さ)
color (線の色)

などと組み合わせて表示するのが通常です。


<s>打消し線

<s>打消し線


<s>タグで囲まれたテキスト(<s>~</s>の間の文字)は文字上に打消し線が引かれます(文字に横線が上乗せされる)。

<s>は非推奨タグなので、
できるだけスタイルシートを利用してください。
スタイルシートではclassを当ててスタイルシートで、
ないし直接styleタグで、

 <span style="text-decoration: line-through">***</span>

のように記述します。

現在のデザイン、構造分離のWEB業界の方針からは、
このような文字修飾は、できるだけスタイルシートを利用することが推奨されています。


例示
この記事で、ここ←は打消し線がかけられます。