KASOKU – Just another WordPress site
CSSで画像の簡易ロールオーバーを行う方法 | パシのSEOブログ
この記事は、全く役に立たないものとなっています。 画像のロールオーバー ロールオーバー（マウスオーバー）とはページ中のボタン画像などにマウスカーソルが移動すると、その部分のイメージが違う画像に変わるようにする手法のことです。 マウスをのせてね マウスが載った途端にイメージ画像が変化することによってユーザのクリックを誘導します。リンクにはなっていない場合もありますが、これは多分に自己満足でしょう。 ロールオーバーはめんどくさいし重くなる ロールオーバーを行うには、代替の画像を作成しJavaやCSSで設定する必要があり、一枚一枚代替画像を作るのは結構めんどくさい作業です。 明らかにボタンと分かる画像に、ロールオーバーを指定する必要があるかどうかは意見の分かれる所ですが、サイトは極力軽い方が良いと思うので、使いすぎにも注意が必要です。 簡易ロールオーバーもどき そこで、代替画像を作る必要が無くロ
[CSS]マージンとパディングの使い分けをおさらい | コリス
CSSnewbieのエントリーから、ボックスモデルのマージン(margin)とパディング(padding)の利用シーンにおける違いを紹介します。 When to Use Margins and Padding マージン(margin)を採用する場合 パディング(padding)を採用する場合 ブラウザによる問題 マージン(margin)を採用する場合 borderの外側にスペースが必要な場合。 スペースに背景色(画像)を適用したくない場合。 上下に隣接したボックスにスペースを設ける場合、マージンの相殺を期待して、大きいサイズを有効にしたい場合。 例：15px + 20px の場合、スペースは20px。 ※相殺されない場合もあります。 パディング(padding)を採用する場合 borderの内側にスペースが必要な場合。 スペースに背景色(画像)を適用したい場合。 上下に隣接したボックスにス
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
写真に枠線を付ける方法｜物欲道
物欲道資本主義の恩恵を浴びて育つ物欲の魂（タマシイ）。 ビバ！ショッピング！写真に枠線を付ける方法 なんだか、頻繁に質問を受けるので、ここで説明します。 画像にスタイルシートで枠線を付ける方法です。 意味や理由は説明すると長くなるので省きますね。 まずスキンcssに以下の設定を追加します。 追加場所はどこでも良いと思いますが、一番下が無難かなあ。 .waku{ background-color:#ffffff; padding:10px; border: 1px solid #999999; } 記事作成画面でHTMLタグを表示させ、<img>タグ内に class="waku"を挿入します。 例：<img src="http://～10029422287.jpg" alt="" border="0" class="waku" /> これで、物欲道と同じ枠が表示さ
ページ全体に枠線をつけるCSSテクニック:phpspot開発日誌
CSS Trick: Creating a?Body-Border - CSS-Tricks Hicksdesign has been “fiddling” with their site design. ページ全体に枠線をつけるCSSテクニック。 ↓ブラウザのサイズを変更しても、水色の枠が画面にフィットするCSSサンプルです。 まず、マークアップ。上下左右用にdivを作成 <div id="left"></div> <div id="right"></div> <div id="top"></div> <div id="bottom"></div> 次にCSS。left,right,top,bottomのtop,left,rightなどを調節して、上下左右に設定して枠線を表現しています。 #top, #bottom, #left, #right { background: #a5ebff
これは便利! CSSのコピペはこのコンテンツで - SitePoint CSS Reference | ネット | マイコミジャーナル
SitePoint CSS Reference SitePointは31日(米国時間)、CSSのリファレンスサイトSitePoint CSS Referenceを公開した。同サイトはTommy Olsson氏およびPaul O'Brien氏という著名な2人のCSSエキスパートによって執筆されたもの。そのままコピー&ペーストして使えるようなCSSのコードと説明がまとめられたサイトで、CSSを編集するWebデザイナはぜひともブックマークしておきたいサイトだ。 SitePoint CSS Referenceは公開以前となるプライベートベータテストの状態で、すでにSitePointコミュニティからのフィードバックを受けて改善が実施されている。いわば現状でのCSSベストプラクティスがまとまっているコンテンツだ。 SitePoint CSS Reference - そのまま使えるサンプルとブラウザでの
[CSS]テキストにグラデーション効果をつけるスタイルシート
Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ 利点としては、下記のような点が挙げられています。 テキストなので、ブラウザからのサイズの拡大・縮小が可能。 背景画像を変更することで、グラデーションを変更することが可能。 見出し画像をいちいち作成する必要がない。 数が多い場合、作成時間・帯域の節約になる。
CSSのレイアウト作成に役立つ便利なリソースいろいろ
最近のページやサイト作成に欠かすことのできない「CSS（カスケーディング・スタイル・シート）」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する
よくある質問っぽいののjQueryを使ったサンプル｜CSS HappyLife
2007年12月6日追記 IE6で選択中のタブの上が切れていたのを修正しました。 具体的にはcss/style.cssの35行目にfloat: left;を追加しております。 いろんなサイトで見かける「よくある質問」。 一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。 特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。 それならそういった手間が掛かるかも知れないことを少しでも省けないかしら？って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。 （単純にボクがこのスタイルが一番見やすくて好きってだけだったり） サンプルページ サンプルダウンロード(Zip:20KB) メインのCSSファイル （サンプ
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
CSSでの左寄せ・中央寄せ・右寄せ方法、1行に混在も可 [ホームページ作成] All About
CSSでの左寄せ・中央寄せ・右寄せ表示方法 日本語や英語など「文字を左から右へ向かって記述する言語」で書かれたHTMLでは、文字寄せ方向が指定されていないなら、文章は左寄せで表示されます。しかし、タイトルや見出しなどを中央寄せ(センタリング)して掲載したい場合はよくありますし、日付や注釈などを右寄せにして掲載したい場合もよくあるでしょう。 ウェブページに掲載した文章や画像の文字寄せ方向を指定して、左寄せ・中央寄せ・右寄せで表示する方法は簡単です。CSSのtext-alignプロパティを使って、寄せたい方向を指定するだけですから。しかし、単に1行の文章を左寄せや右寄せで表示するのではなく、同じ行内に「左寄せの文章」と「右寄せの文章」を同時に書きたい場合もあるでしょう。例えば下図のようにです。 そこで今回は、HTMLで記述した文章にCSSを適用して、特定の範囲を左寄せ・中央寄せ・右寄せの3通り
![CSSでの左寄せ・中央寄せ・右寄せ方法、1行に混在も可 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/90bd1c1df5e3bc375b9a21a7908a0861804cfd72/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F7%2F8%2F1552874382%2Ftopimg_original.jpeg)
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」:phpspot開発日誌
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 2007年10月11日- Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript I believe that it isn't necessary to point out the benefits of having a sitemap somewhere on your site.サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 スタイルなしの状態のリストを美しくツリー状に整形できます。 JavaScript によってツリーがクリックで開閉できます。 3種類の違うスタイルのサンプルが公開されているのでお好みのサンプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーをデザインする | DesignWalker
120以上生成できるCSSメニュー作成ジェネレータ『IzzyMenu』レビュー*ホームページを作る人のネタ帳
IDEA * IDEA
2007年度web制作者の為のまとめ再構築30選*ホームページを作る人のネタ帳
[CSS]テーブル要素を使用しないで制作するカレンダー
Mis Algoritmos » Blog Archive » Some styles for your pagination
ブログに使えるカレンダーデザインまとめ - DesignWalker
