Google HTML/CSS Style Guide の推奨ガイドラインまとめ | バシャログ。
すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。 巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。 全般的なスタイルルール 一般的な書式ルール 全般的なメタルール HTMLのスタイルルール HTMLの書式ルール CSSスタイルルール CSS書式ルール 全般的なスタイルルール プロトコルの記述 <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrac
web高速化のためのコーダー向け圧縮ツール・サービスまとめ | バシャログ。
ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点を当てて圧縮ツール・サービスをまとめてみます。 Javascriptの圧縮 /packer/ http://dean.edwards.name/packer/ とってもシンプルな圧縮サービス。オプションで難読化することもできます。 JavascriptとCSSの圧縮 Compress javascript and css http://compressor.ebiene.de/ こちらもシンプルな
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！ 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート3 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」「HTML をシンプルに保ったままブロック要素を段組みする方法 パート2」の応用テクニックのご紹介です。 前回までは画像の横並びの解説でしたが、今回は段組みさせるブロック要素（サンプルの場合は div 要素）の内容が画像のみとは限らない場合です。 ボックスと余白の幅の値は以下です。 HTML ソースはこちら。シンプルなソースになっています。 <div id="content"> <div class="section"> <div class="box"> <h2>会社案内</h2> <p>株式会社シーブレインのご紹介</p> <!-- /.box --></div> <div class="box"> <h2>採用情報</h2> <p>プログラマ中途採用募集中！ まずはお問い合わせください。</p> <!-- /.box -
いろんなサイトの「ページの先頭へ」 | バシャログ。
コンテンツの内容が多くなってしまうと、よほど個性的な構成でない限り、ウェブサイトは縦に長くなってしまいます。 ページを最後まで見てくれたユーザを、速やかにナビゲーションメニューのあるヘッダー付近まで誘導する「ページの先頭へ戻る」ボタンは、小さいけれどなくてならない要素としてその地位を確立しています。 ナビゲーションメニューや検索ボックスなど、ウェブサイトのイメージを決定するほど花形要素ではないけれど、デザインする際に思いがけず悩んでしまうのが「ページの先頭へ戻る」ボタンです。 どんな「ページの先頭へ戻る」があるか、少しならべて見ました。 トップページに「ページの先頭へ戻る」がない場合は、企業情報のあたりをキャプチャしています。 日立マクセル株式会社 株式会社マツダ 村田製作所 任天堂株式会社 KDDI株式会社 どのサイトもわりとシンプルです。 「ページの先頭へ戻る」という文言もバラエティに
[使える CSS テクニック] CSSで実現するプルダウンメニュー | バシャログ。
使える CSS テクニックの第 4 回は「CSS で実現するプルダウンメニュー」です。 確認ブラウザは IE7、Firefox2、Opera9、Safari3.1 です。 CSS のみでは IE6 対応が不可能ですが、IE の独自機能（DHTML）を併用することで IE6 でもプルダウンメニューを実現しています。 まずは、以下のサンプルをご覧ください。 シーブレイン コーポレート WEBサイト制作 マニュアル制作 ローカライズ 検索エンジン Yahoo! Japan Google Goo excite Biglobe 週刊少年漫画 少年ジャンプ 少年マガジン 少年サンデー このサンプルの HTML は以下のようになっています。 <ul id="pulldown-menu"> <li><a href="#">シーブレイン</a> <ul> <li><a href="http://c-brai
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
