サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
www.lucky-bag.com
お約束ですが、生きてます。 さて、ここに書くのは約2年振りと久しぶりですが、そうです、宣伝です。3ping.org、Vicuna CMSの市瀬さん、hxxk.jpの真琴さん、そして福島の3人の共著である「実践 Web Standards Design」ですが、この度、技術評論社さんの電子出版サービス「Gihyo Digital Publishing(GDP)」からEPUBで販売されることになりました。規格としてはEPUB3になります。 タイトル [改訂新版]実践 Web Standards Design - Web標準の基本とCSSレイアウト&Tips 著者 市瀬裕哉, 福島英児, 望月真琴 発売日 2011年10月3日 価格 2,500円 今回の電子書籍版は、書籍版のXHTML1.x + CSS2.1というベースは変わりませんが、新たにHTML5やCSS3などについても追記していますので
しましたというか、してました。 10月1日付けでネイバージャパン株式会社に入社してそろそろ1ヶ月が経ちます。前職で色々とあった時に良いタイミングでお声をかけていただき、B to Cを経験したかったってことや、見学させていただいた会社の環境も良かったこともあり、とんとんと話が決まって入社することになりました。色々とやらなければいけないことは山積みですが、焦らず気負わずに自分の力を発揮していければと思っています。 NAVERには普通の検索だけでなく、クリックだけで検索できるスマートファインダーや、写真の加工がブラウザ上でできるフォトエディターなど色々と便利なサービスがあります。また、今後も色々とリリースする予定ですので、ぜひ一度使ってみてください :) 探しあう検索NAVER(ネイバー)
今見ているページを、右クリックからIETesterでバージョン指定して開けたらなあと思ってTwitterで呟いたら、akzさんに「Launchy」で出来そうって教えて頂いた。 @e_luck URLを外部アプリに渡す拡張だったらLaunchyってのがあったんですけどもう開発止まってるみたいですね https://addons.mozilla.org/ja/firefox/addon/81 @e_luck あとバージョン指定は引数渡してやればいけそうです http://tinyurl.com/cd8a2f それ頂きっす!ということで、Launchyを使って今見ているページをIETesterで任意のIEバージョンを指定して開く方法をメモっとく。 Launchyのインストール Launchyは、リンクなどを任意のアプリケーションを指定して開けるようにする拡張。3年ほど開発止まってるみたいだけど、
前回の記事で宣言した通り、TypePad Connectを導入した。実は、あの後すぐにコードを組み込んでみたんだけど、何故かコメントフォームが表示されなくて一回断念した経緯がある。んで、今日、Six Apartの中の人である2xupのgoyaさんにメッセンジャで手取り足取り教えて貰いながらなんとか導入でけた。やっぱ持つべきものは親身になってくれる友人ですわ。つう訳で、これはブロギってフィードバックしとく。一応、以下の内容は2009年1月19日現在のTypePad Connect上の説明を前提とした話です。 古いMTのコメントを表示させるためのTypePad Connectのコード TypePad - Dashboardから、手順に沿ってTypePad ConnectのスクリプトをMTのテンプレートに組み込んでインストールする訳だけど、MTで直接コメントされた古いコメントも表示させようと思う
IE で閲覧するとアナログって出るようにするネタに乗っかって、IE で閲覧すると全部モノクロで表示させるようにするのはどうか的なネタ。一応、スターハック使って IE6 だけ。 * html { filter: gray; } レンダリング重くなる :P Twitter / hamashun: IE6を使って閲覧すると右上に『アナログ』って出るよ ... IE6で閲覧すると。|CSS HappyLife
2008 年 6 月 10 日に九天社が倒産したことによって絶版となっていた「実践 Web Standards Design」ですが、この度、技術評論社より再刊行の運びとなりました。撮り下ろしのホップがイカしてます。 書名:実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips 体裁:B5変形判・448 ページ 価格:定価3360円(本体3200円) ISBN:978-4-7741-3684-4 店頭発売日:11月29日 発行日:平成21年1月5日 再刊行にあたり、全編に渡って見直し、加筆・修正しています。7 章などのTipsについても、2008 年現在最新のブラウザで再検証しました。意外にOperaが 9.2x 以前と 9.5x 以降で微妙に変わってるものがあったりして、その辺りについても簡単に追記しました。ちなみに、IE については IE8 Beta
SGMLを元としたHTMLを、XMLベースで再定義したしたモノがXHTMLです。XML文書なので、XML宣言の記述はデフォルト文字コードのUTF-8とUTF-16以外は必須とされています。XML宣言は<?xmlで始まり?>で終わる記述で、属性としては以下の3点があります。 version 属性 encoding 属性 standalone 属性 version 属性についてはその文書のxmlバージョン、encoding 属性についてはその文書の文字コードを記述をすれば良いのは分かるのですが、standalone 属性については、自分的に曖昧だったので調べたメモとして記しておきます。 standalone 属性とは XMLはXMLプロセッサ(パーサ)と言われる解析装置によって、内部・外部DTDを参照することで、その文書の妥当性の検証を行うことができます。standalone 属性にはyesか
子孫セレクタをうまく使うことで、スタイルのためだけに ID や クラスを付与することなんかを避けることが出来るわけだけど、状況によっては深い階層の要素を指定するために子孫セレクタがとんでもなく長くなる場合がある。例えば、最近見た他人が書いたコードで一番長かった子孫セレクタなんかは、こんな感じ。 #content-body div.collapsing-block.pseudo-collapsed .collapsing-btns .toggle-collapse { property: value; } 基本的に、セレクタ内には空白文字を挿入することが可能なんだけど、改行やインデントも空白文字のひとつに含まれる。そこで、長いセレクタに改行、インデントをうまく使うことで、視認性を高めることができるかもよってのが今回のアイデア。上記の長い子孫セレクタに改行・インデントを取り入れてみると、こんな
2008 年 1 月 12 日に技術評論社より刊行される「Web標準テキスト」シリーズ 3 冊のうち、「(2)CSS」の執筆を担当させていただきしました。「Web標準テキスト」シリーズは、大藤さんが執筆された「HTML/XHTML」、古旗さんが執筆された「DOM Scripting」、そして僕が執筆した「CSS」の3冊で構成されており、それぞれ基礎から丁寧に解説しています。書店で見かけたら、是非とも手にとってご覧になってみてください。 Web標準テキスト(1) DOM Scripting 古旗 一浩 Web標準テキスト(2) CSS 福島英児 Web標準テキスト(3) HTML/XHTML 大藤 幹 「Web標準テキスト(2) CSS」について 今回執筆させていただいた「Web標準テキスト(2) CSS」は、これから CSS を学びたい方や、オーサリングソフトの WYSWYG だけでなくハ
CSS による段組レイアウト 文書構造を極力いじらずにレイアウトを変更できるようなフレームワーク。 以下の各サンプルでは分かりやすいように head 要素内の style 要素でスタイルを指定、先頭で defaultReset.css と common.css をインポート。 実際に使用する際には、style 要素ではなく link 要素で core.css などにリンクして、そこに defaultReset.css などとともに layout.css としてインポート。 この文書の詳細については、「CSSによる段組レイアウトのフレームワーク」を参照してください。 2 カラム 文書構造は以下の通り。メイン、サブの順番。 div.container -div#head -div.content --div#mainContent ---div.section --div#subContent
CSS による段組レイアウトを実現するには、float プロパティか position プロパティのどちらかを使った方法を選択することになると思うのだけれども、 float 派の自分としては position を使った方法の利点・欠点を知っておかなければと思ったんで、float で作ったのと同じように position でも段組レイアウトを作ったみた。せっかくだから、それらレイアウトをまとめた CSS フレームワークを公開します。 CSS による段組レイアウト ちなみに、各レイアウトの詳細な説明はありません。それについては、いつか何かで解説します。 また、このフレームワークは自由に使って頂いて構いませんが、それによって生じる問題についてのサポートは行いません。 ただし、こういう状況では崩れるよという報告や、逆にこうすると良いよというアドバイスが頂けるのであれば、ぜひお願いします。 という非
以下の文書はウェブ制作者にとって非常に有用な文書でしたが、サイト自体が消滅していたようなのでキャッシュからサルベージしました。 この文書を公開することについては翻訳者さまへメールで連絡をとっていますが、まだご返答を頂いていません。なので、申し出によっては公開を止める可能性もあります。何か問題がありましたら eiji.fukushima@gmail.com までご連絡ください。 また、以下の文書は、ほぼ元のままで手を加えておりません。従ってリンク切れしているものもあります。また、画像はサルベージできませんでした。 公開者 福島英児 公開日 2007-07-31T11:05:00+09:00 この文書について Apple Developer Connection - Working with CSS - CSS Hints for Internet Explorer 5 の日本語訳です。200
って質問されたら、これだ!っていう答えが思いつかない。valid ではない CSS ってのは、単純な記述ミスとかではなくて、例えば Safari の複数背景画像や Opera の opacity なんかの先行実装、もしくは -moz 系などの独自実装を使うことで invalid となっているケース。 (X)HTML で invalid だと、パーサが処理出来ないとか内容が表示されないとかクリティカルな issue が発生するかもしれないけれど、CSS では意図して invalid なコードを書くケースってのがあると思う。それが良いか悪いかは別にしてね。 んで、タイトルの問い。仕様に沿った記述をすべきっていう真っ当な回答があるんだろうけど、なんかこう膝を打つような回答って何だろ。あなたが書く CSS は valid ですか? valid であろうと心がけていますか? そうあるべき理由って何で
clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る -モダンブラウザ編- clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _height: 1px; min-height: 1px; /*¥*//*/ height: auto; overflow: hidden; /**/ } ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる
CSS を書いていると、こんなセレクタがあれば便利なのになぁと思うものがある。例えば、 F 要素を含む E 要素にマッチさせるセレクタ。img 要素を含む li 要素は list-style-type: none; みたいな。そんなセレクタをオレオレ仕様で無駄に考えてみる。 F 要素を含む E 要素ってのを結合子を使った文脈セレクタ系で実装しようとすると、子供セレクタを逆にして E < F とか。さしずめ親セレクタってな感じか。 li < img { list-style-type: none; } あー、これは無いな。子供セレクタと区別しにくいし、対象要素が宣言ブロック {…} の直前ではなくて遡るってのは何となくカスケーディングという思想に反するかな。 そうなると擬似クラス系か。CSS3 のセレクタで、最新版の草案では無くなっちゃったんだけど、ひとつ前の版には内容擬似クラス(Conte
今日までに片づけなければいけなかったものが何とかなりそうで、ちょっと時間ができたので正しくHTMLを書こうと心がけている人に5つの質問 : 雑記帳 : der Gegenwartに答えてみるよ! HTML文書を制作する際に使用しているプログラムをお答えください。(Webプログラムも含む) ウィンドウズ環境では TeraPad、ガッツリ作るようなのは Dreamweaver をコードビューで。マックな環境ではちょっと前までは mi だったけど、今は skEdit。これ最強。ここを生成しているCMS は Movable Type。 採用しているDTDとその理由をお答えください。 このサイトでは XHTML 1.0 strict。今んとこ ruby を使う必要がないため。使いたくなったら変える。仕事で作るときはケースバイケース。 何故正しくHTMLを書いているのですか? 正しく書くことはそれほど
web creators 5月号の巻頭特集「プロパティ別スタイルシートデザイン帖」にちょこっとだけ書いた。ほんとにちょっとだけなんで、相当探さないと分かんないかもしれないけど。今後も機会があれば書かせて頂く予定です。 んで、せっかくだから記事で使ったサンプルを公開しておく。なんだかさっぱり分からないかもしれないけど、そんな人は web creators 5月号 を読んでください。そんで、もっと色々と勉強したいと思ったら、拙著「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」を買うといいと思います(ぉ 「プロパティ別スタイルシートデザイン帖」で使ったサンプル floatプロパティを使って、<dt>と<dd>を使ったデザインに のサンプル 1 floatプロパティを使って、<dt>と<dd>を使ったデザインに のサンプル 2 overf
elastic レイアウトと言っても、固定幅ベースか可変幅ベース(とは言っても min、max-width による半固定だけど)のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する elastic レイアウト 作ったのは 600px(640×480向け)、780px(800×600向け)、960px(1024×768向け)の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比
XHTMLなりHTMLでは、xml宣言やhead内のmeta http-equivで文字コードの指定を行います。CSSに関してもW3Cの仕様書にスタイルシートが分離したファイルに存在する場合,利用者エージェントは,次の優先順位を守り,文書の文字符号化を決定しなければならない。と明記してあります。 "Content-Type"フィールドのHTTP"charset"パラメーター @charsetの@規則 参照する文書の言語機構。例えば,HTMLの場合は,LINK要素の"charset"属性 基本的に外部CSSファイルが英数字だけの記述の場合や、html文書と同じ文字コードであれば指定の必要はないと言われたりもします。しかし、font-familyでMS Pゴシックやヒラギノ角ゴ Pro W3などと指定する場合もありますし、@charsetを指定しないとネスケ6では誤った解釈をする場合があるよう
今、あるサーバにDBD::mysqをインストールしようとしているのですが、make の所でエラーが出て困ってたりする。つか、全然わかんないよ、ウヮーン。 gcc -c -I/usr/lib/perl5/site_perl/5.6.1/i386-linux/auto/DBI/ -I/usr/local/include -fno-strict-aliasi ng -I/usr/local/include -O2 -march=i386 -mcpu=i686 -DVERSION=\"2.9004\" -DXS_VERSION=\"2.9004\" -f PIC -I/usr/lib/perl5/5.6.1/i386-linux/CORE dbdimp.c In file included from dbdimp.c:19: dbdimp.h:21:49: mysql.h: No such fil
お知らせというか宣伝。九天社より出版される「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」の執筆をさせて頂きました。3ping.org の wu さんと hxxk.jp の真琴さんとの共著です。2007 年 2 月 23 日頃 から書店に並び始めるみたいです。Amazon にはまだ載っていないようです。ちなみに、カバーデザインを見せて頂いた瞬間から執筆者の間では通称「ホップ本」(真琴さん命名)ということになってます。たぶん。 書籍名 : 実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips ページ数 : 436 ページ 定価 : 3,200 円 最初に wu さんから共著のお誘いを頂いたのが 2006 年の 5 月頃。6 月に行った打ち合わせ後の著者 3 人での飲みは、気のせいか
えっ、当然ブロードバンドっすよ、何か?みたいな世の中なんで、果たしてどれくらい効果があるのか分からないのかも知れないんだけれども、ちょっとばかし重たい画像があったとして、その画像の読み込み中に味気ない空白を見つめているよりは、読み込み中を表すインジケータのアニメーション GIF を用意して img 要素の背景画像に指定しておけばナローバンドな環境にも配慮できるでしょ?(超意訳)みたいな小技が maratz.com » archive » Image Preloader で大分前に紹介されてたのを見つけたんでやってみた。 重い画像を読み込む際のインジケータをCSSで表示のサンプル img { display: block; background: #fff url(progressbar_long.gif) center center no-repeat; } 全然、分かんね。Ctrl+F5
BLOG質問箱さんの各エントリーにカテゴリ名を表示するに各エントリにカテゴリを表示する方法がのっていました。 BLOG質問箱さんのは、カテゴリ毎エントリタイトルの次の行に右寄せするものでしたが、このサイトではタイトルと同じラインに右寄せで設置してみました。 まず、Stylesheetテンプレートにカテゴリ用のclassを指定します。(フォント・サイズ・色はお好みで) .content p.category { font-family: Verdana, Arial, sans-serif; font-size: x-small; color:#666666; text-align:right; margin:0 0 -2em 0; } マージンの下部にマイナス指定しているのがミソです。 追加するカテゴリはブロック要素の<div>で囲み、さらに挿入する位置もブロック要素の<h2>タグと<h3
CSS で画像ポップアップのサンプル この文書は、Lucky bag::blogのエントリー「CSS で画像ポップアップ」のサンプルです。 JavaScript を使わずに、CSS だけで拡大画像を表示。
前回の「CSS3 の target 疑似クラスで脚注を動的に表示する」に引き続き、:target 疑似クラスを使ってスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。ピュア CSS とか言いつつも、前回同様、:target 疑似クラスに未対応な IE でも動くように JavaScript を使っている。純粋に CSS のみで動くのは、Firefox、Safari あたり。Opera は動かない。 ピュアCSS なプレゼン用スライドショー サンプル <div id="section-01" class="section"> <!-- 1ページ目 --> … </div> <div id="section-02" class="section"> <!-- 2ページ目 --> … </div> <div id="section-0
文書の URI の後に #foo などの識別子(id)をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |
タイトル長っ! まぁ、そのまんまなのだけれども、今使用しているブラウザが、CSSのセレクタ(CSS3も含む)にどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利っぽい。 Start testing... をクリックでチェックが開始され、各セレクタの結果が緑色であれば対応、赤色であれば未対応ってな寸法。ただ、ひとつのセレクタに複数のテストを行うんで、そのうちのひとつでも引っかかると failed になっちゃう。 上記画面は、IE7 RC1 でのチェック結果だけど、対応しているはずの属性セレクタで failed となる。セレクタ名の部分をクリックすると、どういったテストが行われて、結果がどうなっているのかソースを確認できるんだけど、どうやら属性が空の場合や属性の記述が不完全の場に、IE7 はうまくパースできないみたい。ちな
次のページ
このページを最初にブックマークしてみませんか?
『Lucky bag::blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く