[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
MediaQuery まとめ - IT戦記
Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。 以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。 <link rel="stylesheet" type="text/css" href="共通の.css" media="all" /> <link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" /> <link rel="stylesheet" type="text/css"
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
値・単位 - CSS3 Reference ～ CSS3のリファレンスサイト ～
次期バージョンの公開が待ち遠しいCSS3。一体何ができるのか？まだWorkingDraft、草案の段階ですが、各ブラウザでかなり先攻実装が進んでいます。各ブラウザ実装の公式アナウンスに則って、解説を試みます。
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
いますぐ使えるCSS3テクニック集！ コピペ用サンプル付き！
面白法人カヤックがサイトリニューアル！ いきなり手前みそで恐縮ですが、今年の夏、面白法人カヤックがコーポレートサイトを2年ぶりにリニューアルしました。 「世界一更新頻度が高く、カヤックの活動がひと目で分かるコーポレートサイト」をコンセプトに、可読性が高く容量も軽いサイトに仕上げました。 ひと目見るだけで、最近のカヤックの動向が分かるようにニュースでTOPページを構成し、日々リアルタイムにカヤックの最新の情報を発信します。 技術的には、ブラウザのウィンドウサイズによって拡縮する画像はベクターファイルであるSVG（Scalable Vector Graphics）画像で置き換えたり（SVGはベクトル形式の画像のため、拡大してもボケない）、CSS3を用いることで画像の使用を極力控えたりするなど、ページの軽量化を実現しています。 カヤックサイトのCSSテクニックを丸ごと伝授！ 本稿では、サイトリニ
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
CSSで画像を均等配置
<dl>（定義）タグを使って左に回り込み（float:left;）させれば画像を均等に配置できると思います。 <dl>タグではなく、<ul>（リストタグ）を使ってもできそうですね。参考になれば。 ソース <dl> <dt><img src="**"></dt> <dd>テキストなど</dd> </dl> <dl> <dt><img src="**"></dt> <dd>テキストなど</dd> </dl> <dl> <dt><img src="**"></dt> <dd>テキストなど</dd> </dl> スタイルシート dl {float:left;}
ビジョサミ2011レポート スマートフォン向けソーシャルサービス開発のポイントとは
グリーがスマートフォンサービスを提供し始めてから、一年が経とうとしている。伊野友紀氏と清田徹氏によるセッションは、スマホ市場におけるグリーでのサービス提供の取り組みやGREE Platformの動向などを技術的な視点、ビジネス的な視点も踏まえて、取り組みを紹介するものとなった。 ハイブリッド開発のメリットとアーキテクチャー刷新の理由 グリーのセッションでは、最初に伊野友紀氏が登壇。グリーのスマートフォン戦略と、その実現のための技術について紹介した。グリーではスマートフォン向けの環境整備を着々と行っており、2010年8月にiPhone版「GREE」のベータ版をリリース。2011年1月から、「GREE Platform for smartphone」のWeb版、iOS版、Android版を矢継ぎ早に出した。国内では最速でフルラインナップを提供している。内製ソーシャルゲームのスマートフォン移植も
スタイルシート［CSS］/フォーム - TAG index
入力欄・ボタン width: ***; height: ***; フォーム部品の大きさ指定する background-color: ***; フォーム部品の背景色を指定する (focus) background-color: ***; フォーカス時の背景色を指定する border: ***; フォーム部品の境界線を指定する padding: ***; フォーム部品のパディング（内側の余白）を指定する (focus) outline: ***; フォーカス時のアウトラインを指定する scrollbar-***-color: ***; テキストエリアのスクロールバーの色を変える line-height: ***; テキストエリア内の行の高さを指定する 部品グループ background-color: ***; 部品グループの背景色を指定する border: ***; 部品グループの境界線を指定
HTML5/CSS3の情報をクリップ！ :: dotHTML5
新刊 書籍：これからのJavaScriptの教科書 - モダンJavaScriptを基礎から実用レベルまで (アマゾン) / グーグルがrobots.txtでサポートするフィールドは4つだけ、それ以外は無視 (海外SEO情報ブログ) / UIデザインにアクセントを加える37の簡単なテクニック、完全版 (PhotoshopVIP) / マッチングアプリ個人開発したら逮捕されかけた話 (しょーへー | Zenn) / グーグル、Web Vitals拡張機能を廃止へ - DevToolsへの移行を (窓の杜) / JavaScriptランタイムのBun、C言語のコンパイルとJavaScriptプログラムからの実行をサポート (Publickey) / 任意の画像内から被写体を自動検出し、背後にテキストを挿入できる「Text Behind Image」 (かちびと) ... 続きを読む 新刊 書籍
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ - かちびと.net
css3-mediaqueries-js - Project Hosting on Google Code
Ultimate CSS Gradient Generator from ColorZilla
http://www.css-lecture.com/log/css3/css3-border-radius.html