2017年9月7日木曜日

基本中の基本

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

そもそもHTMLとは

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

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

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

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

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


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


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


2017年2月15日水曜日

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

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

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

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

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

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

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

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


燃えPaPa


2017年1月10日火曜日

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

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

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

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

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

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

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

燃えPaPa