(X)HTML

そろそろ「こちら」や「ここ」にだけリンクさせるのを絶滅させたいんです。

ブログを書けって大先生に怒られたので、仕事も落ち着いてきたんで以前から書きたかった事でも。

今更なネタなんですけど、「Sassの教科書で一番読んで欲しいところ。はこちら」みたいな感じで、「こちら」にだけリンクになってるケースがいまだに結構多くて、色々な面でよろしくないので、そろそろやめません?と。

普段から使っていると、「こちら」以外の文言がパッと浮かばない場合なんかも有りますし、コーダー的には下手に文言を変更して色々言われるのが面倒的な理由も有るので、その場合は、こちらも含めてリンクにするのがよろしいかと。

例えば、

製品の詳細はこちら

製品の詳細はこちら

って感じですね。
んでは、「何で、こちらにだけリンクするのは良くないの?」的な部分を色んな視点から書きたいと思います。

コピペで使えるマークアップ済みダミーテキスト

現在、フリーランスとしてやってるんですが、そっちの屋号が「underHat」に変わったので、もしリンクとかしてくれてる方が居ましたら変更してもらえると幸いです。

さて、今回はブログ記事のダミーエントリーとかに使えそうな、マークアップ済みダミーテキストです。

何気に今まで使ってたのが有ったんですが、メインPC逝ったりしてる内にどっかに消えてしまったので作り直したのを忘れないようにブログにアップです。

一応それなりに出てきそうな要素を使ってマークアップしております。
h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, a, q, blockquote, table, td, th, pre 辺りです。

ダミーテキストだけならジェネレータとか何か色んなサービス有るんですけど、イマイチ自由に使っていいのか分んなかったりしますし、結局テキストだけじゃダメなんで、マークアップする必要があってその作業が何気に時間掛かるんですよね。

なのでまぁ、差し支えない感じの適当なテキストが入っててマークアップもされていると楽だったりすると思うので作ってみました。はい。

基本的にはclassとかidを振っていないのでとてもプレーンな感じになってます。(imgにだけちょとクラス振ってますが)
使用条件とかは特に無いのでお好きに使ってください。

HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。

  • (X)HTML

読んでおくべき。で終わってるタイトルが、自分っぽくなくて違和感有り有りだったの何となく変更。

都道府県選択するやつ。がもしかしたら一日辺りの過去最高のアクセスを稼いだかも知れないという現実。
7月16日のアクセスが17,000PVオーバーって何だ・・・おかしいな、ウチはCSSネタが主力なのに・・・あぁ複雑。

本題ですが、HTML5のimg要素のalt属性に関する仕様がすごい事になってますね。
ちょっと読んでて泣きそうになるくらい事細かに書かれています。

これは、コーディングを生業としている人間なら覚えていなければならないと思うので、必読すべき内容です。

都道府県選択するやつ。

メモ。

誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。

-
コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。

特別記載が無いエントリー以外は、どう使うのも自由です。
自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。
もちろん、改変・配布とかも自由です。
ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。

大体こんな感じです。

ソースなんて誰も見ないよ。

  • (X)HTML

ボクたちみたいな、Web業界の人間やそういうのに興味ある人でも無ければ、訪れたサイトのソースなんて誰も見ないよね。

そんな感じだから、蔑ろにされやすいし、扱いも低かったりする。

そりゃそーだ。
ボクだって、今の仕事してなかったらサイトのソースなんて見る事無いし。
テーブルレイアウトだろうが、どんな方法で組まれていようが普通に閲覧できれば関係ないよね。

HTML5が話題になっているので試しに書いてみた。

  • (X)HTML

HTML5公開草案初版 (First Public Working Draft) がリリースしたりで、色んなトコロで見かける今日この頃。

HTML5関連適当にリンク。

  1. HTML 5
  2. HTML 5 differences from HTML 4
  3. HTML 5 における HTML 4 からの変更点(2の日本語訳)

とりあえず、ボクが一つだけ言えることは、英語は分からんって事です。
えぇ。

日本語訳が充実する日を心待ちにしていようっと。

パンくずリストのマークアップを色々考えてみる

  • (X)HTML

久々普通のエントリーだ。

なんか、デジパの中の人が、Web標準の日々に出ちゃうらしいです。
この人→ネットのサラダボウル: Web標準の日々に参加します。

皆色々やってるなぁ~、ボクも負けてられんなぁ~

ソレとは関係ないけど、デジパの社員は半分くらいの人がブログ書いてるんすけど、B to A 赤坂で働くWebコンサルタントの日記とかのエントリーで逆立ちって。。。。

皆色々やってるなぁ~、ボクも負けてられんなぁ~

さて、そろそろ本題に。
以前のエントリーでパンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種ってのを書いたんだけど、その後色んなサイトで書かれてたパンくずリストのエントリーや、コーディングコンテストのソース覗いてたりして、今後どうやってマークアップしてこうかなぁ~って悩んでた今日この頃。

そんな訳で、良いか悪いかは別として色々考えてみた。

CSSに見惚れてばかりじゃなくて、もっと私(HTML)を見てよっ!

  • (X)HTML

と、htmlさんが嘆いている気がしたので、こんなサイトですがhtmlさんに付いて書きます。

ウチのサイトの一番の目的は「CSSって面白い!」って思ってもらい、興味を持ってもらう事にある訳ですが、次のSTEPに進む為にやっぱり通らなければならない道である(X)HTMLの正しい記述方法。

もちろん、CSSの勉強の前に(X)HTMLの理解をしてからが理想だと思いますが、ボクはソレがベストだとは思っていません。
何かを覚えるのに、「この順番で覚えなければ絶対にいけない。」なんて事は無いと思います。

ホントのビギナーさんは、CSSビギナー向けから、取りあえずCSSに触ってみるっていうのがボクのオススメです。
楽しんでナンボっす。

で、まぁ今回の対象となる方々は、テーブルレイアウトからCSSに移行した人で、(X)HTMLについては特に触れなかった人とか、Blogで初めてCSSに触れた人とか、CSSの魅力ばかりに目が言ってる人(ボクとか)辺りでしょうか。

その辺りの方々が陥りやすい部分についてチョコっと書きたいと思います。

文書型宣言についてのアレコレ

  • (X)HTML

CSSを覚えていく上でXML宣言と文書型宣言に関しての理解がないと、組んでいくうちにブラウザによって表示の違いが生じ、後から色々とスタイルを調整しても何が原因で表示が違うのか分からなくなってしまうといった事があると思います。

という事で、文書型宣言について自分なりのアレコレを書いてみます。(間違ってるトコあったらご指摘願います)
XML宣言に関してのアレコレは前のエントリーで書いてます。

あ、文書型宣言ってのは、ウチのサイトの場合コレ↓です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XML宣言ってのはコレ↓です。

<?xml version="1.0" encoding="utf-8"?>

↑上に行くよ