2017年5月17日水曜日

基本中の基本

HTML記載のもっとも基礎を解説します。

そもそもHTMLとは

Webページを記述するためのマークアップ言語。
文書の論理構造や表示の仕方などを記述することができる。
W3Cによって標準化が行われており、大半のWebブラウザは標準でHTML文書の解釈・表示が行える。
汎用的なマークアップ言語であるXMLに準拠するよう一部の使用を改めたXHTML規格も定められている。


HTMLでは、文書の一部を“<”と“>”で挟まれた「タグ」と呼ばれる特別な文字列で囲うことにより、文章の構造や修飾についての情報を文書に埋め込んで記述することができる。文章の中で表題や段落の区切りを指定したり、箇条書きの項目を列挙したり、文書の一部として画像や音声、動画を埋め込んだり、他の文書へのハイパーリンクを設定したりすることができる。


すごくざっくり言ってしまえば、

Webページを作れて、
ブラウザを通して見た際に、文字や、サイトを形作るために記載する言語

です。
逆に言うと
このHTMLが理解できていれば
ファイルにHTMLを記載、サーバー上にアップ、することで、
世界中誰からでも見ることのできるWEBサイトを公開することができます。



文字表示

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

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


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

test

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

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

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

test

と表示されたはずです

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

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

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

XHTMLで解説します

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

当ブログでは、さまざまなHTMLタグや、
HTMLの書き方を解説していきますが、

現在のWEB業界でのHTML表記の主流で、
ウェブサイトはXHTMLでコーディングする、というものがありますので、
当ブログでも、タグを紹介する時はXHTML準拠の書き方で紹介することとします。

HTMLタグの書き方として、
XHTML準拠で書いておけば、
そのソースを
ドキュメントタイプが、HTMLのサイトに使っても、XHTMLのサイトに使っても問題ありませんが、
もしHTMLの記法のみで書くと(XHTML準拠にしていないと)

ドキュメントタイプが、HTMLのサイトに使った場合はよいのですが、
XHTMLのサイトに使ってしまった場合、
ソースを確認した場合にエラー扱いされてしまったり、
エディタで編集しようとするとエラー検知してしまったりします。

ですので、
もし当ブログを参考にサイトを作ってくださる方がいらっしゃった時用に、
こちらでは、XHTML準拠の書き方でご紹介していこうと思います。

※単体のタグでは<hr><br>などの単体タグに閉じタグをつけて<ht /><br />にする程度の気遣いですが


燃えPaPa


<i>斜体文字

<i>斜体文字


<i>タグで囲まれたテキスト(<i>~</i>の間の文字)は斜体文字(italic)になります。

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

スタイルシートでは、1例として、
<span style="font-style: italic">~</span> などと記述し、斜体文字にすることができます。

例示
この記事で、ここは斜体文字になります。


<b>太文字

<b>タグで囲まれたテキスト(<b>~</b>の間の文字)は太字(Bold)になります。


<b>は非推奨要素ではありませんが、フォントの見栄えに関する指定には、
できるだけスタイルシートを利用した方がよいです。

※近年のhtml形式の変化で、サイトの構造と見栄えは分離することが推奨されているため

スタイルシートでは、<span style="font-weight: bold">~</span> などと記述します。


また、強調することが目的の場合は<strong>タグの使用が推奨されています。


例示
この記事で、ここは太字になります。


<u>下線つき文字

<u>タグで囲まれたテキスト(<u>~</u>の間の文字)は下線付き文字(underline)になります。

<u>は非推奨要素です。
テキストに下線(アンダーライン)を引く際には、できるだけスタイルシートを利用してください。

スタイルシートでは、1例として、 <span style="text-decoration: underline">~</span> などと記述し、下線付き文字にすることができます。

例示
この記事で、ここは下線付き文字になります。

※HTML5の導入で、このアンダーライン要素は廃止との話もありますので、徐々に使用をなくしていった方がよいようです。

HTMLタグ参考リンコレ

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

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

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

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

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

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

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

ちょっと実験も兼ねて


HTMLタグ参考サイト


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


燃えPaPa

<br />改行

htmlを書く際に、

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

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

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

----

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

----

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

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

改行タグ br を入れます。

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

<br />

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

先ほどの文章では、

----

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

----

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

----

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

----

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

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


色指定時のルール

HTMLタグだけに問わず、

サイト作りのために、
ソースを手書きしていると、色指定をすることが多々あります。
(HTMLタグ、スタイルシート、JavaScript等)

<font color="#ffffff">


などがそれにあたります。

このようなfontプロパティのように、文字色指定の場合、
他にも背景色指定の場合、
場面は多々ありますが、

色の指定の書き方ルールは共通なので、今回ご説明します。


PC上での色は、


光の三原色、RGB、すなわち、レッド(赤)、グリーン(緑)、ブルー(青)の
3色の光の重ね合わせで全色を表現しています。

一昔前までは、
色数も16色や256色、という少ない種類しか表現できませんでしたが、
今は、High Color(16ビット)やTrue Color(24ビット)
といって、


65,536色
16,777,216色


までの色を表現できます。


この場合、スタイルシートやHTML等で色指定する場合、
通常、24ビットまでの表現域を前提として、
RGB各色256段階の指定により、色を表現します。


具体的には、
各値を0~255まで使い、それを16進法で、表現、00~ffとして、
頭にシャープ#をつけ
#ffffff (先頭2文字赤、次2文字緑、最後2文字青)
として指定。

また、単純に、各値を16段階で表現して、
#fff (それぞれ赤、緑、青に対応)
として、指定することもできます。


この指定方法と、
色の割合の変化による、実際の色合いがわかれば、
サイトデザイン等で、色にひと工夫可能になります。


なお、
このようなRGBの数値では色のイメージがわかない方は

http://www.colordic.org/

このサイトのように、色見表で欲しい色のRGBの数値をチェックするとよいです。



<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業界の方針からは、
このような文字修飾は、できるだけスタイルシートを利用することが推奨されています。


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


2017年2月15日水曜日

ブログの方向性・・・HTMLのタグリファレンスに

こんにちは、
燃えPaPaです。

こちらのブログ、
これまでつらつらとどちらかというと
日々の記録的ブログでしたが(いや、ブログってそんなもんですが)、

何らかのテーマ性も入れようかな、と迷っておりましたが、
自身の勉強&覚え書きも兼ねて

日々使っているHTMLのリファレンスブログにしようと決めました。

普段サイト作成&PHPプログラミングを普通にやっているので、
htmlの覚書きはあった方が便利で、
ここで少しずつ記録し、
辞書代わりになるようにがんばって作っていこうと思います。

カテゴライズやメニューを工夫してわかりやすくしますので、
どうぞお役立てください。

これからまたどうぞよろしくお願いいたします。


燃えPaPa


2017年1月10日火曜日

昔の方がよかったという幻想

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

ネットでも、現実でもよく言われる、
「昔はよかった」
の真実。

http://2ch-matomenews.com/327403/

これは的確に表現していますね。

確かに、昔は〇〇があってよかった的な思い出しには、
決まってその頃のよかったものを代表的に考えてしまいますよね。

この記事で言ってるように、
確かにそれでが平均的なもの同士比較してるわけでもないですし、
そりゃ昔がよかった気がしてしまいますね。

燃えPaPa