[CSS]ブラウザの表示領域いっぱいにボーダーを配置するスタイルシートのテクニックいろいろ
Simplified page borders in pure CSS デモページ（当方作成） [ad#ad-2] 下記に、元記事で紹介されている方法（その1）をはじめ、コメントに掲載されている方法を含めて紹介します。 対応ブラウザは基本的に:before, :after疑似要素を使用するため、IE 8+, Firefox, Chrome, Safari, Operaとなります。 ブラウザの表示領域いっぱいにボーダーを配置する方法：その1 元記事で紹介されている方法です。 デモページ：その1（当方作成） HTML HTMLは、divなど特別な要素は配置しません。 以下に紹介する全ての方法で共通です。 <html> <body> </body> </html> /*------------------------------------*\ BORDERS \*---------------
[CSS]ブラウザのスタイルを初期化するスタイルシートの総まとめ -2010年版
ブラウザごとに異なるデフォルトのスタイルを初期化するスタイルシートの歴史を振り返りつつ、2010年の最新のCSS Resetまでのまとめを紹介します。 A Comprehensive Guide to CSS Resets [ad#ad-2] ユニバーサルセレクタから始まったCSS Resetの進化の過程をたどり、最近リリースされたCSS Resetを紹介します。 下記は、各ポイントを意訳したものです。 (X)HTML "Hard" Reset undohtml.css -2010 version Poor Man's Reset Siolon Reset Inman Reset Tripoli Reset Dan Schulz's Reset Thierry Koblentz's base.css Simple Reset CSS Mini Reset Soft Reset Less i
[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル
画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w
背景画像をブラウザの枠いっぱいに表示するテクニックの考察
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
ウェブデザイナーのための実用的なデザインとコーディングテクニック集
Five Useful Design Techniques and Coding Solutions For Web Designers [ad#ad-2] 下記は各ポイントを意訳したものです。 PHPはWordPressでのものとなっています。 1. 複数の項目がある棒グラフのエフェクト 2. ホバー時に追加情報を表示 3. カテゴリごとに異なるカラーを適用 4. ちょっと面白い画像のキャプション 5. ウェブのための印刷風デザイン おわりに -developersではなく、designers 1. 複数の項目がある棒グラフのエフェクト 下記のサイトで使用している棒グラフでは、上：タグの種類と数、下：コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。 こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することに
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
[CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック
CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。 Multiple Backgrounds and Borders with CSS 2.1 CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似要素をサポートするIE8+, Fx3.5+, Safari 4+, Chrome 4+, Opera 10+となっています。 実装の仕組みは上記の画像のように、擬似要素の「:before」と「:after」を利用したもので、複数の背景やボーダーを配置することで面白い効果が得られます。 下記にその実用的で面白い効果をもったデモを紹介します。 マルチプル バックグランド デモ：Multiple Backgrounds with CSS 2.1 CSSファイル：backgrounds.css
透過性をウェブデザインに取り入れる方法
CSSや画像などを使用して、透過性をウェブデザインに取り入れる方法をCSS-Tricksから紹介します。 Spectrum Theme どんなウェブデザインでも最終形では基本的に目の錯覚を巧みに利用しています。Photoshopをはじめ他のグラフィック用のアプリケーションで透過性のエフェクトを作成し、フラットな画像として書き出すことができます。 Photoshopで透過性のある画像を作成するには、レイヤーの不透明度、塗りの度合い、ブレンドモードなどで可能です。 Opacity <textarea name="code" class="css" cols="60" rows="5"> transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } </te
[CSS]サイズがばらばらで無指定の画像を一定サイズで表示するスタイルシート
画像を大量に配置するECサイトなどに便利そうな、スタイルシートのテクニックをCSSplayから紹介します。 CSS play - F.a.S.T - Fit and Shrink Technique デモ サイズはばらばらで、しかもサイズの指定をおこなっていない画像を一定の幅と高さのボックスにアスペクト比を維持したまま真ん中に表示します。 上記のキャプチャはスケールを変えているので、ぜひ元サイトのデモをご確認ください。 対応ブラウザはIE7/8, Fx, Op, Safari(PC), Chromeなど主要なブラウザのほとんどで動作します。 IE6では画像の元サイズで表示されてしまい、しかもボックスの真ん中には表示されない、とのことです。
html5 ざっくりメモ
html5 関係無いのも有るかもですが、個人的にhtml5の要点をまとめたメモ。 ほんとにざっくり書いているので、何か期待しても何も出ません＞＜ 日本語が含まれる場合、title要素は charset の後（次）。 address要素は連絡先情報に使う。 例えば企業サイトの各支店の住所一覧とかに使うのはNG。ブログとかで、上手い店とかの住所にaddressを使うのもNG。 あくまでも、そのサイトの管理者への連絡先。なので、copyrightに使うのもNG。 copyrightはsmall要素が妥当。 なので、p small copyright って感じになる。 nav要素はあくまでも主要なナビゲーションに使う。 主要なってのは具体的にはグローバルナビゲーションやローカルナビゲーション。 なので、関連リンク一覧とか、ページ内にあるちょっとしたリンクに使うのはNG。 hgroup要素は、見出し
IE 6で泣かないための、9つのCSSハック（3/3）- ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 【7】リサイズ時にずれる この問題は、親要素に「position: relative;」を追記することで修正できます。このように記述することで、親要素を基準として配置できます。 ■ 構文 body { margin: 0 auto; width: 500px; height:500px; background:#ccc; position: relative; } p { background:#f00; position: relative; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/x
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
[CSS]シンプルに実装する画像のロールオーバーエフェクト
シンプルなHTMLで、ごく簡単なCSSで、画像もシンプルに一枚だけ使用して実装するロールオーバーエフェクトをDeveloper's Paradiseから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="rollover_img"> <a title="Ace Infoway India" href="http://blog.aceinfowayindia.com"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum. In volutpat. Vestibulum elit. Aenean eget enim vitae tellus bibendum pellentesque. Sed
角丸のCSSボックスやナビゲーションを作成できるオンラインサービス -Mierendorff
CSSやJavaScriptの知識がなくても簡単に、角丸のCSSボックスやアニメーションで動作するナビゲーションが作成できるオンラインサービスを紹介します。
CSSでセクシーな角丸立体ボタンを作成するためのチュートリアル:phpspot開発日誌
How To Design A Sexy Button Using CSS - Freelance Web Design Belfast Northern Ireland - Lee Munroe CSSでセクシーな角丸立体ボタンを作成するためのチュートリアル 次のような、角丸かつ立体的なボタンをCSSで作るチュートリアルです。 CSSでボタンの色を変更するのも簡単です。 古いブラウザだとちゃんと表示できない点には注意ですが、なかなかカッコいいボタンとなってますね。 関連エントリ CSSでボタンを綺麗にスタイルするサンプル集 CSSでクールなボタンを作るまとめ CSSによるボタンスタイリング例いろいろ
CSSスプライトを使ったナビゲーションメニュー作成サンプルとチュートリアル:phpspot開発日誌
How to Make a CSS Sprite Powered Menu | Build Internet! CSSスプライトを使ったナビゲーションメニュー作成サンプルとチュートリアル。 CSSスプライトによって実装された次のようなクールなメニューを作成するチュートリアルと、成果物のアーカイブがダウンロードできます。 メニューは綺麗な ul のリストで作れるのでマークアップ的にも安心です。 <ul> <li>・・・</li> <li>・・・</li> <li>・・・</li> </ul> コードがシンプルに掲載されていてわかりやすいものになってますので入門にもよさそう。 関連エントリ サイト高速化のためのCSSスプライトをブラウザ上で簡単作成できる「Sprite Creator」 CSSスプライト作成補助ツール「CSS Sprit.es」
[CSS]スタイルシートのすご技、スムーズに回転するコーラの空き缶
テクスチャをスクロールに合わせて移動させる「displacement maps」のテクニックを使用したスタイルシートをRomán Cortésから紹介します。 Pure CSS Coke Can 「displacement 」は移動、転置、置き換え、といった意味で、CSS1のbackground-attachmentとbackground-positionを利用して、スクロール時に画像の異なる部分を表示させています。 当初はコードの複雑さと巨大さでサイズが肥大化するだろうと思われていましたが、5KB以下のコードで実装できたそうです。 対応ブラウザはIE8, Fx3.5, Op10, Safari4, Chrome3で動作テストをしたとのことです。
cssの情報・まとめ - かちびと.net
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツール オンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版 RoundedCornr / 角丸のHTML・CSSコードを生成してくれる CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認 CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できる CSS Builder / オンラインでスタイルを生成可能 Spiffy Box / cssによる角丸を簡単に生成 The
PHP・CSS・jQueryを使った横向きのタイムライン実装例:phpspot開発日誌
Advanced Event Timeline With PHP, CSS & jQuery ? Tutorialzine PHP・CSS・jQueryを使った横向きのタイムライン実装の例とチュートリアル、サンプルプログラムが公開されています 次のような、横にスクロールするイベント表みたいなものが作れます。ツールなどに組み込む場合に参考にできるかもしれません。 デザインもカッコよくてスクロールバーの細かな部分も綺麗に実装されています。 関連エントリ 1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」 JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]商用サイトでもそのまま利用できるCSSのナビゲーション集