  |
はてなキーワード: スタイルシートとは
カルピスのおまけでついてきた生姜の粉、カルピスに入れて飲んだらおいしくてあったかくなった。でも二袋しかついてこなかったからもうない。
あと、はてな村奇譚が Nexus7 (初代) の Firefox で見ると文章の一部が隠れたきり出てこないの、自分だけだと思ってたらそうでもなかったみたいであったかくなった。
横長画面にしたら一応見られるんだけど、普段は画面の自動回転オフにしてて、ここ見る時だけ回転オンにして横向きにして、見終わったら縦向きにして回転オフに戻して、って操作するのめんどいしんどい。
てな訳で、間に合わせで適用させてるユーザスタイルシートおすそ分けしとくね。
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("orangestar.hatenadiary.jp") { #content { width: auto; } #main { width: 90%; float: left; } #box2 { width: 90%; } }
見た感じ、強気で横幅いじってる (具体的には #content { width: 1080px; } #main { width: 880px; } #box2 { width: 180px; }) のが原因みたい。
元の CSS を修正するんじゃなく、後ろの方に同じプロパティを新しい値で書き足す形で書かれてるせいで、元の CSS に記述されてるタブレット用の値が全部消し飛ばされてる。
書き足し形式をやめて元の CSS を修正するか、もしくはスマホ・タブレット用の記述もコピペして一番下に書き足せば、ひとまず文章は全部見えるようになると思う。
じんじゃーね。
アドバイス罪くさいからここに書くだけにしといたんだけど、描いてる人に伝わったみたいで直った。少なくとも我が家では直った。良かった。
あと、62話目までは画像クリックするとほとらいふのトップに飛ばされて寂寥感ひしひしだったんだけど、63話目から画像クリックするとその場で画面いっぱいにびろーんて絵が出てくれる方式になってた。良かった。
div.afc, div#afc_footer, div.google_afc_blocklink { background:#e9e9e9; font-size:100%; padding:0; border:solid 1px #e9e9e9; } div.afc div.google_ads_by, div.afc div.google_afc_blocklink li { margin:0;padding:0; }
が自分にしか効かないCSSなんだから（自分は絶対に広告をクリックしないのだから）
div.afc, div#afc_footer, div.google_afc_blocklink { display:none; }
これでいいや
はてなダイアリー無料版の広告に向くスタイルシート - Imamuraの日記
2,3日前に突然画面が変わった。
以前は、冒頭引用・サムネ画像の両方が表示されていたのが、今は、引用とサムネのどちらかしか表示されなくなってしまった。
リンク先に画像がある場合は画像優先表示で、画像がない場合に引用が表示される仕組み。
引用がなくなったことが糞。
引用がないことの何が問題か。釣りタイトルを避けることができなくなるんだよ！！！！！！！！！！！！！
タイル表示になった新画面をスタイルシートで旧画面風にして10ブクマ以上を表示するようにフィルタかけて新着エントリーをチェックするようにしていた。
といっても全てのリンク先に飛ぶわけじゃない。
まず興味引くタイトルかそうでないかで選別される。次に引用部分を見て、だいたいの内容を判断し、面白そうかそうでないかを判断して、リンク先に飛ぶかどうかを決める。
タイトルに興味惹かれなくても、冒頭引用部分で興味をひかれリンク先に飛ぶこともある。
引用部分がなくなったことで、それらができなくなった。
人気エントリーの画面ではサムネも引用も全てのエントリで表示されているのに。
ほんと糞リニューアルしてくれたもんだ。
はてブは便利だ。かれこれ使い続けて8年目になる。
それは2chをコピペしただけのデマまとめサイトがホットエントリとして頻繁に表示されてしまうことだ。
リンクをクリックしなければいいのだが、最近はタイトルだけで不快になるレベルのものも多い。
例えばここのところ、冷凍庫に入ったバイトをアップして炎上させる遊びがリア充の間で流行しているが、
「ハム速」というサイトはこういったものを毎回取り上げて、嫌でも目に付くタイトルで他人の個人情報を晒している。
しかし、はてなの運営はいつまで経っても非表示サイト機能を用意してくれないし、
こういったクソサイトを未だにブクマしてホッテントリ入りに貢献するはてなユーザーはあとを絶たない。
これらを弾くユーザースクリプトやユーザーCSSを書いてくれた人もいない。
仕方ないので、自分でまとめブログなどを除外するユーザーCSSを書いてみたら、恐ろしく快適になった。
とても便利なのでぜひ同志のはてブァーたちに使って欲しいのだが、
どこに公開していいか分からないので、とりあえず増田に投下してみることにした。
/* はてなブックマークから見たくないサイトを抹消＆シンプルな表示で快適にするユーザースタイルシート */ /* V1.16 2016/5/1 22:25更新 政経ワロスまとめニュース♪を追加 */ /* V1.15 2016/3/16 11:25更新 診断メーカーを追加 */ /* V1.14 2015/6/2 17:51更新 やらおん! の独自ドメインを追加 */ /* V1.13 2014/2/13 14:42更新 大艦巨砲主義! を追加 */ /* V1.12 2014/2/13 10:27更新 保守速報の JP ドメインを追加 */ /* V1.11 2014/2/10 17:34更新 キムチ速報、ネトウヨ速報、ネトウヨにゅーす、はぅわ!、あじあにゅーす2ちゃんねるの独自ドメインを追加 */ /* V1.10 2014/1/28 19:32更新 使えるニュース-2ch を追加、はてブの仕様変更により新着エントリのサムネイルが表示されなくなっていたのを修正 */ /* V1.09 2013/12/09 17:46更新 売国速報(^ω^)を追加 */ /* V1.08 2013/12/08 13:02更新 ば韓国いい加減にしろ速報を追加 */ /* V1.07 2013/8/19 02:11更新 2ちゃん的韓国ニュースを追加 */ /* V1.06 2013/8/16 12:36更新 あじあにゅーす2ちゃんねる、笑韓ブログを追加 */ /* V1.05 2013/8/16 09:57更新 検索結果のエントリ詳細をサイトに関係なく消した。そこが気に入らなければ「, div.entryinfo」という文字列を削除 */ /* V1.04 2013/8/16 09:46更新 政経chを追加 */ /* V1.03 2013/8/15 20:34更新 秒刊SUNDAYを追加 */ /* V1.02 2013/8/15 16:55更新 U-1速報のURL間違いを修正 */ /* V1.01 2013/8/15 15:49更新 やらおん!を入れ忘れるという致命的なミスを犯したので修正 */ /* はてブ全体に適用 */ @-moz-document url-prefix("http://b.hatena.ne.jp/") { /* ブロックしたいサイトのリンクを非表示 */ A[HREF*="j-cast.com"], A[HREF*="j-cast.com"] ~ cite, A[HREF*="getnews.jp"], A[HREF*="getnews.jp"] ~ cite, A[HREF*="yukawanet.com"], A[HREF*="yukawanet.com"] ~ cite, A[HREF*="0taku.livedoor.biz"], A[HREF*="0taku.livedoor.biz"] ~ cite, A[HREF*="hamusoku.com"], A[HREF*="hamusoku.com"] ~ cite, A[HREF*="alfalfa.com"], A[HREF*="alfalfa.com"] ~ cite, A[HREF*="hoshusokuhou.com"], A[HREF*="hoshusokuhou.com"] ~ cite, A[HREF*="hosyusokuhou.jp"], A[HREF*="hosyusokuhou.jp"] ~ cite, A[HREF*="wara2ch.com"], A[HREF*="wara2ch.com"] ~ cite, A[HREF*="fxya.blog129.fc2.com"], A[HREF*="fxya.blog129.fc2.com"] ~ cite, A[HREF*="asianews2ch.livedoor.biz"], A[HREF*="asianews2ch.livedoor.biz"] ~ cite, A[HREF*="jin115.com"], A[HREF*="jin115.com"] ~ cite, A[HREF*="esuteru.com"], A[HREF*="esuteru.com"] ~ cite, A[HREF*="yaraon.blog109.fc2.com"], A[HREF*="yaraon.blog109.fc2.com"] ~ cite, A[HREF*="yaraon-blog.com"], A[HREF*="yaraon-blog.com"] ~ cite, A[HREF*="kanasoku.info"], A[HREF*="kanasoku.info"] ~ cite, A[HREF*="u1sokuhou.ldblog.jp"], A[HREF*="u1sokuhou.ldblog.jp"] ~ cite, A[HREF*="newskorea"], A[HREF*="newskorea"] ~ cite, A[HREF*="news-us.jp"], A[HREF*="news-us.jp"] ~ cite, A[HREF*="tokuteishimasuta.com"], A[HREF*="tokuteishimasuta.com"] ~ cite, A[HREF*="dqnplus"], A[HREF*="dqnplus"] ~ cite, A[HREF*="bakankokunews.blog.fc2.com"], A[HREF*="bakankokunews.blog.fc2.com"] ~ cite, A[HREF*="treasonnews.doorblog.jp"], A[HREF*="treasonnews.doorblog.jp"] ~ cite, A[HREF*="now2chblog.blog55.fc2.com"], A[HREF*="now2chblog.blog55.fc2.com"] ~ cite, A[HREF*="kimsoku.com"], A[HREF*="kimsoku.com"] ~ cite, A[HREF*="uyosoku.com"], A[HREF*="uyosoku.com"] ~ cite, A[HREF*="netouyonews.net"], A[HREF*="netouyonews.net"] ~ cite, A[HREF*="asia-news.jp"], A[HREF*="asia-news.jp"] ~ cite, A[HREF*="rakukan"], A[HREF*="rakukan"] ~ cite, A[HREF*="nico3q3q"], A[HREF*="nico3q3q"] ~ cite, A[HREF*="military38"], A[HREF*="military38"] ~ cite, A[HREF*="shindanmaker.com"], A[HREF*="shindanmaker.com"] ~ cite, A[HREF*="seikeidouga.blog.jp"], A[HREF*="seikeidouga.blog.jp"] ~ cite, /* ブロックしたいサイトのファビコンを非表示 */ IMG[SRC*="j-cast.com"], IMG[SRC*="getnews.jp"], IMG[SRC*="yukawanet.com"], IMG[SRC*="0taku.livedoor.biz"], IMG[SRC*="hamusoku.com"], IMG[SRC*="alfalfa.com"], IMG[SRC*="hoshusokuhou.com"], IMG[SRC*="hosyusokuhou.jp"], IMG[SRC*="wara2ch.com"], IMG[SRC*="fxya.blog129.fc2.com"], IMG[SRC*="asianews2ch.livedoor.biz"], IMG[SRC*="jin115.com"], IMG[SRC*="esuteru.com"], IMG[SRC*="yaraon.blog109.fc2.com"], IMG[SRC*="yaraon-blog.com"], IMG[SRC*="kanasoku.info"], IMG[SRC*="u1sokuhou.ldblog.jp"], IMG[SRC*="newskorea"], IMG[SRC*="news-us.jp"], IMG[SRC*="tokuteishimasuta.com"], IMG[SRC*="dqnplus"], IMG[SRC*="bakankokunews.blog.fc2.com"], IMG[SRC*="treasonnews.doorblog.jp"], IMG[SRC*="now2chblog.blog55.fc2.com"], IMG[SRC*="kimsoku.com"], IMG[SRC*="uyosoku.com"], IMG[SRC*="netouyonews.net"], IMG[SRC*="asia-news.jp"], IMG[SRC*="rakukan"], IMG[SRC*="nico3q3q"], IMG[SRC*="military38"], IMG[SRC*="shindanmaker.com"], IMG[SRC*="seikeidouga.blog.jp"], /* トップページのエントリ詳細、メタ情報、タグ一覧、検索結果のエントリ詳細を非表示 */ li.description blockquote, ul.entry-meta li.tag, div.entryinfo { display: none !important; } } /* ------------------------------------------- */ /* 新ユーザーページ (インタレスト、マイホットエントリー他) に適用 */ @-moz-document url-prefix("http://b.hatena.ne.jp/(はてなユーザー名)/interest"), url-prefix("http://b.hatena.ne.jp/(はてなユーザー名)/favorite"), url("http://b.hatena.ne.jp/(はてなユーザー名)/") { /* エントリ詳細を非表示 */ .entry-summary, .detail { display: none !important; } /* エントリ詳細をなくした分、サムネイルやカラムを小さく */ .entry-feature-image a.capture img { max-width: 60px !important; } .main-entry-list .entry-block.entry-feature-image { min-height: 32px !important; padding-left: 80px !important; } .entry-feature-image .entry-image-block, .entry-feature-image a.capture { width: 60px !important; max-height: 50px !important; } /* お気に入りユーザーのエントリ一覧を非表示に */ .main-entry-list .entry-comment .entry-comment-fold { display: none !important; } }
設定内容はいずれも同じで、こんな感じにする。
/* はてブ全体に適用 */ /* ブロックしたいサイトのリンクを非表示 */ A[HREF*="j-cast.com"], A[HREF*="j-cast.com"] ~ cite, A[HREF*="getnews.jp"], A[HREF*="getnews.jp"] ~ cite, A[HREF*="yukawanet.com"], A[HREF*="yukawanet.com"] ~ cite, A[HREF*="0taku.livedoor.biz"], A[HREF*="0taku.livedoor.biz"] ~ cite, A[HREF*="hamusoku.com"], A[HREF*="hamusoku.com"] ~ cite, A[HREF*="alfalfa.com"], A[HREF*="alfalfa.com"] ~ cite, A[HREF*="hoshusokuhou.com"], A[HREF*="hoshusokuhou.com"] ~ cite, A[HREF*="hosyusokuhou.jp"], A[HREF*="hosyusokuhou.jp"] ~ cite, A[HREF*="wara2ch.com"], A[HREF*="wara2ch.com"] ~ cite, A[HREF*="fxya.blog129.fc2.com"], A[HREF*="fxya.blog129.fc2.com"] ~ cite, A[HREF*="asianews2ch.livedoor.biz"], A[HREF*="asianews2ch.livedoor.biz"] ~ cite, A[HREF*="jin115.com"], A[HREF*="jin115.com"] ~ cite, A[HREF*="esuteru.com"], A[HREF*="esuteru.com"] ~ cite, A[HREF*="yaraon.blog109.fc2.com"], A[HREF*="yaraon.blog109.fc2.com"] ~ cite, A[HREF*="yaraon-blog.com"], A[HREF*="yaraon-blog.com"] ~ cite, A[HREF*="kanasoku.info"], A[HREF*="kanasoku.info"] ~ cite, A[HREF*="u1sokuhou.ldblog.jp"], A[HREF*="u1sokuhou.ldblog.jp"] ~ cite, A[HREF*="newskorea"], A[HREF*="newskorea"] ~ cite, A[HREF*="news-us.jp"], A[HREF*="news-us.jp"] ~ cite, A[HREF*="tokuteishimasuta.com"], A[HREF*="tokuteishimasuta.com"] ~ cite, A[HREF*="dqnplus"], A[HREF*="dqnplus"] ~ cite, A[HREF*="bakankokunews.blog.fc2.com"], A[HREF*="bakankokunews.blog.fc2.com"] ~ cite, A[HREF*="treasonnews.doorblog.jp"], A[HREF*="treasonnews.doorblog.jp"] ~ cite, A[HREF*="now2chblog.blog55.fc2.com"], A[HREF*="now2chblog.blog55.fc2.com"] ~ cite, A[HREF*="kimsoku.com"], A[HREF*="kimsoku.com"] ~ cite, A[HREF*="uyosoku.com"], A[HREF*="uyosoku.com"] ~ cite, A[HREF*="netouyonews.net"], A[HREF*="netouyonews.net"] ~ cite, A[HREF*="asia-news.jp"], A[HREF*="asia-news.jp"] ~ cite, A[HREF*="rakukan"], A[HREF*="rakukan"] ~ cite, A[HREF*="nico3q3q"], A[HREF*="nico3q3q"] ~ cite, A[HREF*="military38"], A[HREF*="military38"] ~ cite, A[HREF*="shindanmaker.com"], A[HREF*="shindanmaker.com"] ~ cite, /* ブロックしたいサイトのファビコンを非表示 */ IMG[SRC*="j-cast.com"], IMG[SRC*="getnews.jp"], IMG[SRC*="yukawanet.com"], IMG[SRC*="0taku.livedoor.biz"], IMG[SRC*="hamusoku.com"], IMG[SRC*="alfalfa.com"], IMG[SRC*="hoshusokuhou.com"], IMG[SRC*="hosyusokuhou.jp"], IMG[SRC*="wara2ch.com"], IMG[SRC*="fxya.blog129.fc2.com"], IMG[SRC*="asianews2ch.livedoor.biz"], IMG[SRC*="jin115.com"], IMG[SRC*="esuteru.com"], IMG[SRC*="yaraon.blog109.fc2.com"], IMG[SRC*="yaraon-blog.com"], IMG[SRC*="kanasoku.info"], IMG[SRC*="u1sokuhou.ldblog.jp"], IMG[SRC*="newskorea"], IMG[SRC*="news-us.jp"], IMG[SRC*="tokuteishimasuta.com"], IMG[SRC*="dqnplus"], IMG[SRC*="bakankokunews.blog.fc2.com"], IMG[SRC*="treasonnews.doorblog.jp"], IMG[SRC*="now2chblog.blog55.fc2.com"], IMG[SRC*="kimsoku.com"], IMG[SRC*="uyosoku.com"], IMG[SRC*="netouyonews.net"], IMG[SRC*="asia-news.jp"], IMG[SRC*="rakukan"], IMG[SRC*="nico3q3q"], IMG[SRC*="military38"], IMG[SRC*="shindanmaker.com"], /* トップページのエントリ詳細、メタ情報、タグ一覧、検索結果のエントリ詳細を非表示 */ li.description blockquote, ul.entry-meta li.tag, div.entryinfo { display: none !important; }
/* 新ユーザーページ内 (インタレスト、マイホットエントリー他) に適用 */ /* エントリ詳細を非表示 */ .entry-summary, .detail { display: none !important; } /* エントリ詳細をなくした分、サムネイルやカラムを小さく */ .entry-feature-image a.capture img { max-width: 60px !important; } .main-entry-list .entry-block.entry-feature-image { min-height: 32px !important; padding-left: 80px !important; } .entry-feature-image .entry-image-block, .entry-feature-image a.capture { width: 60px !important; max-height: 50px !important; } /* お気に入りユーザーのエントリ一覧を非表示に */ .main-entry-list .entry-comment .entry-comment-fold { display: none !important; }
使い方が分からなければブコメかトラックバックで言ってくれたら補足するかも
字数がオーバーしていたことに気づいたので http://anond.hatelabo.jp/20140421135649 に続きます。
http://tpex.hateblo.jp/entry/b-hatena-user-css
なんかキャプチャのように広告が消えなかったので、素人ながら消してみたよ。
https://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css.css
.ad-rectangle, .ad-banner,
の2行を追加。
https://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css_2.css
.ads-entry, .ad-unit,
の2行を追加。
http://tpex.hateblo.jp/entry/b-hatena-user-css
なんかキャプチャのように広告が消えなかったので、素人ながら消してみたよ。
https://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css.css
.ad-rectangle, .ad-banner,
の2行を追加。
https://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css_2.css
.ads-entry, .ad-unit,
の2行を追加。
まったくの素人がNginx＋Bootstrap＋WordPressでWebサービスを作成しました。
オシャレエロサイト「h300」をリリースして、10万PV/日を捌くためにやったこと
http://d.hatena.ne.jp/inouetakuya/20120410/1334058296
http://anond.hatelabo.jp/20120914214121
http://anond.hatelabo.jp/20120930171125
--------------------------------------------------------------------------------------------------------
35歳 今は事務系の仕事をしてます。たまに運転。限りなくパートに近い労働条件ですが、
仕事がないよりはマシですので、続けているわけです。
前（5年ぐらい前）からWebサービスみたいなものを自分自身で作ることができたら楽しいだろうなぁと。
TwitterとかFacebookとか数回利用したことはあるけど、詳しいことはさっぱり。
朝6：00から夜18:00まで車を走らせてゴミ回収をしていた者です。
パッカー車って知ってますか。街でよく見かけるゴミ収集車のことです。
ドラッグストアとか回るんですよ。休憩時間は15分ぐらいなんですよ。一日。馬車馬のように働いていました。
そのパッカー車で物損事故を起こしてしまい、会社に居続けることはできなくなり仕事をやめました。
エロはもともと好きだったのですが、車を運転する以外の技術は持っていません。
何か手に技術を身につけたいと考えるようになりました。ただ３０歳も過ぎたおっさんにあまり時間はないので、
資源の集中を意識し時代の流れはパソコンだということで、始めたわけです。
はじめはHTML,CSSの本で基本的なホームページ制作を学ぶ。
-----------------------------------------------------------
Bootstrap
-----------------------------------------------------------
Webサービスを作るにはプログラミングが必要なことは知っていたけど、初めてみて暗号のように思える。
プログラミングの中でもPHPは簡単なのでしょうか？最近の流れからすると、Rubyなのでしょうけど、
PHPは自分の実現したいサービスが組み立てやすい気がします。
http://www.amazon.co.jp/gp/product/toc/479733245X/
foreachやif,forなどの基本的な使い方を身につける。
プログラムは結局小さいプログラムの集まりだとどこかに書いてあった。ことを思い出す。
PHPはベタのプログラムだどセキュリティ的に弱いということでPEARを使うように。
ほかのプログラミング言語は知りませんが、PHPerというらしい。
プログラムに慣れてくるとPEARライブラリなどのクラスに抵抗がなくなってきた。
それでも、オブジェクト指向という考え方を体で理解するまで時間がかかる。
----------------------------------------------------------
http://php.xenophy.com/index.html
http://kumicyou.sakura.ne.jp/php/index.html
http://www.amazon.co.jp/gp/product/toc/479733245X/
http://www.amazon.co.jp/gp/product/toc/4797367571/
----------------------------------------------------------
----------------------------------------------------------
Simple HTML DOMParser メモリーオーバー？が発生するので頻繁には使えない。
正規表現って便利ですよね。（preg_match("/ab/", $string);など）
Webサイトのどんな情報でも切り取ったり、貼りつけることができるので。
Web上で特定の情報を好きなように集めてきて、加工することができるスクレイピングを発見。
PHPでスクレイピングするにはどうしたらいいか考えるようになり、かなり時間を使いました。
該当URLのサイトマップからリンクページ（aタグ）をすべて取得する。
ページの中にあるエロ動画URLやサムネイル画像などをファイルへ出力。
$fp = fopen("/var/www/html/sample.txt", "a"); fwrite($fp, $title."\n"); fclose($fp); }
出力したファイルの中で重複データなどないように一つにまとめて使えるように加工する。
あらかじめCronで時間を指定してファイルの情報をデータベースへ投入。
これから欲しい情報は、著作権に気をつけながらスクレイピングして集めてくると楽しいなぁと思ってます。
自分でホームページを公開するためにはサーバーが必要なことは以前から知っていたのですが、具体的には手探り状態からで
サーバはレンタルサーバとか専用サーバなどいろいろあるのですね。
全部自分で管理しないといけないため、めんどくさい気がした。結局VPSサーバに。
スピードアップのためにやったこと。データベースとアプリケーションサーバを分ける。
データベース最適化、query_cache_sizeを設定したりなど。
http://anond.hatelabo.jp/20101203150748
ウェブ開発者のための、1時間でできるLAMP環境構築術（CentOS編）
http://tanaka.sakura.ad.jp/2011/05/centos-linux-apache-php-perl-mysql-lamp.html
定番のPHP MYSQL Apacheから調べていくとNginxというWebサーバが高速だという
記事が多いので、使ってみることに。
NginxだけではPHPは動かない。php-fpmをインストール。
------------------------------------------------------------------------------------
http://d.hatena.ne.jp/yoshi-ken/20120205
http://kray.jp/blog/wordpress-tuning/
http://server-setting.info/centos/apache-nginx-2-php-fpm-install.html
http://hara19.jp/archives/5817
http://tech.aainc.co.jp/archives/3022
------------------------------------------------------------------------------------
以上の記事でNginxのproxyを設定することができ、とても参考になりました。
どうにか既存のサイトをWordPressで作れないかと考えていたら、
WordPressは固定ページとブログ用のページを分けるテンプレート構造だと知る。
WordPressはindex.phpファイル一枚あれば動くらしく、ページを表示する優先順位があるらしい。
メインページ front-page.php → home.php → index.php
そのため、fromt-page.phpに自分で作ったSmartyをそのままコピペして,なんとか既存のサイトとWordPressをミックスさせることに。
詳しくは以下の本が参考になりました。
http://www.amazon.co.jp/gp/product/toc/479736758X/
WordPress奥が深いです。
途方にくれていたところ、CSSフレームワークのTwitter Bootstrapを知る。
HTMLに少し手を加えるだけで今っぽいデザインにできる。その分、余った時間をweb構築に集中することができる。
http://panpanwatch.net/douga.php
http://panpanwatch.net/newdmm.php
DMM動画の当日配信が開始されたコンテンツをDMMのapiから収集。
http://panpanwatch.net/?page_id=5382
ネット上のエロ更新情報を収集して表示。メインはWordPressで構築。
--------------------------------------------------------------------
常日頃からネットのエロにはお世話になっていたので、なんか恩返しではないですけど、
Webサービス作るまで、ずっとパソコンの前ばかりにいたので、
こんにちは。みなさまからのブクマとコメントを多数いただき、ありがとうございます。
いろいろご意見あると思いますが、大げさな嘘などは書いていないです。
PHPを理解するのも、こちらの本を一冊やれば、それなりに理解できるようになりました。
http://www.amazon.co.jp/gp/product/toc/479733245X/
次のサービスを作成するときは本格的なアプリケーションやソーシャルゲームなどやりたいなぁと
野望だけは持っています。ですけど、ずっとこのサイトだけに集中してきたので、今はパソコンから少しだけ距離を置くつもりです。
http://b.hatena.ne.jp/entrylist
以下をテキストファイルにコピペしてhatena.cssとかで保存。
safariだと環境設定の詳細のスタイルシートで選択すればマシになります。
/*********************************************************************************/
#container #main .box-wrap div ul.entry-vertical-4,
#container #main .box-wrap div ul.entry-vertical-3 {
background: none !important;
}
#container #main .box-wrap div ul.entry-vertical-3 li.entry-unit,
#container #main .box-wrap div ul.entry-vertical-4 li.entry-unit,
#container #main .box-wrap div ul.entry-vertical-3 li.ad-unit,
#container #main .box-wrap div ul.entry-vertical-4 li.ad-unit {
display: block !important;
}
#container #main .box-wrap div ul.entry-vertical-4 li.entry-unit,
#container #main .box-wrap div ul.entry-vertical-4 li.ad-unit,
#container #main .box-wrap div ul.entry-vertical-3 li.entry-unit,
#container #main .box-wrap div ul.entry-vertical-3 li.ad-unit {
width: auto !important;
}
#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents,
#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents {
border: none !important;
}
#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents a.thumbnail,
#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents a.thumbnail {
float: right !important;
padding: 0 0 0 20px !important;
}
#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents a.thumbnail img,
#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents a.thumbnail img {
max-width: 180px !important;
}
#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents h3,
#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents h3 {
clear: none !important;
}
#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents h3,
#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents h3 {
font-size: 20px !important;
}
#container #main .box-wrap div ul.entry-vertical-4 ul.entry-meta,
#container #main .box-wrap div ul.entry-vertical-3 ul.entry-meta {
border: none !important;
border-top: 1px dotted #ECECEC !important;
clear: both !important;
}
#container #main .box-wrap div ul.entry-vertical-4 ul.entry-meta li.tag,
#container #main .box-wrap div ul.entry-vertical-3 ul.entry-meta li.tag {
clear: none !important;
margin: 0 0 0 15px !important;
}
/*********************************************************************************/
Opera11.60から文字列上のマウスカーソルの形がI字カーソルに変わった
Operaを使ったことのない人にとっては「文字列上のカーソルがI字じゃなかったら何なの？」と思いだが、今までのOperaは文字列上もそうでない部分も同じ矢印カーソルだった。
body{
cursor:default; !important
}
このようなファイルをユーザースタイルシートとして設定する。分からないことがあったら以下のページを見るかググるかしよう。
関連ページ
マウスポインタの形状に関する私見 Website Usability Info
こんなチラ裏みたいなところに書くぐらいなら、はてなアイデアに投稿するか、直接メールするか、他社サービスに乗り換えるか、はてなに就職しろって話なんだろうけど、はてなアイデアは不具合の修正以外はまともに採用されることが殆ど無いし、直接メールは単なるクレーマー扱いされて終わり。はてなに就職は居住地域とスキルの問題で無理っぽい。他社サービス乗り換えはSBMというサービスの性質上、どうしてもユーザーが多いほうが情報が集まりやすいので(ほとんどがゴミだとしても)問題の根本解決にはならない。というわけで、ここに落書きする。
現在はてなブックマークでは設定できるカテゴリが8種類、社会や政治経済から、サブカル系の「おもしろ」まであるが、R-18カテゴリがない。表向きは規約で「不適切なブックマークは削除する」となってるが、一日何千件もあるブックマークから「不適切」を探しだして削除するなんて無理に決まってるし、削除される頃にはホッテントリになって衆目にさらされることになる。表向きエロ禁止のニコニコ動画ですらR-18のカテゴリタグでゾーニングしているというのに、はてなは何年もこの状態を放置している。エロ画像のまとめスレなんてゾーニングすべきだし、技術的にも不可能なわけでもないのに。
はてブにはブックマーク先のページから画像を引用してくる機能があるが、これも機械的に引用してくるため明らかに不適切な引用がみられる。例えばニュースサイトで他のニュースへのリンクのための画像を拾ってきたり、バナー広告画像を広ってくる場合もある。更に最初に上げたエロの問題では、明らかに閲覧注意のエログロ画像を拾ってくる場合もある。画像の判定なんて技術的に困難だろうから、せめて画像非表示をオプションで用意してくれてればいいのだがそれもやらない。俺はあまりにも不愉快だったので、ユーザースタイルシートで消したが、はっきり言って初心者(中級者にも？)対処が難しい。
はてブにはコメントが不愉快なIDを非表示にする機能があるが、コメントやID名が非表示になってもタグだけは表示されたままである。本来のタグクラウド的なものなら別になんともないが、非表示になるようなユーザーは大抵タグもおかしい。タグで特定の組織や人物へのネガキャンをやっていたり、タグで誹謗中傷のような事を書いている。これも技術的に不可能とは思えないが、何年も放置されている。これもユーザースタイルシートなりグリモンなりを使えばいいのだろうが、中級から下のユーザーには無理だ。
SBMの性質上、どうしてもノイズ的なブックマークや見たくないページ・キーワードも目に入ってしまう。例えば2chまとめサイトや産経msn、ネトウヨ/ネトサヨのブログなどがホッテントリになることが多い。正直なところタイトルを見ただけでうんざりすることも多いので非表示にしたいのだが、そのようなオプションはない。これもグリモンで対処するしか無いのだが、こんなの標準とは言わなくてもせてめ有料ユーザー向けのオプションとかでつけるべきじゃない？ニコ動にだってNGワード機能はあるんだから。
はてなスターははてブ大喜利のための座布団で一番の売りの機能なのだが、これもいろいろおかしい。一人で10個も20個も連打する奴もいるし、非表示ユーザーからも送られてくる。非表示ユーザーからのスターなんて不愉快なのだが現状拒否することはできない。
まずはてなはすべてのサービスにおいて非常にSPAMに対して脆弱。はてなダイアリーはそうでもないが、はてなハイクはほとんどSPAM対策なんかされていない。さらに規約違反報告フォームも何処にあるのかわかりにくい。はてブには一応規約違反フォームへのリンクがあるが、これって機能してるんだろうか？。何回かSPAM報告をしてるんだが全然対処されたことがない。断っておくが別に俺が気に入らないからSPAM扱いしているわけではなく、明らかにSEO用のリンクページへのブックマークや、複数アカウントの不正使用っぽいものを報告しているのだが全然対処されたことがない。
また、はてなにはサブアカウント機能があるがこれも悪用しようと思えばいくらでも悪用できる。5件ぐらいサブ垢でブックマークすればトップの新着には載るので、botなんかを使えば簡単にホッテントリを偽造できる。
以上の点から初心者やビジネスユーザーには非常に不向き。だってエロ画像とかネトウヨ/ネトサヨの演説とかが転がってて、2chまとめサイトや産経msnばかりがホッテントリになっていて、SPAMもいっぱい上がってるSBMを仕事で使える？そんなの自分の母親に勧められる？俺はすすめられないし、仕事ではGoogleブックマークを使ってる。
近藤淳也氏は「自分の家族や友人に安心して進められるサービス」を標榜しておられるようだけど、今のはてなブックマークはとてもじゃないがそんなサービスではない。ギークやネット原住民(笑)相手に商売するならいいんだろうけど。ニコ動だって最初は2chにいるようなネット原住民(笑)を相手にしてたけど、今はアメーバやGreeにいるような人も相手にするようになった。まあ、ニコ動はニコ動で違う問題があるけれど。
ここで「いやなら使うな」というマジックワードが登場しそうだが、別に嫌なんじゃなくて改善してほしいのだ。しかし最近のはてブの仕様変更といえば新着人気ブコメの表示とかなんか斜め上の方向の仕様変更ばかりだ。
プログラミング言語ヒエラルキーにおける罵倒 http://anond.hatelabo.jp/20070502200124
phpのいやなところ / perlのいやなところ http://anond.hatelabo.jp/20070522174725
LL編プログラミング言語ヒエラルキーにおける罵倒 http://anond.hatelabo.jp/20070503000905
1年くらい前にKENTWEBでCGIを覚えた私はどれくらい時代にとり残されているんだろう http://anond.hatelabo.jp/20070427114039
PHPで自称ギークとかアホか。 http://anond.hatelabo.jp/20080527201030
文系の大学出身の人が気軽にプログラマになることはお勧めしません。 http://anond.hatelabo.jp/20080830010043
[Perl][PHP][Python][Ruby] 無題 http://anond.hatelabo.jp/20080731154801
プログラミング始めてみた(笑) http://anond.hatelabo.jp/20080201185253
日本が誇るスゴ腕geekの紹介 http://anond.hatelabo.jp/20090102145542
PHPの比較の素晴らしさ加減は正常 http://anond.hatelabo.jp/20090617130518
言語による分野の住み分けがすでにできてるんだよ http://anond.hatelabo.jp/20110220120714
なぜJavaの求人が多いのか考えよう。 http://anond.hatelabo.jp/20110220101806
LL言語が後退局面に差し掛かっている件 http://anond.hatelabo.jp/20110210084023
これからweb開発に携わりたいと考えている人にお勧めの言語 http://beta.anond.hatelabo.jp/20110220013933
凍ったニシキヘビと凍えた番人 http://anond.hatelabo.jp/20120122211537
webフレームワークの王道としての役目を終えつつあるRails http://anond.hatelabo.jp/20130302013734
ついに顕在化しはじめた「Perlリスク」 http://anond.hatelabo.jp/20130228002211
なぜ国内でPerlが急速に萎んだのか http://anond.hatelabo.jp/20130307004741
※はてな匿名ダイアリーの標準スタイルシートでデコるバッドノウハウ http://anond.hatelabo.jp/20100827202157
pタグやdivタグのclass要素を指定できるのでHTMLでそのまま記述する。
いつくかはてなダイアリーでの使用可能なはてな記法は無効になっており、例えばキーワードリンク無効記法が使えないためフォントカラーが キーワードリンクの黒に潰されちゃうかんじ。
以下サンプル。アルファベットはクラス名(自動アンカーついていててコピペしにくい。ソースみたほうがいいかも)。
初めてサイトを作りたいと思ったとき、誰しもまず調べた瞬間htmlとかいうものに出会う。
でも＜html＞＜head＞だののタグをずらずら見た時点で大概覚えようとするのを挫折したはず。
あれは真性の初心者にとって難解すぎる。例えば簡単な文字を羅列するだけでも
＜html＞＜head＞＜body＞＜br＞＜/body＞＜/head＞＜html＞とワケワカランタグが多い。
しかも漸く出来たコレだけの文字羅列を見たところで、到底WWWで見られる美しいデザインとの程遠さに絶望する。
どうやったって一ヶ月頑張っても無理だろ！みたいな。
だから初心者にはホームページビルダーのような作成ソフトを渡したほうが早いと思う。
構文が汚いとかそんなことよりも、まず紙の上に絵を描くような感覚でイラストや文字を入れられるし
実際最初から手打ちして作った猛者より作成ソフト使用した数のほうが多いはず。
最初は構文なんて覚えなくても、とりあえずサイトがそこそこ見栄えよく初心者だって出来る！という
達成感でサイト作成という事象に興味をもてるようになればいい。
そのうち他のサイトを見て、こういうデザイン入れたいなと思って自ずと向上心が湧く。
例えばテーブル組んだりスクロールバーの色を変えたりフレームのボーダーラインを消したり拍手設置しようとしたり･･･。
そこでcssやJavaScriptやperl（cgiやphp）に興味が湧きだす。コピペしたりしてサイトへ貼り付ける。
そうやっているうちにcssやJavaScriptって外部スタイルシートや.jsとして別ファイルに分けられるんだ！とか知り
ここらへんでhtml、cssのタグの意味を何となく理解出来るようになっているという。
更にはCMSに手を出して･･･
気が付くとホームページビルダーは使わずterapadかなんかでソース手打ちし、綺麗さとかに気を配れるようになる。
これって一から英語の授業を受けるより、アメリカ本国へ何年か住み続けるうちに何となく英語理解するのに似てる気がする。
初心者の為といっていきなりタグ記述テンプレのサイトを見せて学べというのは、実のところ実用的ではない。
最近だったらレンタルブログもそう。とっかかりはレンタルブログでもいいが→
テンプレートを使っていても徐々にテンプレートを少し変えたいと思い調べる→
鯖の仕組みを理解する→以下続く
みたいな流れで自学学習していく。
学校で学ぶ人ならまだしも、例えば同人サイトを自分も作りたい！とか店の商用サイトを作りたい！とか
本格的に勉強はしたくないけど興味と意欲をそこそこもっている初心者サイレントマジョリティ層には
ホームページ作成ソフトを渡すのが一番ある意味「初心者の為のTIPS」だと自分は思う。
最近マークアップエンジニア志望の若者と話す機会が多いのだけれど、そこで気づかされるのは、彼らの中に過去のHTML（特に90年代以前の仕様）を読んだことのあるという人が、驚くほど少ないことだ。
例えば「マーク・アンドリーセンをどう思う？」と聞くと、「アンドリーセンって誰ですか？」という答えが返ってくる。「ヨスケの独自要素で何が一番好き？」と聞くと、「見たことがありません」と言われてしまう。「ではきみは、昔のHTMLを見たことがあるの？」と聞くと、たいていが「とほほでやっていたものくらいなら……」という答えしか返ってこない。
今の若い人の間では、HTMLを体系的にとらえようという人は少ないようだ。見るのは専ら近年の話題仕様ばかりで、歴史を辿ってみたり、系譜をひもといて標準化団体ごと理解しようとする人はほとんどいない。
これは、ちょっと由々しき問題だと思わされた。HTMLは、もう長いこと（90年代の早い時期から）インターネットの王者としてあらゆるWeb関連技術の上に君臨してきた。だから、Webを作ることを仕事にしたいなら、何をするにせよ避けて通ることはできない。
HTMLは、表・画像・フォーム・音楽・デザイン・フレーム・動画など、さまざまな分野においてその時代々々に達成された最新の成果を持ち寄るようにして作られてきたところがある。だから、HTMLを読まずして現代のインターネットは語れないと言ってもいいくらいだ。
もし何かクリエイティブなことをしたいのなら、HTMLを読むことは欠かせない。また、単に読むだけではなく、それを包括的・体系的にとらえることも必要だ。なぜなら、HTMLを包括的・体系的にとらえることによって、現代のインターネットそのものを、包括的・体系的にとらえられるようになるからだ。そしてそうなれば、Webを作ることの道理や筋道が理解でき、何かクリエイティブなことをする上で、大きな助けとなるからである。
そこでここでは、昔のHTMLをほとんど見たことがないという人や、あるいはHTMLそのものもあまり見ないという人のために、これを見ればHTMLを体系的に理解でき、現代インターネットの成り立ちや実相までをも包括的にとらえることができるようになる、7本の仕様を紹介する。
ここで紹介するHTMLは、いずれも後のWeb業界に決定的な影響を与えたものばかりだ。これらが、HTMLという標準のありようや方向性を決定づけた。この7本を見れば、HTMLというのはどのようなきっかけで生まれ、どのような変遷を辿って、どのような足跡を残してきたかというのが、体系的に理解できるようになる。そしてそれが、世界のインターネット利用シーンにどのような影響を及ぼしてきたかということも、知ることができるようになるのだ。
まず最初は、ちょっと強引かも知れないけれど、第一次ブラウザ戦争前のHTMLをひとまとめにするところから始める。
80年代末にティム・バナーズ＝リーの発明したHTMLというメディアは、その後『HTML 1.0』（1993年）『HTML+』（1994年）『HTML 2.0』（1995年）などの仕様で次第にそのスタイルを確立していき、マーク・アンドリーセンが一大産業として発展させた後、『HTML 3.0』に行き着く。そして幸運なことに、ここに集大成されるのだ。
ブラウザ戦争前のHTMLは、これ1本だけ読めば良い。このHTMLに、戦前のHTMLの全ての要素（属性）が詰まっている。このHTMLを見れば、HTMLのインターネットの王者としての風格、スターという存在の大きさ、作者以上にブラウザが重視される「産業」としての側面、お尻Pから終了タグ省略可へ・文字情報から画像付きへと移り変わった技術革新の変遷など、戦前のHTML史やWeb業界のありようが全て分かるのだ。
このHTMLの魅力は、説明し始めるといくら紙幅があっても足りないので、ここではその一端を紹介するにとどめておく……といっても、気の利いたことを言えるわけではない。『HTML 3.0』の魅力を知るには、まずは読んでもらうこと――これに尽きるからだ。そして、もし一度でも読めば、その魅力はたちどころに理解できるだろう。
『HTML 3.0』を見て驚かされるのは、現在のHTMLと比べても全く遜色ないところである。破棄されてから14年の時が経過しているが、現代人の読解にも当たり前のように堪えうるのだ。それは、逆にいえばHTMLというものは、今から14年前、つまりこの『HTML 3.0』が作られた時点で、様式として一つの完成を見たということでもある。
『HTML 3.0』は、HTMLという標準が到達しようとした一つの極みである。それゆえ、HTML史というものは、『HTML 3.0』以前と以降とで分けられるようになった。これ以降に作られたHTMLで、『HTML 3.0』の影響を免れたものはないからである。
iモードが世界のHTML史に与えた影響というのは、一般に理解されているよりもはるかに小さなものである。日本人というのは、「日本の技術が世界に影響を与えた」というと、なぜか鼻高々と聞いてしまうところがある。「日本はガラパゴス」という言葉は聞いたことがあっても、「それって日本人が過小評価しているだけじゃないの？」と、眉に唾をしてとらえるところがある。
しかしiモードは、真に日本のHTML史を塗り替えたサービスの一つである。特に、このサービスの後世に与えた影響には、本当に計り知れない大きさがある。
iモードは、ドコモのメインストリームだったポケットベルが、それまでの栄華の反動で深刻な低迷期に陥っていたPHS流行後すぐの時期、そんなポケットベルに取って代わって、日本で最も輝いていた携帯サービスであった。それゆえ、広末に見蕩れた世界のHTMLファンたちは、iモードのWebサイトを見ることによって、失われかけていたWeb制作の魅力を再発見することにもなったのである。
iモードは、没落したHDMLに変わってモバイルWebの命脈をつなぎ止めた、言うならば救世主のような存在であった。海外のモバイル陣営が営々と築きあげてきたそれまでの栄光を切り捨て、日本の後代へと引き継いだ重要なリレー第一走者としての役割を、HTML史において担ったのである。
そして、そのバトンを受け取った日本の若きWebデザイナーたちが、2000年代に入って雨後の竹の子のように現れたことで、モバイルWebは鮮やかな発展を遂げる。だから、もしiモードが存在しなければ、HTMLの様相は今とは違ったものになっていたかもしれないのだ。
そんなiモードHTMLのバージョンはいくつもあるのだが、中でも特に多くのHTMLファンを――取り分け日本の若きWebデザイナーたちを魅了したのが、この『Compact HTML』である。この仕様の一番の魅力は、なんといってもその大胆に構築されたW3C Noteであろう。HTML史において、これほど拡張多く適当なディテールで構成されたNoteは他にない。そのためこのNoteは、これ以降無数に手本とされ、真似され、拡張されることとなるのである。
正字正仮名の影響を受けた日本の若き日記書きたち――言うなれば「CSSコミュニティ」――が頭角を現す直前のW3Cで、HTML史に乾坤一擲の巨大な爪痕を残した1本の仕様が誕生する。
この時期、情報技術の進歩によって、HTMLにもさまざまな新しいテクノロジーがもらたされていたのだが、それらを十全に取り入れたばかりではなく、縦横に駆使することによって、これまでとは全く違った国際化、全く違ったアクセシビリティ体験を生み出すことに成功したのが、この仕様『HTML 4.0』を勧告したWorld Wide Web Consortiumである。
『HTML 4.0』は、HTML史において最も革新的な仕様の一つとなった。この仕様に初めて触れた当時のWebデザイナーたちは、そのあまりの目新しさに度肝を抜かれた。そこでは、これまで全く見たことのないマークアップがくり広げられていた。そのため、これまで想像さえしたことのなかった全く新しいHTML体験を、そこで味わうことになったからである。
W3Cの果たした一番の功績は、テクノロジーとHTMLを見事な調和をもって融合させたことだろう。例えばそこでは、「スタイルシート」という新しい技術のデザインと、それでレイアウトされたページが閲覧者に与える独特の感覚というものを、双方ともに熟知していた。だから、それらを効果的に融合させることによって、全く新しいHTML体験を生み出すことができたのである。
この仕様『HTML 4.0』には、そうしたテクノロジーとHTMLとの融合が、至るところに散見できる。その数の多さとクオリティの高さによって、HTMLはここに、新しい時代の幕開けを迎えるに至ったのである。
先に述べた「CSSコミュニティ」がWeb日記業界に論争をもたらすのは、2000年代に入ってからのことである。そして、そのきっかけとなったできごとの一つが、1947年生まれの非政府組織で、IECとも協力した生粋の工業標準化団体であった国際標準化機構が、この仕様『ISO/IEC 15445:2000 (ISO-HTML)』によって成功を収めたことである。
このHTMLは、単にJIS的に標準化しただけではなく、文化的な意味においても、フラットでリニアな構造の力を広く世界に知らしめることとなった。この仕様の成功によって、世界の人々は、レベル付けされた見出しの魅力の大きさを知る。そしてそれが、やがて見出しのレベル分けが世界のスタンダードとなり、誰もが当たり前のように使う状況を育んでいくのである。
またこの仕様は、CSSコミュニティそのものにも大きな影響を与えた。この仕様の成功に刺激を受けた才能ある若きコミュニティ住人たちが、その後立て続けに台頭し、いくつもの名サイトを生み出していくからである。
それらが相まって、やがてCSSコミュニティは空前の黄金時代を迎えることになる。その端緒となり、道筋を切り開いたのが、他ならぬこの『ISO-HTML』なのだ。
『HTML 4.0』で繁栄の足がかりを築いたW3Cは、この仕様『XHTML 1.0』によって、ついにその栄華の頂点に達する。そして、それを成し遂げたメタ言語も、W3C勧告のの一つであり、また『HTML 4.0』を作ったSGMLの改良でもあった、Extensible Markup Languageであった。
この勧告は、史上最も商業的に成功した仕様となる。そのためこれ以降、この勧告にならって商業的バズワードを盛り込んだ仕様が数多く作られるようになり、しかもそれらが、実際に大きな商業的話題を集めていくのだ。すると、そこで生み出された多くの意見は、やがて再びW3Cに還元され、さらなる発展をもたらすことにもつながった。
そんなふうに、この仕様がきっかけとなってW3Cにもたらされた意見は、HTMLという言語を変革させていくことになるのだが、それに伴って、HTMLそのものにも大きな革新をもたらすことになる。
その変革も、他ならぬW3Cの手によってなされた。ここで『XHTML 1.0』の成功によって手にしたメンバーをもとに創設した文書マークアップの開発集団「HTML Working Group」が、より魅力的な拡張性を追求していく中で、やがてM12n（モジュール化）という技術の開発に至るのである。するとそれが、これまでのHTMLを一変させたのだ。
M12nは、HTMLに魅力的かつ効果的な特殊語彙を、DTDでしかも複雑怪奇にもたらすことに成功した。おかげでそれは、あっという間に世界から見捨てられていった。そのため今では、M12nの使われているHTMLを探す方が難しくなったくらいだ。それくらい、この『XHTML 1.0』がWeb業界にもたらした変革には、大きなものがあったのである。
2000年代以降、繁栄を謳歌したW3Cは、しかしその栄華の大きさゆえ、00年代中盤に入るとそれを存続させることに力をそがれてしまい、革新的な仕様はなかなか生まれてこなくなった。
しかし、そんな時代が5年は続いた00年代の後半になって、今度はその栄華のただ中で育った新しい世代のHTML WGメンバーたちが台頭してくることにより、再び変革の時を迎えることとなる。
その新しい世代のHTML WGメンバーとは、マイクロソフトやモジラ・ファンデーション、オペラらに代表される「ブラウザベンダ」と、無関係な編集者たちであった。
彼らに共通するのは、文書構造に不必要なものなら全て――とるに足らないガジェット的なものまで含めて――残らず切り離そうとする「オタク的な性質」を持っていたことだ。
彼らは、それまで見過ごされがちだったHTMLの些末な要素にスポットを当て、それを別仕様に押し出すことで、従前とは一風変わった、新たな魅力を持った草案を生み出していった。そして、その真打ち的な存在として00年代の後半に登場したのが、XHTML2 Working Groupだ。
XHTML2 WGは、特に99年に最後の草案が作られたこの仕様『XHTML 2.0』によって、オタク的なHTMLの楽しみ方が、一部のマニアだけにとどまり、それ以外の多くの人たちには受け入れられないことを証明してみせた。この失敗が、デ・ファクト的な新生HTML WGにさらなる脚光を浴びせることになったのはもちろん、それに影響を受けたWeb WorkersやDOM Level 3 Eventsといった、次世代のWeb標準たちの誕生にもつながっていったのである。
最後は、第二次ブラウザ戦争の集大成ともいえるこの仕様である。
『HTML5』は、HTML史においては『HTML 3.0』と同じような意味を持つ。つまり、それまでのHTMLの要素が全て詰まっているのだ。この仕様を見れば、それ以前のHTMLの歴史というものが全部分かる。
『HTML5』には、HTMLのあらゆる要素が詰まっている。ここには、『HTML 3.0』のような歴史的な仕様としての「総合性」があり、『Compact HTML』のような「実装の実在さ」がある。『HTML 4.0』のような「マルチメディアとアクセシビリティの融合」があり、『ISO-HTML』のように「セクション構造の魅力を全世界に知らしめ」た。また、『XHTML 1.0』のように「バズワード的に成功」したのはもちろん、『XHTML 2.0』が別仕様に押し出した「オタク的ガジェット」にも満ちている。
全て詰まっているのだ。なんでもあるのである。つまりこのHTMLは、『HTML 3.0』と全く同じ意味合いを持っているのだ。HTML史というものは、『HTML5』以前と以降とで分けられる。これ以降に作られるHTMLで、『HTML5』の影響を免れるものはないであろうからである。
以上、これさえ読めばHTMLを包括的・体系的にとらえることができる7本の仕様を、制作された年代順に紹介した。
こうして見ると面白いのは、歴史的に重要な仕様は、必ずしも定期的に現れるのではなく、あるところでは連続しているし、あるところでは長らくなかったりすることだ。それはまるで「素数の分布」のようだ。一見規則性はないように見えるものの、何かしらの法則が隠されているようでもあり、興味深い。
それから、ここに挙げた仕様は、いずれも「読むことによって他の仕様にも興味が移行する」ということを念頭に選んだ。
例えば、『HTML 3.0』を読んだならば、ブラウザ戦争前夜の独自HTML拡張に自然と興味がいくだろうし、『Compact HTML』を読んだなら、iモードのそれ以外のバージョンのHTMLも見たくなるだろう。CSSコミュニティについてもそれは言えるし、『ISO-HTML』を読んだなら、このHTMLを流行らす土壌ともなった「フラットでリニアな構造」というムーブメントにも自然と興味がわくはずだ。さらには、『XHTML 1.0』はXMLオタクになるきっかけになるだろうし、『XHTML 2.0』はその他の「オタク的なXML EventsやXForms」の仕様も見たくなるという効果を持っている。
ただし、最後に選んだ『HTML5』だけは、こうした例とは別に考えなければならないかも知れない。なぜならこのHTMLは、完成度があまりにも高いために、これを見た後に他のHTMLを読むと、どうしても物足りなく感じてしまうからだ。
しかしいずれにしろ、これらの仕様を読むことによって、HTMLをさらに愛さずにいられなくなるのは疑いない。そしてまた、これらの仕様を読むことによって、HTMLを包括的・体系的に見る目を養ってもらえれば、その後のクリエィティブな活動にも、大きな助けとなるはずだ。
上に挙げた仕様への理解は、以下に紹介する著作を読むことによって、さらに深まる。これらを読むことによって、ぼくは「HTMLを体系的に見るとはどういうことか」を学んできた。
高校時代に読んだこのサイトによって、「リソースとは何か」ということを、ぼくはを知った。
「HTMLはSGMLの応用だ」ということが、このサイトを読むことでよく分かる。何気なく見ていた省略記法でも、その裏には、実にさまざまな技術や、それを開発してきた歴史というものが隠されていた。
世界がCSSコミュニティの何に驚かされたかといえば、それはやっぱり精緻に書き込まれた正字正仮名にだ。ノジタンの日記には、HTMLの本質が詰まっている。だからこそ、あれだけ多くの日記で多くのコミュニティ住人に、言及されたり模倣されたりしたのだ。
ここでは取りあげられなかったのだが、とほほ氏がHTMLというジャンルに及ぼした影響にも、本当に大きなものがある。そして、ぼくが上に挙げた感想のいくつかは、このサイトに書かれていたばけらさんとの「スタイルシート論争」を参考にしたものなのだ。
これらのサイトを読めば、どんなHTMLが素晴らしく、どんなHTMLがそうではないというのが、よく分かる。その判定基準を知ることができ、審美眼を養うことができるのだ。なにしろ、あのCSSコミュニティ住人の言うことなのだ。これにまさる教科書は、他にはない。
【元ネタ】
こういう場合、
ともかく長文をだらだら書かれるよりはずっといい。そもそも各記事の間が明確に分かれていない増田では。
この後コピペされることを期待するなら（元記事は増田へのコピペだがオリジナルだか知らんが、充分それを意識しているように見える）、はてな記法は不便なだけであるな。
それを言ったら普通のHTMLも同じでは。プレーンテキストでコピペされる事を想定しなければならないなら、それはマークアップではなく、文章を書くときにそう作らなければ無理。タグが重要である情報をコピペするときは、ソースを表示してソースまるごとコピペすべき。はてな記法は記法をHTMLに変換しているだけだよ。だから結果は普通のHTMLで表示される。
プレーンテキストよりも、ずっと情報量が増す。その重要性が理解できない場合は、ちょっとマークアップ言語をキーワードに調べてみて。
