101CSS技術の続き（part2）＋CSS関連エントリおまけ*ホームページを作る人のネタ帳
101のCSS技術というエントリから英語が苦手な人向けのエントリ抜粋 前回記述したものとあわせて使うとより便利かもしれません。 101個無いということに一言だけ触れていたのですが、リンク先のNoupe氏の話だと『基本』という意味がこめられているようです。 なんにしても第2弾がでましたので、101個狙って欲しいところではありますね。 101 CSS Techniques Of All Time- Part2 例によって英語が苦手な人でもなんとななりそうなエントリを抜粋してご紹介。 今回は数あるリンクから5つを厳選しています。 ブロックリンクの説明 How to Create a Block Hover Effect for a List of Links | Smiley Cat Web Design ポイントをあわせることで、CSSによってわりあてたブロック自体にリンクを発生させる方法。
Lucky bag::blog: CSS で画像ポップアップ
JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。 popup.html 最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。 .photo a.popup:hover { background-color: #fff; } 何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。 あの頃のように… - CSS で画像ポップアップさせる (2005年6月10日 19:02) CSS で画像ポップアップ私の中ではかなりの革命です。なぜ今までこれに気が付かな
サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」:phpspot開発日誌
CSSTYPE - web safe typography on screen for pixel perfectionists サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」。 次のようなＵＩが用意されていて、フォントやサイズを選択すればすぐさまプレビューされ、確認を簡単に行うことが出来ます。 このサイトを知っておくことで、サイト構築時のフォントの表示調整にかなり役立ちそう。 確認できるのは、font, font-size, text-decoration, word-spacing, line-height, letter-spacing, text-align, color, background, width, padding, text-indent, button-text。 次の図は、実際のプレビュー画面。 letter-spacing とか line-h
CSSVista: Live CSS editing with Internet Explorer and Firefox simultaneously
Capabilities Litmus is an all-in-one email marketing solution that helps you optimize and personalize every email to maximize your ROI and create exceptional brand experiences for every subscriber. Why Litmus Email Monitoring Email Design Email Building Email Personalization Email Testing Spam Testing Email Analytics Email Collaboration and Review Technology Integrations AI & Emerging Email Techno
Most used CSS tricks | StylizedWeb.com
The reality is, most people don’t realize just how much better their website could perform with proper design psychology in place. Your website should accurately represent your brand and bring you (and convert) a consistent flow of targeted traffic. Our website doesn’t do anything for the business. The longer your website fails to perform, the more money it wastes. You’re not only losing out on re
CSSで独自デザインされた検索ボックスを作成:phpspot開発日誌
HOWTO: spruce up your search box with CSS and a background image d’bug Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. CSSで独自デザインされた検索ボックスを作成。 次のような検索ボックスを作成するサンプルが公開されています。 画像は１枚だけで、構成は結構シンプルなつくりになっているようです。 デザインにこだわるなら、こういった部分もちゃんとデザインしたいですね。 具体サンプルのページ
CSSでお店のメニュー風なページを作成:phpspot開発日誌
CSS - A Recipe for Success If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean. CSSでお店のメニュー風なページを作成。 CSSで次のような、お店のメニューとプライスを書いたようなページを作成するチュートリアルです。 実際のデモページはこちら マークアップも次のように美しく作れます。 <ul> <li> <p><em>Lorem
俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag
clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/ } ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる
1個の画像でシンプルに角丸を実装するCSSサンプル:phpspot開発日誌
Simple Round Corners in CSS (revisited) We are going to use a single image (20px x 20px) to provide our rounded corners and to save on using different images we will use one image only and simply place each corner into place using the background-position property. 1個の画像でシンプルに角丸を実装するCSSサンプル。 使うのは次の1枚の300バイトの画像。 なるほど、これでポジションをずらしてあげれば、画像は1枚でシンプルに実装できるわけですね。 HTMLマークアップとCSSの紹介と解説がされてます。 関連エントリ CSSで角丸テ
CSSを使ってカッコいい円形メニューを作る:phpspot開発日誌
metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。 尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。 HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。ＣＳＳをオフにすると次のようなリスト要素の見栄えになります。 Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。
CSSの便利ツール集:phpspot開発日誌
CSS Tools CSSの便利ツール集。 Em Calculator - ピクセル(px)とemの対応を計算することが出来ます その他オプティマイザ Clean CSS - CSSのオプティマイザ. CSS Tweak - CSSのオプティマイザその２ Online CSS Optimizer - CSSのオプティマイザその３ W3C CSS Validator - CSSバリデーター その他、便利なCSSツールのリスト。 どれもWEBで使えるのでＣＳＳ開発に便利ですね。 関連エントリ CSSデザインのページを作る際のスタイルガイド クールなCSSサイトをチェックできる『CSS Allstar』
MovableTypeにタグクラウド(SEO対策済み)を設置する
MovableTypeにタグクラウド(SEO対策済み)を設置する ブログのリニューアルをおこなったのですが、ついでにタグクラウドを設置してみました。(右メニューの一番下に設置してます。) 普通に設置しても面白くないので、SEOをふまえたタグクラウドにしてます。 タグクラウドを設置する利点 blogのエントリーを通常のカテゴリーとは別に、汎用性のある分類を行うことができます。 例えば、最近このblogでは『Twitter』に関する話題を取り扱うことが多いのですが、カテゴリーを作るほどではありません。 そんな場合『Twitter』のタグを設定しておけば、『Twitter』に関するエントリーの一覧を作ることができます。 参考：Twitterのタグページ また、SEO上も有効で、タグでキーワードを設定すれば、そのキーワードの専門ページが1ページ作成されることになります。 基本的な設置方法 テンプレ
clearfixはちゃんと考えられていた - 3ping.org
clearfixの決定版を作るについてコメントしたのですが、なぜか僕のTypeKeyが認証失敗になってしまい、がんばって書いた文章がお伝えできず、消すのももったいないからこっちに書きます。 こんにちは。 僕も以前、clearfixの記述について、なぜあんなに複雑なのか疑問に思いました。CASE10の記述がfloatのclearに必要な最低限の記述とし、ピリオドやvisibility,heightは必要無いんじゃないかとさまざまなブラウザーで検証したのですが、contentで何かを記述しないとボックスが生成されずに正常にクリアできないブラウザーがありました。そして、生成したボックスを消すために、visibilityやheight:0が必要になりました。 モダンブラウザの中でも特にモダン（笑）なものに限ればCASE10だけで大丈夫のようです。ただやはりこういったものは出来るだけ多くのブラウザで
IE、Firefox、Safari、OperaのCSSに関する互換性 - builder by ZDNet Japan
今を知り、未来を見据える 培ってきたノウハウを最新技術へ対応させる レガシーシステムのモダン化実現への道 ビジネスのためのデータ基盤構築 DX時代の企業成長はデータ活用が鍵 新たな展開を後押しするSQL Server活用 VMware modern App Days特設企画 VMware Tanzuによって拓かれる未来 これからアプリケーション戦略の道しるべ オラクルスペシャリストが語る！ 多くの企業で利用されるオラクルDBの課題 アセスメントの重要性とコスト最適化 DX推進を阻害する3つの要因 プロフェッショナルが語る データ分析・データ活用の実現 激変するビジネス環境の中でのDX モダンアプリケーション戦略への取り組みが 市場の競争力の源泉となる 内閣官房やラックが登壇 ゼロトラストが官民一体で サイバーセキュリティを定義する クラウドネイティブの実現 モダンインフラの構築・運用の課題
Listamatic: one list, many options - Using CSS and a simple list to create radically different list options
Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list. Vertical lists Simple list Simple list with square bullets Simple list with circle bullets Using images for bullets Using CSS background images for bullets Eric Meyer's simple separators Eric Meyer's Panelise Rollover
HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)
趣旨 ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。 情報ソース この問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇 である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。 基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
小粋なインターフェースを実現する25のコード （パート2） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
usrb.in
Restyle the web with Stylish
https://www.openvista.jp/archives/note/269/?269/