(X)HTML CSS カテゴリのアーカイブ

Firefox のアドオンの中でもなくてはならない存在になりつつある Stylish で、今更ながら mixi の見た目を変えてみました。

Styles for ‘http://mixi.jp/’ | userstyles.org
たくさん種類がある中で選んだのはこれ。
[2008/01/26 更新]　Mixi 3column Customizer | userstyles.org
横幅固定2カラムもいいかなと思ったけど通常の表示領域が1000px近くあるので、これがしっくりきました。
便利なのは上部にナビゲーションが固定されていて、ページをスクロールしてもクリックするために戻らなくてもいいところ。

HTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束です。そこを正しく理解すると、実はHTMLは簡単で強力な情報発信ツールになるのです。

ごく簡単なHTMLの説明

ガッテンガッテン。

もうすぐバレンタインなんでそれに例えてみます。

手作りのチョコレート(文書) をシンプルな白い箱(HTML) に入れてラッピングしてリボンをかけて(CSS) みんなに配る

受け取った人はそのまま眺めるもよし、包装や箱は気にせずチョコレートを味わうもよし、箱や包装を再利用するもよし。そんなものいらんと受け取らないのも自由。
興味のない人にとってはどんなに素敵なラッピングも意味はなさないだろうし、過剰包装もよくない。
それに見た目が良くても肝心のチョコレートがまずかったらあんまりうれしくないな。

おいしいチョコレートをお待ちしております。

HTMLは道具
ガッテンガッテンガッテン！

初心に戻って勉強しようとごく簡単なHTMLの説明を最初からゆっくり読んでいたら見つけました。
何のためのHTML？ — ごく簡単なHTMLの説明
「道具としてのHTML」5年以上も前からこのような考えがあったのですね。
神崎さんの解説を読めば読むほど、HTML はシンプルな道具であることがわかります。

HTML と CSS ！というひとくくりにしてしまうからややこしくて面倒で、しかもこれが正解！というのもない難解なものに思えてしまうけど、HTML だけなら本当に30分で基本的なことは理解できるのかもしれません。（30分間(X)HTML入門 — ごく簡単なHTMLの説明）
このスライドショーも要点がすっと入ってきてわかりやすいと感じました。

div を使うとか使わないとか、class や id はどっちがいいとかなんて名前をつけるとか、そういう議論もいいけれど、これから覚えようとする人は流行などに左右されずにまずは基本を覚えて「あー意外と簡単かも」と感じてもらえたらいいなーと思います。
シンプルで正しい HTML が書けたら CSS を少しずつ覚えていって、文字の色を変えたり背景画像をつけてみたり余白にこだわってみたり。
初めて CSS で背景画像を表示させたときのこと、思い出すだけでワクワクします。テキストエディタに打ち込んだアルファベットの羅列がこんなことになるなんてすごい！と。

とりとめもないけど、要はじんさん頑張れ！ってことです。私も頑張る。

HTML及びCSSは習得が難しい言語か！:::STOPN’ LISTEN:::

うーん、最初の頃を振り返って・・・8年くらい前の話ですが、よくある解説サイトみたいなところを見てテーブルレイアウトをしつつ CSS を使ってというかんじで始めた気がします。
IE 以外のブラウザの存在なんて知らなかったし、ネスケで崩れていると言われてもどうしていいかわからなかった。
CSS も文字色や背景色などの基本的なことくらいしか使ってなくて、フレームを使ってメニューとか作ってました。
2004年頃ブログが流行りだして、MT などのデフォルトテンプレートが見慣れたテーブルレイアウトではなく div ってなんだこれー！とカルチャーショックを受け、Web 標準への流れになっていったと思います。

自分の経緯から見ると覚えなくてもよかった情報がちょっと回り道だったなと。
好きで楽しくて覚えたくてやっていたからここまで来れたけど、予備知識もなしにいきなり業務としてやらされたら覚えるのは難しいでしょうね。何でも同じかな。
kennsuさんがリストアップされている内容にも共感できるようなできないような・・・あ、私が変な人な部類ってことですかね。

リカバリ前は WordPress をローカルにインストールしたりしていたが、Apache の設定などは練習のために一からやりなおそうと思っていたのでもう一度。とりあえずは PHP だけ動くようにしたかったので以下の設定をした。

1. OSXでCGI、Perl、phpを動かす
2. WEBFACTORY ::: BLOG: PHPのショートタグとXML宣言
3. Mac OS X Server 10.4.4: Apache/PHP/MySQL の相互動作の機能強化
4. エックスサーバー Q&A集

Mac OSX ローカルで PHP を動かす ＋α の全文を読む