Pure CSSな吹き出し
Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble
tokuhirom blog
Blog Search when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${entry.path} [in template "__entry.ftlh" at line 3, column 25] - Reached through: #include "__entry.ftlh" [in template "entry.ftlh" at
色々な要素にstyleをあてる - ぼくはまちちゃん！
全国のマークアップエンジニアの皆さん、こんにちは！ こんにちはこんにちは！！ 今日も元気にスタイルあててますか…！ ぼくはめっきりあててませんけど！ でもたまにはマークアップしたりスタイルあてたりしなきゃ、どんどん不健康になっちゃいますよね！ だから今日はぼくも久しぶりにCSSでも書いて、どんどんスタイルをあてていっちゃおうかなー、なんて気分です！ だけど、せっかくスタイルあてるんだったら、普段ほったらかしされがちな控えめな子をクローズアップして、ちょっぴり目立たせてあげたいですよね…！ はい！ そんな感じで今日は、<head>の中とかに書かれちゃっているような要素たちにスタイルをあてて遊んでみようかと思います！ … head … display: block、 title … display: block、 meta … display: block っと … …… …できた！ こんな感
はてブの引用文の幅を画面一杯に広げるユーザースタイルシートを作りました : akiyan.com
はてブの引用文の幅を画面一杯に広げるユーザースタイルシートを作りました 2008-11-25 はてなブックマークのリニューアル版がリリースされましたね。デザインがきれいになって、カテゴリが強調され、検索が強化され...と、かなりの進化を遂げました。まずは、はてなスタッフの皆様、リニューアルおつかれさまでした！ 引用文の幅を画面一杯に広げるユーザースタイルシートを作りました リニューアルの変化の一つとして、人気エントリーや注目エントリーページのエントリ１つ１つに、引用文が表示されるようになりました。 エントリ１つ１つにつく引用文。 その引用文のブロックの幅は、Googleの検索結果のように横に並ぶ文字数が42em(文字)固定となっており、部分的なエラスティックレイアウトになっています。これはこれでいろいろメリットはあるのですが、個人的にはブラウザの横幅一杯に広がるレイアウトにしてみたいと思い
リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた : akiyan.com
リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた 2007-10-01 別に2カラム原理主義者というわけではないのですが、カラム変更オプションが無くなったのでついカッとなって書いてみました。 目次 適用前、適用後 適用前 適用後 解説 Firefox向けで、ユーザースタイルシートの適用は「Stylish」拡張をインストールすると便利です。 2カラムにするだけではなく、個人的にほとんど使わない機能へのナビゲーションまで削除しちゃってるので、ちょっと注意が必要です。リニューアル後のmixiのHTMLはid名とclass名が変態的なまでにきっちり設定されているのでCSSがわかる方はソース眺めつつ調整してください。ユーザースタイルシートの内容は以下の通り 調整 全体の横幅 750px化 全体を中央揃え フッターリンク左右の余白調整 非表示 右カラム全部 ロゴ
マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開） - IT戦記
はじめに このエントリはマークアップエンジニアに対する批判ではありません。不快な想いをした方がいましたら、申し訳ありません。 きっかけ ライブドア & サイボウズラボの数人でお昼ご飯を食べにいって、いろいろ話しながら考えたことを昼食後に Twitter に書き込みました。 濃い昼飯だた、(X)HTML+CSS しか出来ない人は真剣に第二の何かを探したほうがいいと思た。(X)HTML+CSS ではもうこれ以上すごいと呼ばれる人なんて増えないと思う。 http://twitter.com/amachang/statuses/191256222 「CSS 道」は道が短すぎるんだ。マーケティングの為に長く見せてるけど、実際覚えることは少ない。「デザイン」か「JavaScript」を職業に出来るくらいにしとかないとヤバいと思う。 http://twitter.com/amachang/statuse
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
document.createStyleSheet で動的に CSS を生成 - IT戦記
今まで var element = document.createElement('style'); document.getElementsByTagName('head')[0].appendChild(element); if (ie) { var sheet = element.styleSheet; } else { var sheet = element.sheet; } みたいにやっていた。 ところが dojo のソースを眺めていたら IE には createStyleSheet という関数があるみたい。 createStyleSheet を使うとこうなる。 if (ie) { var sheet = document.createStyleSheet(); } else { var element = document.createElement('style'); doc
IT戦記 - Safari 3 に実装された、当たっている CSS ルールを全て抽出できる getMatchedCSSRules が凄い
今日は、まだまだ Safari 3 が熱い！ window オブジェクトを走査していたら、またしても面白そうな関数を見つけてしまった。 その名も getMatchedCSSRules ！！！ まずはデモをご覧ください 以下のブックマークレットを任意のサイトで実行すると、コンテンツの下に DOM Inspector のような要素が出現します。 そこで、要素を開いていくと Safari の場合は、どの CSS ルールが当たっているかを見る事ができます。 javascript:(function(){var d=document,s=d.createElement('script');s.className='css-inspector-script';d.body.appendChild(s);s.src='http://amachang.art-code.org/cssInspector.j
ふつうに横三角 - ぼくはまちちゃん！(Hatena)
ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！ よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！ でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »
MTで実践 - CSSのモジュール化による管理方法と遊び方 - 3ping.org
1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。 Movable Type テンプレート mt.vicuna Movable Typeのデフォルトソースを1から書き直し、シンプルで軽量、XHTML1.0 Strict DTD準拠です。基本的には1つのテンプレートソースに対して好みのスキンをあてこむ形で色々なデザインのウェブログが作れるようになっています。ごちゃ
TAKESAKO @ Yet another Cybozu Labs: JavaScriptでフォント名一覧を取得する3つの方法
先月・今月と新しいメンバーが加わったサイボウズ・ラボですが、いま社内でfont-familyが密かなブームです。 ということで、ブラウザで使用できるフォント名一覧をJavaScriptで取得する方法について調べてみました。 ■ 1. IE の Dialog Helper Object を利用してフォント名一覧を取得する IE の Dialog Helper Object を利用して フォント名の一覧を取得する方法がよく知られています。 まず、HTMLの中に以下のOBJECTタグを定義して、 <OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"> </OBJECT> JavaScriptから以下のコードを実行すると、現在の環境で利用できるフォント
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
javascript - CSSをいじくる : 404 Blog Not Found
2007年03月12日02:00 カテゴリLightweight LanguagesiTech javascript - CSSをいじくる JavaScriptでDOM要素のstyle属性をいじるのは簡単ですが、これがCSSともなるとobject treeが深くて大変で、Webを見回してもほとんど参考例がありません。動的にCSSをいじっているサイトの例は徳保さん趣味のWebデザインぐらいしか見かけません。 というわけで、習作を兼ねて、style属性ではなくCSSをまるごと書き換える関数を作ってみました。 CSS Manipulation via JavaScript http://www.dan.co.jp/~dankogai/css/css_handlers.html 解説 動作確認はFirefox 2, Opera 9, Safari, Mac IE5で行っています。Safariでのみ
[CSSNite in Nagoya 2007] 極力ハックしない CSS というテーマでお話しました - pur*log
[CSSNite in Nagoya 2007] 極力ハックしない CSS というテーマでお話しました 2007-03-12T11:29:48+09:00 Tag: CSS, CSSNite, event, hack, presentation, seminar 去る2007年3月10日、CSS Nite in Nagoya 2007にて、「極力ハックしない CSS」というテーマでスピーカーとして参加させていただきました。 総勢282名という多くの方にご参加いただき、プレゼンターとしてだけではなく、参加者としても有意義に勉強させていただくことができました。 回想や反省を含めて、またあとで追記するか別エントリで書こうと思います。取り急ぎ pdf 版の資料を公開いたします。音声版は後日 CSS Nite 公式ページで公開される予定ですので、興味のある方はご覧ください。（追記）PDF 版に加え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML-MobileJpCSS-0.02 - css inliner and converter - metacpan.org
Amazon.co.jp: 一週間でマスターするXHTML & CSS for Windows: 浜俊太朗: 本
はてなブログ | 無料ブログを作成しよう
CSSNite in Nagoya 2007 極力ハックしない CSS by 山田あかね(purprin)
CSS Manipulation Test