Supported browsers: Opera unsupported IE unsupported Safari supported Firefox supported Chrome supported Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article.... 続きを読む

• www.html5rocks.com
• テクノロジー

はじめまして、 Ameba事業本部 teens事業部でフロントエンドディベロッパーをしている 2012年入社の山内と申します。 業務では、スマホ限定デコれるホムペ！Candyと新規アプリのHTML/CSSでの運用と開発を担当しています。ポヨン！プルン！という動き今回は下記... 続きを読む

• ameblo.jp:ca-1pixel
• テクノロジー

Twitter Bootstrap 3 の変更点概要 Bootstrap 自体の仕様だけでなく体制なども変更されるようです。 モバイルファースト twitter/bootstrap, twitter/bootstrap-server, mdo/bootstrap-blog（プライベートレポート）を twbs organization アカウントへ移行 サイ... 続きを読む

• pimpmysite.net
• テクノロジー

単独でも素敵なかっこいいエフェクトで十分なのに、それらが全部まとまって、更に実装方法にもこだわったオープンソースのCSSのフレームワークを紹介します。 Maxmertkit まずはトップページのデモで、その素晴らしさが垣間見えます。 ドラッグ&ドロップでさま... 続きを読む

• coliss.com
• テクノロジー

CSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ！今回はサンプルファイルも用意したので、ダウンロードしてコードをじっ... 続きを読む

• www.webcreatorbox.com
• テクノロジー

Copyright © 2012 GitHub Inc. All slide content and descriptions are owned by their creators. F.A.Q. Terms of Service Privacy Policy 続きを読む

• speakerdeck.com
• テクノロジー

CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 調べたついでに、当ブログのfont-familyも変更してみました。 変更前 変更後 認識誤りがありましたらどこかでつぶやいてください。 １．f... 続きを読む

• www.koikikukan.com
• テクノロジー

Advances in HTML5 and CSS (for example transitions, animations, transforms, text shadows, box-shadows, gradients, SVG) have improved the graphical and interactive richness of HTML. SVG filter effects are now moving to Filter Effects 1.0 to be... 続きを読む

• www.adobe.com
• テクノロジー

Using CSS3 to create Google-style UI elementsCSS3 Google Buttons CSS3 Google Buttons helps you easily create Google-style buttons. Buttons The "buttons" can be created by adding class="g-button" to any appropriate <a>, <button>, or <input> el... 続きを読む

• todc.github.com
• テクノロジー

Webデザインに携わっている方はすでにご存知と思われますが、「a:visited」に設定可能なプロパティが配色系のものだけに限定された件について情報展開します。 認識誤り等ありましたらご指摘ください。 １．事象 CSSの擬似クラス「:visited」に設定したスタイル... 続きを読む

• www.koikikukan.com
• テクノロジー

Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can... 続きを読む

• google-styleguide.goog...
• テクノロジー

おこのみで唐辛子を加えても良いと思います。私は辛いのが大好きなので黄金一味をささっとふりかけて食べます。 最近のカレーはコレです 京都に来てからそんなにカレーを作ることはないのですが、たまに作るのはいつもバターチキンカレーです。去年とかはヨーグ... 続きを読む

• kurage.hatenablog.com
• 暮らし

寡聞につき、rem(root em)なんてフォントサイズの単位があるのを今まで知りませんでした。ちょっと興味を持って調べてみたところ、結構使えそうなテクニックだったのでご紹介したいと思います。 rem (root em) というのは、「ルート要素（典型的にはhtml要素）... 続きを読む

• d:id:Syunpei
• テクノロジー

Internet Explorer の自動アップグレードについて | TechNet長かった… 本当に長かった… やっと、IE 6, IE 7 が居なくなるのですね…uupaa.js ver 0.8 に埋まっている処理などを参考に、IE 6, IE 7, IE 8 が居なくなった未来では何が可能になるのか抜粋してみ... 続きを読む

• uupaa.hatenablog.com
• テクノロジー

デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class... 続きを読む

• coliss.com
• テクノロジー

iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減... 続きを読む

• www.html5-memo.com
• テクノロジー

Editor's Draft 24 September 2011 This version: http://dev.w3.org/csswg/css-variables/ Editor's draft: http://dev.w3.org/csswg/css-variables/ Editors: Tab Atkins Jr., Google, Inc. Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. ... 続きを読む

• dev.w3.org
• テクノロジー

jsdo.itで「SPEC」というコーディングコンテストを開催しています。 今回のテーマは以下の二つ。 CSSだけを使って必殺技の演出を加えてください ローディングの演出を考えてください 「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…！」と... 続きを読む

• design.kayac.com
• テクノロジー

デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> 繊細なグラデーションを使ったデザインです。 hr.style-o... 続きを読む

• coliss.com
• テクノロジー

iPhone, CSS, 開発前編ではiOS5のMobile Safariから使えるようになったHTMLやCSSの要素などについて試してみた、半分だけ紹介・解説しました。まだ前編を読んでいないという方は先に前編を読んでおくことをおすすめします。→iOS5のMobile Safariから使えるよう... 続きを読む

• kudakurage.hatenadiary...
• テクノロジー

開発, CSS, iPhoneiPhoneがでた当初はWebApp押しだったAppleも3Gを出してからすぐにネイティブアプリに手のひらを返してしまって、WebAppはすっかり影がさしてしまいました。それでも、jQTouchやSencha Touch、jQuery mobileなどWebAppの開発支援となるJavascri... 続きを読む

• kudakurage.hatenadiary...
• テクノロジー

デスクトップ用の各ブラウザをはじめ、スマートフォン、ワイドスクリーンなど、さまざまユーザー環境を想定して確認できるツールを紹介します。 各ツールで表示しているのは、Media Queriesを使用している「CSS-Tri [...] 続きを読む

• coliss.com
• テクノロジー

Hmm... looks like you're using a browser that doesn't support CSS animations. You should go get one in order to use this cool stuff. animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for ... 続きを読む

• daneden.me
• テクノロジー

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. Nerd alert: Bootstrap is built with LESS and was de... 続きを読む

• twitter.github.com
• テクノロジー

Twitterが今日（米国時間8/19）、Bootstrapをリリースした。CSSを使うWebアプリケーションを作るためのツールキットで、CSSの文字指定、フォーム、ボタン、テーブル、グリッド、ナビゲーション、アラートなどなどを使ってアプリケーションのフロントエンドを作... 続きを読む

• jp.techcrunch.com
• テクノロジー

FruidレイアウトでもFixedレイアウトでも、入れ子でも対応できる、シンプルなグリッドシステムを実装するスタイルシートを紹介します。 デモページ：入れ子のグリッド Gridの使い方 Gridは、使い方も簡単です。 コンテナとなる要素のclassに「grids」を加えます... 続きを読む

• coliss.com
• テクノロジー

CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが... 続きを読む

• design.kayac.com
• テクノロジー

背景色 / 透過色 # (任意): 何も入力していない場合は、透過であれば黒背景、それ以外では白背景を使います。 続きを読む

• ja.spritegen.website-p...
• テクノロジー

The web has become a rich repository of content for reference and educational materials, news, articles, and interactive apps. However, some of the capabilities that are taken for granted when designing content for print are still impossible ... 続きを読む

• www.adobe.com
• テクノロジー

おっと、こいつは便利かも。小技として覚えておきたいです。 えと、あれですね、立体感のある水平線をつくる方法です。 ↑ こういうの。 これ、細かくみると線と影が描き込まれていて、今までは画像で表現するしかありませんでしたが・・・BorderとBox-Shadowで... 続きを読む

• www.ideaxidea.com
• テクノロジー

基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。 続きを読む

• weboook.blog22.fc2.com
• テクノロジー

あらゆるサイズのエレメントに利用が可能な、紙がひらっとめくれたようなページカールのエフェクトを与えるスタイルシートを紹介します。 デモページの拡大 このエフェクトはページのあらゆるサイズの要素に簡単に適用できます。 紙がひらっとめくれたエフェク... 続きを読む

• coliss.com
• テクノロジー

CSS、スタイルシート初心者の頃悩んだりハマったことを少しまとめてみました。フロートまわりのトラブルや、IE特有のhasLayout問題など。Webテクニック BeginnerBrowserCSS Share CSS、スタイルシート。初心者のころにはCSSのスタイルがうまくいかなくて、半日... 続きを読む

• webdesignrecipes.com
• テクノロジー

現在floatを解除する方法として、"clearfix"がよく使用されていると思います。 しかしclearfixが初めて公開されたのが、2004年5月8日。 それ以来、7年間ほとんど形を変えずにclearfixが使用されてきました。 ブラウザもCSS3を多く対応してきている中で、「それ... 続きを読む

• kojika17.com
• テクノロジー

主に海外の解析部隊の人達によって、まどか☆マギカの作中で使われてるルーン文字が解析されつつあるみたいです。ご丁寧にもTrueTypeフォントがダウンロード出来るようになってたので、早速はてダで使ってみます。 まずMadokaRunes.ttfだけど、件のサイトへの直... 続きを読む

• d:id:y-kawaz
• テクノロジー

ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！みよう！みよう！ View Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :... 続きを読む

• hail2u.net
• テクノロジー

“Using SASS has not only improved my CSS, but also the page structure/layout, and decreased IE headaches. Super highly recommended.” - Matt Darby“If I were to write a post about how much Haml and Sass have changed the way I develop for the... 続きを読む

• sass-lang.com
• テクノロジー

CSS3はIEが対応できていないこともあって、今まであまり紹介してませんでしたが、使いこなせると面白そうなのでまとめてみました。 CSS3リファレンス 有名なサイトですね。CSS3に限らず、HTMLやJavaScriptなど膨大な情報量です。 CSS-EBLOG 各ブラウザで先行実... 続きを読む

• weboook.blog22.fc2.com
• テクノロジー

似たようなツールは他にもあるが、シンプルで使いやすそうだったのでご紹介。 Unused CSSを使えば、使われていないCSS設定がどこにあるかを教えてくれる。 使い方は簡単で、チェックしたいサイトのURLを入力するだけだ。 すると、どのCSSファイルにどれだけ不要... 続きを読む

• www.100shiki.com
• テクノロジー

対応ブラウザはCSS3と:before疑似要素を使用しているため、Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+です。 デモページ 紙を折ったようなエフェクトの実装 紙を折ったようなエフェクトは、全部で4種類あります。 HTML HTMLはdiv要素を使用するだけ... 続きを読む

• coliss.com
• テクノロジー

ユニバーサルセレクタから始まったCSS Resetの進化の過程をたどり、最近リリースされたCSS Resetを紹介します。 下記は、各ポイントを意訳したものです。 (X)HTML "Hard" Reset undohtml.css -2010 version Poor Man's Reset Siolon Reset Inman Reset Tripoli ... 続きを読む

• coliss.com
• テクノロジー

サイト内検索 HTML5 をはじめよう HTML5 の雛形 HTML5 のリセット・スタイルシート HTML5 を IE や Firefox 2 でも使えるようにする方法 html5 を使ったブログのデザイン 廃止された要素とバリデーション HTML5 のセマンティクス header 要素 footer 要素 aside... 続きを読む

• www.html5.jp
• テクノロジー

The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all... 続きを読む

• line25.com
• テクノロジー

ブラウザシェアNo.1のIE兄弟がいる限り使う機会がなかなかないCSS3ですが、使ってみるとなかなか面白いです。 ということで、今回は画像を使わないで<a>タグとCSS3だけでアクア調ボタンをつくる方法をご紹介します。 対応ブラウザは現時点ではSafari、Google Ch... 続きを読む

• www.sd-lab.co.jp
• テクノロジー

CSS done right. Less extends CSS with several invaluable features, including variables, inheritance and mixins. CSS design just got fun again.Get Less The Less Ruby gem compiles Less code to css. Works best with Ruby 1.9. To install: Once ins... 続きを読む

• lesscss.org
• テクノロジー

CSSでのレイアウトがとっても楽になるCSSグリッドシステム（CSSグリッドレイアウト）のご紹介です。960pxのCSSグリッドはもちろん、これからの主流？の978pxのCSSグリッドシステムも合わせて紹介しています。Webデザインに欠かせないCSSでのレイアウト作り。 コ... 続きを読む

• webdesignrecipes.com
• テクノロジー

Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少... 続きを読む

• www.webcreatorbox.com
• テクノロジー

CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザ... 続きを読む

• design.kayac.com
• テクノロジー

CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確... 続きを読む

• css-happylife.com
• テクノロジー

To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags): pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ w... 続きを読む

• perishablepress.com
• テクノロジー

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers. View font details to get th... 続きを読む

• code.google.com
• テクノロジー

CSS3, please! This element will receive inline changes as you edit the CSS rules on the left. Enjoy! /* ------------------------------------------------------------- CSS3, Please! The Cross-Browser CSS3 Rule Generator ========================... 続きを読む

• css3please.com
• テクノロジー

CSS3を使用して、ディテールにこだわったボタンを実装するスタイルシートのチュートリアルをInferenceから紹介します。 Creating a Realistic Looking Button with CSS3 実装されたデモは、元記事の下「Show and Tell」で確認できます。 対応ブラウザはFx3.6, S... 続きを読む

• coliss.com
• テクノロジー

角丸、ドロップシャドウ、グラデーションなど多彩で面白いスタイルをCSS3では簡単な記述で実装できます。 CSS3でいったい何ができるのか、どのように記述するのかなど、ベーシックなものから実践的なテクニックまでサンプルやコ [...] 続きを読む

• coliss.com
• テクノロジー

Internet Explorer、Firefox、Safari、Chrome、Operaなど主要ブラウザの中の特定ブラウザのみに有効なCSSハックをbradKELLETTから紹介します。 Documenting the Hacks: CSS Browser Targeting CSSハックは使用しないに越したことはありませんが、必要がある場合... 続きを読む

• coliss.com
• テクノロジー

cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集で... 続きを読む

• kachibito.net
• テクノロジー

floatを解除する際にclearを使用せずに解除する「clearfix」の改良版をPerishable Pressから紹介します。 The New Clearfix Method いわゆる旧タイプのclearfixはMac IEも対応ブラウザに含まれているため、スタイルシートは下記のようになります。 旧タイプのcl... 続きを読む

• coliss.com
• テクノロジー

JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテ... 続きを読む

• phpspot.org
• テクノロジー

Category ： CSS リファレンス 今まで使ってコーディングが楽になったと思われるCSSテクニック（一部CSSではない部分もありますが...）などをまとめておきたいと思います。 コーダーの方は知っている事が殆どだと思いますが、知らない人は直ぐにでも使える簡単... 続きを読む

• www.css-lecture.com
• テクノロジー

光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が... 続きを読む

• css-happylife.com
• テクノロジー

7 Key Principles That Make A Web Design Look Good下記、そのポイントを意訳したものです。1. バランス2. グリッド3. カラー4. グラフィック5. タイポグラフィ6. ホワイトスペース7. コネクションおわりに1. バランスバランスで一番大切なことは、デザインが... 続きを読む

• coliss.com
• テクノロジー

sass の公式ページSass - Syntactically Awesome Stylesheets後半は特にトップページに記載されていないのですが、勢いで書きました。疲れました。 SassSass を使う事で再び CSS の虜になれるぜ。Sass は CSS にネスト、変数、 Mixin 等を加えたものさ。 Beauty... 続きを読む

• d:id:seiunsky
• テクノロジー

CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつ... 続きを読む

• phpspot.org
• テクノロジー

こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送... 続きを読む

• c-brains.jp
• テクノロジー

CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを... 続きを読む

• 3ping.org
• テクノロジー

こんにちはこんにちは！！ 今日は、きみの人生をちょっぴり豊かにするライフハックの紹介なんです！ ★はてなスターをもらう簡単な方法★ 1. 巨大な透過gif画像を用意 → http://hamachiya.com/junk/bt3000.gif 大きすぎる画像はIEが扱いきれないかもしれないか... 続きを読む

• d:id:Hamachiya2
• 暮らし

Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、... 続きを読む

• 3ping.org
• テクノロジー

スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブ... 続きを読む

• coliss.com
• テクノロジー

使えるcssのオンラインサービスが 50個、Speckyboyで記事にされていた のでよさ気なものをいくつかご紹介します。 全部良さそうなので気になる方はぜひ 記事元を訪れてみてください。 日本語のテキストで作成できるｃｓｓメニュージェネレーターは本当に助かり... 続きを読む

• kachibito.net
• テクノロジー

これ、ちょっと便利かもですよ。リスト形式（UL）でサイトマップを書くとスタイリッシュなマップに仕上げてくれるCSSです。ちゃんとリンク先も保持してくれますよ。 ↑ こういうHTMLが・・・。 ↑ こうなっちゃいます。 かなり綺麗にフォーマットしてくれるので... 続きを読む

• www.ideaxidea.com
• テクノロジー

Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML Contest Details ...the introductory paragraph... ...v... 続きを読む

• coliss.com
• テクノロジー

Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデ... 続きを読む

• e0166.blog89.fc2.com
• テクノロジー

古いブラウザでもCSS3セレクタを使ってページデザインができるようにしてみた - latest log JavaScript, CSS「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」「CSS3セレクタを古いブラウザでも使いたい!」といった現場の声にお応... 続きを読む

• b.hatena.ne.jp
• テクノロジー

背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。 背景画像 スクリプトのベースにはjQueryが使用されており、下記のスクリプトをプラグインとして使用します。 $(... 続きを読む

• coliss.com
• テクノロジー

正直、Webデザインは苦手だ。システムは構築できても、その後のデザインで行き詰まって頓挫したサービスは数知れない。最近ではWebデザインテンプレートを使うようになったが、汎用性の低いものが多くカスタマイズも困難な場合が多い。 Basecampにも似たWebアプ... 続きを読む

• www.moongift.jp
• テクノロジー

WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル 2009年04月15日 PHP Tutorials Examples Embedding PHP In CSS WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル。 CSSファイルをPHPとして実行して共通の値を変... 続きを読む

• phpspot.org
• テクノロジー

スタイルシートで実装する実用的なものからちょっと変わったものまで、25のテクニックをDesizn Techから紹介します。 25 Advanced CSS Techniques 1. CSS Gradient Text and Background テキストや背景をグラデーション表示。 CSS Gradient Text Effect CSS Gra... 続きを読む

• coliss.com
• テクノロジー

CSSは最近のWebシステムでは当たり前のように使われている。そして肥大化したCSSはネットワークの帯域を余計に食っているようなものだ。それを解決する手段として、CSSの余計な空白や改行を消して圧縮する技術がある。 こんなにちっちゃくなっちゃった！ だがCS... 続きを読む

• www.moongift.jp
• テクノロジー

全幅970px（960+10px）の6カラムと12カラムのグリッドをベースにし、汎用的に展開できるように設計されたグリッドシステム「The Golden Grid」を紹介します。 The Golden Grid ベースとなる6カラムと12カラムのグリッドは、下記のようになっています。 6カラム... 続きを読む

• coliss.com
• テクノロジー

EmChart | Aloe Studios Blog Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser.CSSのem指定のサイズが一発でわかっちゃう「EmChart」 基本のサイズが24ピクセルで... 続きを読む

• phpspot.org
• テクノロジー

why the iPhone? Creative mobile web design is here, and it can be tough searching the web for inspiration when you need some. You never know if a site has a mobile [iPhone] alternative, and if they do you either have to use your phone to find... 続きを読む

• cssiphone.com
• テクノロジー

今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認する。 ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するか... 続きを読む

• builder.japan.zdnet.com
• テクノロジー

第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1<... 続きを読む

• c-brains.jp
• テクノロジー

【モバイル向けサイト制作】 今から始める携帯サイト制作 第1回：携帯サイトとPCサイトはここまで違う！ 著者：柴崎 正也 公開日：2008/10/7（火） 本連載では、「PCサイトを制作してきたけど、携帯サイトは初めて」といった企業や個人クリエイター向けにPCとモ... 続きを読む

• www.thinkit.co.jp
• テクノロジー

DOCTYPE スイッチについて再度まとめ 以前 DOCTYPE スイッチについての検証とまとめと一覧表という記事で DOCTYPE スイッチについてまとめましたが、あれから 2 年弱が経過したので、改めてまとめてみようと思います。 まとめるまでの話がけっこう長いので、一... 続きを読む

• hxxk.jp
• テクノロジー

webサイトを作成するときに、どうしてもサイト全体の色を決められないという人の為のエントリ。 本当は少し濃いオレンジ系が食べ物屋に向いているとか、薄いグレーが高級感や落ち着きを出すようなページだとか、清潔感のあるイメージを作る為には黒を背景にして... 続きを読む

• e0166.blog89.fc2.com
• テクノロジー

当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界の... 続きを読む

• dspt.blog59.fc2.com
• テクノロジー

A List Apart - Faux Absolute Positioning CSSでポジションを指定する方法は大きくわけてfloatを使う方法と絶対位置で指定する2つの方法がある。多くのサイトではヘッダとフッタを伴うカラムレイアウトを採用していることが多い。絶対位置指定では縦方向にコン... 続きを読む

• journal.mycom.co.jp
• テクノロジー

CSS Decorative Gallery I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images.CSSでイメージをオシャレに修飾するサンプル集「CSS Decorative Gallery」。 イメージにＣＳＳをあてるこ... 続きを読む

• phpspot.org
• テクノロジー

ウェブサービスに使えるメッセージボックスのCSSスタイル4種 May 23, 2008 9:41 AM written by Gen Taguchi 以前「ウェブサービスのアラートメッセージなんかに使える小粋なCSSスタイルまとめ」を紹介しましたが、それに絡めて続編メモということで。 「CSS Mes... 続きを読む

• www.ideaxidea.com
• テクノロジー

Make fancy buttons using CSS sliding doors technique This article will show you how to create fancy buttons using CSS sliding doors technique. CSSを使ってファンシーなボタンを作成するテクニック。 ２枚の画像を組み合わせて、横に伸縮するCSSボタン... 続きを読む

• phpspot.org
• テクノロジー

OpenMediaLaboratory on 2008年5月15日 Webサイトのフッタデザインを集めたサイト Footer Design Showcase / Elements of Design Webをデザインしていて、意外と悩むのがフッタのデザイン。 結局は全部似たようなデザインになってしまいがちです。 そんなときに... 続きを読む

• coliss.com
• テクノロジー

Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリスト... 続きを読む

• coliss.com
• テクノロジー

Web, Photo※Firefox（推奨）またはSafariでご覧ください。(未確認ですがFlockでも良いようです。)via Text + Image + CSS3 = Crazy Delicious まずは以下のテキストをマウスでハイライトさせてみてください。（あるいはCtrl+Aでテキスト全選択ですね。） One m... 続きを読む

• d:id:starocker
• テクノロジー

Welcome to the SitePoint SitePoint CSS Reference! We’ve worked hard to make this the most detailed and up-to-date reference on the subject available. To get started, try our handy search box, or click on one of the headings to browse that se... 続きを読む

• reference.sitepoint.com
• テクノロジー

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。 なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコン... 続きを読む

• standards.mitsue.co.jp
• テクノロジー

17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。 ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。 というか、... 続きを読む

• css-happylife.com
• テクノロジー

最近のページやサイト作成に欠かすことのできない「CSS（カスケーディング・スタイル・シート）」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろって... 続きを読む

• gigazine.net
• テクノロジー

noupeにエントリーされている、AJAXを使った素晴らしいCSSのフォームの47のサンプルの紹介です。 続きを読む

• coliss.com
• テクノロジー

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... 続きを読む

• phpspot.org
• テクノロジー