CSS Sprites風なことをインライン画像でやってみた | バシャログ。
こんばんは、お弁当に入っている梅干しは最後に食べるishidaです。 暑い時期になるといつもは全然飲まないのに、やたら炭酸飲料が飲みたくなります。 特に好きなのがスプライト。ブランド名の語源は、英語のSpirit（元気の意）とSprite（妖精）に由来しているみたいです。 といった感じで無理やり話題につなごうとしていますが…スプライトと言えばCSS Sprites。 背景画像としてCSS Spritesを使うパターンは多いと思いますが、背景じゃなく通常の画像でも CSS Spritesみたいなことができないかな？と思ったので、今回はそれをご紹介。 画像を用意 まずは、以下のような画像を作ります。 sprite_icon.gif 画像のサイズはきりがイイほうが設定しやすいので 90x90 としています。 1つのアイコンが 30x30 ってことです。 サンプル 以下がサンプルです。 サンプル0
汎用的に使える最近流行りの3カラムブログ用テンプレートを公開します | バシャログ。
こんばんは。最近はドラクエ9でレベル上げばかりをしているishidaです。 以前、[使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現するの記事を書きましたが、反響が大きかったようでしたので今回は続編です。 ブログ（MovableTypeやWordPress）のデフォルトテンプレートって、divを多く使用しているためcssだけを差し替えるにも結構手間がかかります。 そこで今回は汎用的に使えるブログ詳細ページのテンプレート（XHTML+CSS）を作ってみました。 皆様のコーディング時間短縮になれば幸いです。 ブログ3カラムレイアウト まずはサンプルをご覧ください。 3カラムブログ用テンプレートのサンプルページ XHTML構造は以下のようにしてます。 ヘッダーとフッターはブラウザ幅いっぱいに広がるようにしています。 またXGAモニタに最適化するため表示エリアは980px
【Dreamweaver】デザインビューを使って最速コーディング | バシャログ。
Dreamweaver のデザインビューを使って素早く HTML のコーディングをする方法です。 まずは、原稿をプレーンなテキストデータに落として、秀丸等のテキストエディタを使って整形します。 ブロック毎に改行を二つ入れていきます。文中の改行箇所は改行を一つ入れます。 こんな感じです タイトルタイトルタイトル サブタイトルサブタイトル 本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文 見出し見出し 本文本文本文本文本文本文 見出し見出し 順不同リスト 順不同リスト 本文本文本文本文 見出し見出し 番号順リスト 番号順リスト 見出し見出し 定義リストタイトル 定義リスト内容定義リスト内容 定義リストタイトル 定義リスト内容定義リスト内容 Dreamweaver を立ち上げて、新規作成ファイルの中に段落（p）を一つだけ入れます。 そして先ほどのプレーンなテキストを
【CSS】clearfixを使わずにfloatを解除する | バシャログ。
以前、floatを解除する clearfixハックという記事を書きましたが、できることならハックは使いたくないと最近思うようになってきました。 いろいろと検証した結果、今回ご紹介するのはハックを使用せずにfloatを解除するための方法です。 divの構成はこちら。 boxというクラス名の div （floatを解除するための div ）は必要です。 cssのソース div.box { overflow: hidden; /* これがポイント */ position: relative; /* IE6でエリアを選択できるようにする */ /* DreamWeaverのデザインビューで正しく表示させる */ } div.left { float: left; /* 左に寄せて配置 */ width: 200px; } div.right { float: right; /* 右に寄せて配置 *
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
