HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
スタイルシートのメリット・デメリット
編集が簡単 外部にスタイルシートを置くことにより外部スタイルシートを変更してやればリンクされたすべてのページが変更できます。例えば、 テーブルレイアウトで作成したホームページがあり、仮に30ページあったと仮定します。レイアウトやデザイン、フォントのサイズなどを変更しようと思った場合を考えてみて下さい。１ページ１ページ変更するのは大変な作業です。 しかし外部スタイルシートを設定していればそのファイルを変更してやるだけなので簡単かつ時間の浪費も抑えられます。 （※決してテーブルレイアウトを否定しているのではありません） 自由なレイアウト ここで言う自由なレイアウトとは「文章の構造を保ちながら」と言う意味です。もちろん閲覧者第一ですが、特に検索ロボット対策（SEO対策）に力を発揮します。 例えば、コンテンツの内容をメニューエリア（サイドバー）の情報よりも先にHTML内に記述したい時（検索ロボット
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
CSS - ルビ再び : 404 Blog Not Found
2008年07月15日17:15 カテゴリLightweight Languages CSS - ルビ再び 以前、 404 Blog Not Found:css - ルビもCSSで という記事を書いたのだが、Firefox 3でどうもきちんと表示されない。これは困った。どうしてもルビを使いたい記事があるのだ。 というわけで、今度は大本の記事をそのままコピペするのではなく、CSSをきちんと理解した上で書き直してみた。 その結果が、以下である。 ここのblog主は <ruby>小飼<rp(></rp><rt>こがい</rt><rp>)</rp></ruby> <ruby>弾<rp>(</rp><rt>だん</rt><rp>)</rp></ruby> といいます。 ここのblog主は 小飼(こがい) 弾(だん) といいます。 ruby { display:inline-table !import
CSSでルビを表示する - mukaken's blog
銑鉄網(暫定公開版)さんのページにて配布されているファイルです。 凄くきれいに表示できるルビのCSSを発見しました。いままでｈFxやSafariなどではきれいに表示できなかったのですが、これだときれいに表示できます。 元ファイル http://roheisen.net/dl/sim2ruby.css （銑鉄網(暫定公開版)さんのページにて配布されているファイルです。） 以下、一部抜粋したものです。 @charset "UTF-8"; /* 主にWii用の指定 */ @media tv { /* ルビの縦ずれを補正 rbやrtのfont-size、line-heightによらず0.5em */ html body ruby { padding-bottom: 0.5em; } } /* ruby（ルビ文字組み全体のインライン領域） ------------------------------
ルビを振るには - CSS小技集
HTML5 でマークアップされたルビを、CSS 第二水準第一改訂版(CSS 2.1)の範囲だけで実現する方法を考えてみましょう。 この記事では、最も単純なルビの振り方のみを解説しております。 HTML5 で上下に二つのルビを振ったり、一文字毎にルビを振るなどの複雑なルビを実現する方法はHTML5 でのルビのスタイルをご覧下さい。 まずはじめに。 HTML5 では、ルビを実現するため、以下のルビ関連要素を定義しております。 <ruby>要素…ルビ付きテキスト <rt>要素…ルビテキスト <rp>要素…ルビ非対応環境向けのルビを囲む括弧類 W3C が勧告している規格では、他にも幾つかの要素が定義されておりますが、最も単純なルビ付きテキストであれば、上記の三要素だけでマークアップが出来ます。 HTML5 以外でも、XHTML 1.1 にはルビモジュールが定義されており、最も単純なルビテキストであ
HTML5に対応したYouTube動画の新しい埋め込み方法
HTML5に対応したYouTube動画の新しい埋め込み方法 YouTubeでは従来の<embed>タグによる動画の埋め込み方法の他に、<iframe>での埋め込みが利用できることを発表しました。 さて、一般のPC以外からの動画再生はFlashが対応していないため視聴できない、という問題がありましたが、昨今HTML5の登場によってプラグイン無しで再生することができる環境になってきました。 そこで、今回の新しい埋め込み方法では、ユーザーの環境に合わせてFlashプラグインが対応していれば従来の方式で、そうでなければHTML5方式で自動的に埋め込み内容を切り替えてくれるようになっています。 埋め込みコードは以下のような感じで、従来よりもむしろスッキリしてます。 <iframe class="youtube-player" type="text/html" width="640" height="
誰でも作れる！ “崩れない”HTMLメルマガ作成術
誰でも作れる！ “崩れない”HTMLメルマガ作成術：一撃デザインの種明かし（12）（2/4 ページ） CSSは時期尚早。基本は＜table＞で組め！ 前述したように、HTMLメールのチェック対象は膨大です。最近のメーラーはCSSへの対応度が上がっているといわれていますが、いまだにCSSの解釈にはバラ付きがあり最悪の場合、完全に無視される場合もあります。 そのような理由から、現状では昔ながらのテーブルレイアウトを軸に作成していくのが一番安全といえます。Webサイト制作時のクロスブラウザ対応でも、テーブルレイアウトであれば、ずれることは少ないですよね。 またメーラーの種類が豊富なことから、CSSでなくてもできる指定（例えば、＜table＞のbackground属性など）があれば、そちらを率先して使っていくことが、想定外のレイアウトになることを防ぐ近道です。 ここからは、本稿のために作成した「日
Webサイトの「Copyright～」にaddressタグは適切？ – メール人語
皆さん、ホームページの著作権表示のタグは何使ってますか？ よくWebサイトのフッターに、「Copyright ～」みたいな著作権の表示がされているのを見かけますよね。 あの著作権表記のHTMLのタグは何を使ってますか？ 個人的に、ずーっと気になってたのが、著作権表示に利用されるaddressタグです。 実際に有名なサイトでも多数使われています。 Yahoo! JAPAN <address>Copyright (C) 2009 Yahoo Japan Corporation. All Rights Reserved.</address> mixi <address>Copyright (C) 1999-2009 mixi, Inc. All rights reserved.</address> 三井住友銀行 <address lang="en" class="en">Copyright
HTML5：そろそろ本気で勉強するためのリソース | Tokyo O life
nobiさんが、HTML5を熱く語り始めた。 Web 2.0は、その時点で起きていた、インターネット関連のさまざまな新トレンドを、ゆるやかにひとくくりにして、名付けたものだが、 これに対してHTML 5は、 ITの世界を本気で変えようと、多くの企業や人々が集まって巻き起こしている革命だ。 [From nobilog2: 「HTML 5 > Web 2.0」の声かけ確認でITガラパゴス化を防ごう！] 昔からnobiさんが熱くなって騒ぐことは、たいがい流行る。早すぎて周りが理解できないこともあるのだが、今回は過去を反省して、さっそく乗っかることにした。 今はHTML5を公式にサポートしたSafari 4の製品版がMac版とWin版の両方で公開されたことで、HTML5がいきなり身近になったことは確かだ。Google Chrome 3.0、Firefox 3.5でもHTML5がサポートされるので、
?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clockmaker+%28ClockMaker+Blog%29
アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議が現実味を帯びて論じられるようになりました。 「なぜAppleはiPadにFlashを載せるべきではない」のか AdobeのCTO、Kevin LynchがFlashを擁護―「HTML5はウェブビデオを暗黒時代に投げ戻す」 そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。 (上の画像はクリックで拡大できます) 左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理、デバイス機能ではまだ Fl
HugeDomains.com
Captcha security check coolcoding.com is for sale Please prove you're not a robot View Price Processing
HTML5 を IE や Firefox 2 でも使えるようにする方法 - html5doctor - HTML5.JP
サイト内検索 この記事は、html5doctor に掲載されている記事「How to get HTML5 working in IE and Firefox 2」を日本語訳したものです。この記事では、新要素に対応していない IE や Firefox 2 で、新要素を適切にレンダリングさせる方法を分かりやすく解説しています。HTML5 でサイトを作る場合には、必須の知識となります。 原文タイトル How to get HTML5 working in IE and Firefox 2 原文ページ URL http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/ 著者 Remy Sharp 氏 原文投稿日 2009-06-20 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了
Another HTML-lint gateway
HTML文書の文法をチェックし、採点します htmllint.cgi 1.28 / htmllint.pm 3.58 33,323 lints / 0 visits / since Jan 6, 1998 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 また、基本的な設定項目だけの簡易ゲートウェイもあります。いちいちオプションなんかどうせ指定しないや、という方はご利用ください。 ローカル環境でチェックしたいとお考えの方は、ダウンロードのページを参照してください。 チェック方式 チェックしたいHTMLのURLを指定するか、HTMLを下の
[JS]シャボン玉のようにふんわりと膨らんだり縮んだりするナビゲーション
マウスのホバーで、ふんわりと膨らんだり縮んだりするアニメーションがかわいらしいナビゲーションを実装するチュートリアルをCodropsから紹介します。 Awesome Bubble Navigation with jQuery デモページ デモでは円状に配置された各カテゴリにマウスをホバーすると、それぞれの配下コンテンツが配置される仕組みになっています。 アニメーションには緩急がつけられており、とても気持ちいいです。 実装方法は、HTML, CSS, JavaScriptのパートごとに丁寧に解説されており、画像を含む全ファイルがダウンロードできます。
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML Ruby :: Add-ons for Firefox
HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://www.designwalker.com/2010/06/html5-template.html
