Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
はじめに こんにちは、Python界の情弱です。今日はChrome+HTML5 Conferenceのお手伝いに来てます。いままで全く触れてこなかった世界ですが、結構HTML5はXMLのようにセマンティクスに重点を置いてるんですね。CSS3も動的なエフェクトを簡単にかけられるようになってるし、とてもいいですね。 さて、YouTube Live Streamのお手伝いしながらRSS見てたら、ちょうど今日のテーマに沿ったエントリがdiggで紹介されてたので、翻訳しました。 10 Excellent HTML5 coding Tools Many Users Don’t Know About 10 Excellent HTML5 coding Tools Many Users Don’t Know About （オリジナル） HTML5はウェブサイトの作成方法を根本から変えることになるでしょう。
いかがでしょう？ WEBブラウザにもよりますが、結構実際の見た目も違うように思います。 で、冒頭の「半角スペースと 」の件ですが、ちゃんと意識しておかないと「あれ？」と思うことがあります。 「 を半角スペース (0x20) に置き換える」プログラムがあるように、「 を半角スペースに置き換えず、nbsp (0xC2A0) に置き換える」プログラムもありますから、WEB ブラウザのように 0xC2A0 を表示できる場合はいいですけど、表示できないプログラムだと困りますよね。 冒頭の画像は、わが愛するテキステエディタ Emacs だとこんな感じになります、というサンプルでした おまけとして、 を 0xC2A0 に置き換える例を。雰囲気をお楽しみください。 use HTML::Entities; use Encode; use Data::Dumpe
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS：シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
ボックスの幅が制限されていて、且つ'white-space'に[nowrap]や[pre]が指定されていて、テキストが横方向にはみ出し、且つ'overflow'に[visible]以外の値が指定されている場合、長過ぎるテキストは右にはみ出します。 このプロパティは、そのはみ出したテキストに対して、可視部分の最後に省略符号(「...」の事)を入れるかどうかを指定します。置換要素には無効です。 キーワード解説 ellipsis はみ出した行の可視部分の最後に、省略符号「...」を付け足します。 clip 普通にテキストを切り取り、省略符号はつけません。 以下にひとつ例を挙げておきます。'text-overflow'と'overflow'を換えてみて、大体の感じを掴んでください。 <div style=" width:120px;height:50px;border:1px solid blue
jQuery mobileでselect要素を使うとbodyの後部に選択ダイアログ用のdiv要素を追加してそれっぽく表示してくれる（デモ）。 ただAjaxで動的にoption要素を生成するような場合だとjQuery mobileの初期化に行われるDOMツリーの書き換えのタイミングと合わなくて、意図したとおりにoption要素に追加したものがダイアログに表示されなかったりする。 こういうときはとりあえずselect要素にdata-native-menu="true"を追加すれば、ブラウザネイティブの選択ダイアログが使われるようになるので、動的にoptionを追加した場合にも追従できる。 <select name="fruit" data-native-menu="true"> <option>Apple</option> <option>Orange</option> <option>Ban
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
というわけでやってまいりましたこのコーナー! 本日のお題は「Selection内のHTML Textをいい感じに取得する - 枕を欹てて聴く」でございます。選択範囲のHTMLソースを抜き出すというやつですね。では早速いってみましょう! if(src.focusNode){ // selection まずは HTML5 テキスト選択 API の Selection オブジェクトが登場! 以後これに対する操作が続きます。しかしこの Slection オブジェクト、getRangeAt メソッドを使うとなんと選択範囲に対応する DOM 2 Traversal and Range の Range オブジェクトが取れちゃうんです! // common parent node search (以下 21 行省略) それ Range#commonAncestorContainer で取れるよ! // c
canonical（カノニカル）タグは、<link rel="canonical" href="○○">のように使われます。そもそもcanonical属性とは検索エンジンに対してどんな意味を持ったタグなのでしょうか？ 基本情報からSEOで活用すべきシーンなどを事例で紹介します。 ヤフー、グーグル、そしてMSN Live Search（マイクロソフト）は、新しい「URL正規化タグ」をサポートすると発表した。 このタグを使えば、ウェブマスターやサイトオーナーが検索エンジンのインデックス内での重複コンテンツ問題を解消できる（ただし、自サイト内の問題のせいで生じる重複インデックスのみ）。 僕が思うに、これはSEOのベストプラクティスにとって、サイトマップの登場以来最大の変化だと思う。SEOmozでは最新ニュースを届けることより戦略について論じることに重点を置いているから、このブログで検索エンジン関
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く