Code Archive Skip to content Google About Google Privacy Terms
Content-Length: 319575 | pFad | http://b.hatena.ne.jp/hidehish/html/
ウェブサイトを iPhone/iPod touch 対応にする最も簡単な方法 viewport を設定して iPhone/iPod touch に対応しよう ぼちぼち iPod touch が届き始めましたね。 Safari on iPhone/iPod touch のために用意された meta 要素の viewport 属性1を使って、あなたのサイトをなんちゃって iPhone/iPod touch 対応にする方法を説明してみたいと思います。 方法は簡単です。 <meta name="viewport" content="width=1024" /> head 要素に上記のようなタグを入れるだけです。ただ、ここで width に指定する横幅を自分のサイトに合わせて最適化する必要があります。 ちなみに、上記の width=1024 となっている viewport の設定は Apple のホ
CSSで便利だと感じるのは構造を階層化できる点だが、逆にきちんと構造化しておかないと欠点にもなりかねない。別な所で定義した名称と重複してしまい、どうもうまくいかないという経験がある人も多いはずだ。 まず現状どういった構造になっているのか、それを把握する所からはじめてみよう。それが分かればうまく構造化できるはずだ。 今回紹介するオープンソース・ソフトウェアはhtml2css、HTML文書を解析してCSSファイルにするソフトウェアだ。 html2cssはclassやid、そしてタグの構造を解析して、それをCSS形式で出力してくれる。これを見てみると、CSSのネストした構造がどの位深いのか良く分かる。無駄な点があればそれも見えてくるだろう。ソースとしてファイル、文字列またはURLを利用できる。 最上位がhtml bodyからはじまるので、大抵ネストは深くなるだろう。だが、そこから不要なものは抜き
巷で話題のiddyに登録しました。といっても、まだどう活用するかはいろいろと考え中なわけですが、iddyに登録する際に、「あれ?」と思ったことがあったので、メモ書き程度に書いておきます。 formに入力する時って、tabキー使いません? 僕は、大体のformに何かを入力する際には、tabキーを使って、どんどん項目を進んでいきます。マウスやaccesskeyは使わないことがほとんどです。 では、なぜはじめにiddyの話を出したかと言うと、登録の際に一瞬躊躇してしまったからなのです。「あれ、俺、今どこのボックスにいたっけ?」みたいな。 iddyの登録画面はこんな感じです。 で、いつものようにtabキーを使って、次の項目に移動すると、カーソルが消えてしまうのです。そのときに「あれ?」と思うのです。 理由はいたって簡単で、大体のformというのはtabキーを一回押せば、次の項目のボックスに移動でき
CSS Nite Vol.18の懇親会で行われたiwaimさんのプレゼンで、headerの部分は本当にidでいいの?という問いかけがありました。 多分、多くの人が行っているclassとidの使い分けは、複数回登場するかしないかだと思うんですけど、それはどうやら間違った基準なようです。 仕様書は? そもそも、仕様書の定義としては、二つの違いはどうなっているのでしょうか。 id = name [CS] この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。 class = cdata-list [CS] この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。 The global structure of a
404 Blog Not Found さんにて、「CSS - スクロール可能なテーブル w/o JavaScript」 というエントリーが上がっていて、これ見た... 404 Blog Not Found さんにて、「CSS - スクロール可能なテーブル w/o JavaScript」 というエントリーが上がっていて、これ見た時にその HTML ソースはないなぁ...... と思ったのと同時に、tbody に CSS を適用して overflow:auto とかすれば終わる話じゃないのとか思ってそれについてエントリーを書こうかなと思った瞬間、hxxk.jp さんにて 「CSS で tbody 要素を一定の高さにして、 overflow: auto でスクロール表示にする tips」 っていうエントリーが上がってるのを見て萎えた。 で、それについて書くのは諦めたんですが、hxxk.jp さん
入力フォームのデザインがすばらしいページを教えてください。 派手さや装飾ではなく、使いやすさ、見やすさなど機能美優先でお願いします。 海外のサイトでも結構です。
JavaScriptを使ったAJAXが昨年前半まで大いに注目を集めていましたが、その根本になったJavaScript自体は古くからあり、AJAXというのは新しい応用法みたいな側面が非常に強かったのが特徴です。 しかし今回紹介する「Canvas」要素はそういうのとは明らかに一線を画しています。グラフの描画、写真合成、アニメーションなどが可能で、実際にはMac OS X のDashboardに初導入されています。そのため、サポートしているブラウザはSafariとFirefox 1.5以降のGecko1.8ベースのブラウザ、それからOpera9となります。また、この「Canvas」要素は「HTML 5」としても知られるWhatWG Web applications 1.0仕様の一部でもあるそうです。 といろいろ書いても実感がわかないと思うので、いろいろな実例を見てみましょう。 まずは簡単なフレー
DOCTYPE 宣言の種類によって、ブラウザのレンダリングが標準準拠モードになったり後方互換モードになったりすることを DOCTYPE スイッチと言います。 今回は要点だけ手短かに行きたいので詳しくは解説しませんが、 IE 6 だと DOCTYPE 宣言より前になんらかの文字 ( 記述が推奨される XML 宣言であっても ) があれば問答無用で後方互換モードになるバグがあるとか、まあよく聞く話題です。 標準準拠モードと後方互換モードでレンダリングにどんな違いが現れるかは Lucky bag::blog: xml宣言についてや !DOCTYPE スイッチが良いリソースなのでそちらをご覧下さい。 既存の DOCTYPE スイッチ一覧表に "?" ここ数日、この DOCTYPE スイッチについて調べていたのですが、書籍やサイトに書かれている情報と、実際に試してみた結果が少し違うんですよね。 ある
This article was written in 2009 and remains one of our most popular posts. If you’re keen to learn more about HTML and CSS, you may find this recent article on the future of HTML of great interest. So, you’re ready to take the plunge and begin to learn how to build your own web pages and sites? Fantastic! We’ve got quite a ride ahead, so I hope you’re feeling adventurous. This information is an e
Posted on: November 24, 2005 In: Design, CSS, Typography Comments closed In the Web Standards community we hear the words 'Semantic Markup' thrown around a lot as a concept—the right thing to do— but I know a lot of designers who are trying to learn this stuff are being confused by the whole 'semantic thing'. It's a difficult task for a designer, who primarily thinks very visually, to relate to
プレゼンテーション向けの資料を作成する場合、PowerPointもしくはその互換アプリケーションを用いることが最も一般的かもれません。しかし最近では、特にWeb関連のカンファレンス等において、(X)HTML、CSS、そしてDOMといったWeb標準を活用した資料を目にすることが多くなってきました。 より具体的には単一の(X)HTML文書を、Webブラウザ上であたかもスライドのように表示させるというもので、かつてはOpera ShowというOpera固有の機能を使う方式が流行しました。しかし以下にご紹介するツールを用いて作成したものは、Operaに限らず、モダンブラウザの動作する多くの環境で同様のプレゼンを行うことができます。 S5 HTML Slidy DOMSlides ちなみに弊社のWeb標準セミナーにおいては、S5を利用して作成した資料を用いています。Web標準の利点をご説明する際のデ
右クリック画像保存を禁止する方法 2005-07-02-2 [Tips] Flickr (http://www.flickr.com/) では、 右クリックによる保存ができない画像があります。 正確にはローカルに保存するとダミーの画像になってしまいます。 仕組みは簡単。ダミー画像を重ねているだけ。 コピペして試せるようにエッセンスだけ抽出: <img src="http://chalow.net/image/yto-logo-hou.png" width="318" height="81"><img style="position:relative; top:-83px; margin-bottom:-83px; display:block;" width="320" height="83" src="http://chalow.net/image/1x1.gif"> お試しあ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/hidehish/html/
Alternative Proxies: