ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
特定のclass属性を持った任意の要素にマッチするXPath | 3.14
結論特定のclass属性を持った任意の要素にマッチするXPath(hogeは指定したいclass属性名) //*[contains(concat(" ",normalize-space(@class)," "), " hoge ")] 特定の要素にしたい場合は適当に div[contains(concat(" ",normalize-space(@class)," "), " hoge ")] などとする． 概要特定のclass属性を持った任意の要素にマッチするXPathというのはアドオンやUserJavaScript，スクレイピングの際にDOMノードを特定するために良く使いますが，XPathの書き方がマズイ人がたまにいます．普通に考えたらXPathはこうなります． XPath1:: //*[@class="hoge"] class属性は以下の引用部分に書かれているとおり，スタイルシート以
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。 どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。 ■画像形式 GIFとJPEGであれば大丈夫なようです。 ・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ ・KDDI au: 技術情報 > 機種別情報一覧 ・ソフトバンク 端末情報 Part1 ～ ソフトバンク 端末情報 Part4 ・Mobile Creation 対応フォーマット一覧 ただ、SoftBankの場合、 ソフトバンク 端末情報 と気になる記述があったりするのですが、この2機種は、 ・V801SHをご利用のお客さまへ ・V-NM701/V801SAをご利用のお客さま
JavaScriptを使わずCSSのみでシンプルなツールチップ実装:phpspot開発日誌
Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。 コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#fffff
第13回 Webページで読みやすいテキストとは：ITpro
今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは，活字印刷物のフォントとは違い，横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので，やはり横書きでは読みづらいようになっています。 日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字＋α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙，つまり本のサイズがA4を超えるような大判になると，1ページを左右2段組に分けて25～28字程度に調整されています。 一方，縦書きの場合には識別許容量はグンと増加し
機種を選ばない携帯向けWebサイト - ARTIFACT@はてブロ
ブラウザのUAを見ないWebサイトをまとめてみた。PDA向けのものが多い。 ポータル MobileSearch!（モバイルサーチ）：PDA･携帯電話ポータルサイト http://m-search.jp/ms/pda.php ◆恋占いの館◆ http://www.momiji.biz/ ※様々なサービスがある 地図・交通 Mapion for pda http://www.mapion.co.jp/custom/pda/ 駅前探険倶楽部SS http://ekitan.com/ss/ ※時刻表が便利／PCでは見られたけど携帯でははねられてしまった ニュース一般 i.asahi.com http://i.asahi.com/ 日テレNEWS24 http://www.ntv.co.jp/pda/news/main.html ANNﾆｭｰｽ http://www.tv-asahi.co.jp/a
jkondoに憧れて » 超手抜きでウェブサイトをモバイル対応 2008
◆追記 評判良かったので大幅に加筆訂正してみました。 ちょっと昨日、一昨日と携帯向けサイトを作っていたのですが、最近の携帯電話事情がわからず、どういうタグを使えばいいのかとか、CSSは対応しているのかとか、文字コードの問題はどうするのかとかいろいろわからないところが多かったので、ちょっと自分なりに調べてまとめてみます。 間違いが含まれている可能性が非常に高いです。 突っ込み大歓迎。 前提 キャリア別とか2G用にテンプレートを複数作って対応というのは個人で出来るレベルじゃないので、モバイル向けは１ページごとに１枚のテンプレート追加で作る。 なるべくPC向けのテンプレートを大幅に修正しなければいけないようなものは避ける。 長くなるので最初にまとめ ・文字コードはUTF-8。 ・マークアップ言語はXHTML Basic。 ・画像はJPEGかGIF。 ・CSSはインラインで書く。
HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)
趣旨 ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。 情報ソース この問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇 である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。 基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
高反発マットレスの選び方 | アフィブログに騙されない為の高反発マットレス手記
ウレタン系高反発マットレスでよく言及されるのが密度です。それを頑張って分かりやすく説明してみます。
HTMLタグを使わないSEOの話 : LINE Corporation ディレクターブログ
『livedoor グルメ』と『本が好き！』の根岸です。今回は「SEOは単なる HTML の書き方テクニックではない」ということを中心に、極私的なSEO論をしていきたいと思います。 ■「検索上位にでない！ なぜか!」「坊やだからさ」 あるキーワードの検索に対して、自分のウェブページが検索結果リストの上位に出るようにチューニングすることを「SEO＝Search Engine Optimize」というのは、みなさんご存じかと思います。その基本テクニックとして、検索でヒットさせたいキーワードを titleタグや hタグや strongタグで囲うということをしている方も、多くいるのではないでしょうか？ それゆえ、hタグだらけのページなんてのも、少なくありません。そんなことをしても効果はほとんどないはずなのですが。 逆に「うちは FLASH 中心のサイト（※）なのに、検索上位に出まくりなのはどういう
HTML崩壊 meltdown.js - KAZUMiX memo
#ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ まずは軽いページでお試しください。例えば Google とか。*1 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown/meltdown.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバ
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
HTMLのドキュメントから繰り返し部分をみつける - bits and bytes
RSSを生成していないページからRSSを生成するなんでもRSS 0.1bは、公開されているJSAI2005: なんでもRSS - HTML文書からのRSS自動生成によると、日付情報を目印にしてそのHTMLドキュメントの構造を推測して、各エントリ(item要素)のタイトルと本文を単語の統計的に処理して決定し、フィードを生成していると書かれています。 ウェブ上にあるHTMLドキュメントは Ask.jp ： "xml" Search results. のように、RSSのitem要素に相当する部分に日付が含まれていないものもあります。 その中でも、大量のデータを複数のページにわけて表示しているHTMLドキュメントを対象に、ドキュメント中に含まれる繰り返し部分のXPathを生成するブログラムをjavascriptで作りました。 アプローチ 大量のデータを複数のページわけて表示しているドキュメントを
HTML::Feature - 重要部分を抽出するモジュール - - ダウンロードたけし（寅年）の日記
以前からCPANで公開していたモジュールがあるんですが、日本語での解説ドキュメントがなかったのと、最近大幅にブラッシュアップしたので、せっかくなので紹介記事を書きます。 HTML::Feature - Extract Feature Sentences From HTML Documents 「えいちてぃえむえる::ふぃーちゃー」と読みます。 ブログやニュース記事など様々なHTML文書から「重要部分」を推測して抽出してくれる perl モジュールです。 「重要部分」とはいわゆる「本文」のことですね。本文抽出とか焦点抽出とか色々な言い方があるかと思いますが、まぁ要するに特徴的な部分を推測して抽出するわけです。 どういうものか。 例えばブログ記事からヘッダーやフッター、その他のナビゲーションブロックを除いた「記事らしき部分」だけを切り取りたい、とします。 ぱっと思いつくのは「特定のコメントタグ
Webページの本文抽出 (nakatani @ cybozu labs)
Webページの自動カテゴライズ の続き。 前回書いたとおり、パストラックで行っている Web ページのカテゴライズでは、Web ページの本文抽出がひとつの鍵になっています。今回はその本文抽出モジュールを公開しつつ、使っている技法をざっくり解説などしてみます。 本モジュールの利用は至極簡単。require して analyse メソッドに解析したい html を与えるだけ。文字コードは UTF-8 です。 【追記】大事なこと書き忘れ。本モジュールは Ruby1.8.5 で動作確認していますが、特別なことはしていないので、1.8.x なら動くと思います。 $KCODE="u" # 文字コードは utf-8 require 'extractcontent.rb' # オプション値の指定 opt = {:waste_expressions => /お問い合わせ|会社概要/} ExtractCont
MOONGIFT: HTMLから本文抽出「Extractcontent」:オープンソースを毎日紹介
ブログやサイト内の文字列を扱うサービスの中で、HTML中における本文を抽出するというのは重要な課題だ。ライブラリ化したものや、クローラとして提供されるものなど様々な形態が存在する。 そんな中、サイボウズの提供するサービス「パストラック」で利用されているその本文抽出モジュールはオープンソースとして公開されている。 今回紹介するオープンソース・ソフトウェアはExtractcontent、Rubyによる本文抽出モジュールだ。 Extractcontentは一つのRubyスクリプトからできている。読み込むだけで使えるので、Rails等に組み込むのも簡単だ。HTML全体を渡すと、タイトルと本文を同時に取り出してくれる。 パラメータは細かく存在し、それを変更する事で性能を変更できる。が、まずデフォルトのままで大丈夫だろう。 ライブラリだけで本文抽出ができるという手軽さが良い。ブログを使ったテキストサー
E4Xを知っておくとよいたった一つ(かどうか知らない)の状況 - 葉っぱ日記
史上空前のクラムチャウダーを飲んで帰国ブームの間に何か書こうと思ってたのにブームが去ってしまったので、史上空前というほども流行っていないE4Xブームにのってみる。 E4Xという機能を使うと、JavaScript内にリテラルXMLを記述できる。徳丸さんのサンプルがわかりやすい。 var order = <order> <name>Webアプリケーションのセキュリティ完全対策</name> <author>徳丸浩他</author> <price>3990</price> <ISBN>4822229718</ISBN> </order> JSONで書いた例も徳丸さんのサンプルから借りてくる。 var order = { name : "Webアプリケーションのセキュリティ完全対策", author : "徳丸浩他", price : 3990, ISBN : "4822229718" } 確か
Firefoxでz-indexを使うとフォームのカーソルが描画されなくなる問題 - cloned.log
<html> <head> <style type="text/css"> #back { position: absolute; top: 20; left: 20; width: 500px; height: 500px; overflow: auto; z-index: 50; } #front { position: absolute; top: 20; left: 20; z-index: 100; } </style> </head> <body> <div id="back"></div> <div id="front"> <input type="text" value="Hello"> </div> </body> </html> z-indexを使うときの問題。上のHTMLコードをFirefoxで見る（再現HTMLはこちらで）とわかるけれど、テキストフィールドのカーソル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA