このプロパティは、全てのタグ（要素）に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。
余白 margin padding/css
このプロパティは、全てのタグ（要素）に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。
[CSS]これはスゴイぞ！写真の仕上がりをインスタグラム風にかっこよく、かわいくするスタイルシート -CSSgram
写真をかわいくするのに、特別なソフトウェアは必要なくなるかもしれません。 普通の写真にスタイルシートを一行追加するだけで、インスタグラム風にかっこよく、そしてかわいく仕上げるスタイルシート「CSSgram」を紹介します。
![[CSS]これはスゴイぞ！写真の仕上がりをインスタグラム風にかっこよく、かわいくするスタイルシート -CSSgram](https://cdn-ak-scissors.b.st-hatena.com/image/square/53e9b7f9b04923251034683e5692a663fa070279/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102701.png)
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
[CSS]シンプルな美しいボタンを簡単に実装するだけのスタイルシートの超軽量ライブラリ -beautons
使い勝手のよいさまざまなスタイルのシンプルなボタンを実装するだけのライブラリというか、スタイル集を紹介します。 スタイルシートは1.4kbで、超軽量！ beautons beautons -GitHub 使い方は非常に簡単で、外部スタイルシートを記述し、各ボタンにclassを加えるだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に記述します。 <head> ... <link rel=stylesheet href=beautons.min.css> </head> Step 2: HTML ボタンで使用する要素に「.btn」を加え、個別のスタイルを適用します。 <!-- ベーシックなボタン --> <a href="#" class="btn">Button</a> <!-- 個別のスタイルを適用したボタン --> <a href="#" class="btn bt
[CSS]フォームにちょっとだけアニメーションを加えて楽しくするスタイルシート -Animated Toggles
フォームのチェックボックスとラジオボタンに余分はタグは使用せずに、ちょっとだけアニメーションを加えて楽しくするスタイルシートを紹介します。 Animated Toggles HTML チェックボックスもラジオボタンも通常通りにマークアップします。 余分なタグは特にありません。 <form> <h1>Animated Toggles!</h1> <div class="controls"> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Apples</label> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Oranges</label> </div
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
CSS3で立体的なボタンを表現するチュートリアルまとめ「40 CSS3 Animated Button Tutorials And Experiments」
TOP > Design > CSS3で立体的なボタンを表現するチュートリアルまとめ「40 CSS3 Animated Button Tutorials And Experiments」 HTMLに装飾を加えるためのCSSは、2011年頃から登場したCSS3によって表現力が劇的に向上。しかし、新しい機能や表現方法をフル活用できていないという方もいらっしゃるのではないでしょうか？そんな中今回紹介するのが、CSS3で立体的なボタンを表現するチュートリアルをまとめた「40 CSS3 Animated Button Tutorials And Experiments」です。 （CSS Buttons with Pseudo-elements | Codrops） シンプルなボタンはもちろん、デザインソフトでの制作でも時間がかかりそうなリアリティのあるボタンまで、多彩なCSSデザインが紹介さ
4KB程の軽量レスポンシブグリッドライブラリ「fitgrid」:phpspot開発日誌
fitgrid 4KB程の軽量レスポンシブグリッドライブラリ「fitgrid」。 divに特定のclass名を付けることで複雑なグリッドレイアウトを組める仕組みはTwitterBootstrap等にも含まれていますが、こちらはレスポンシブでグリッドオンリーに特化したフレームワークです。 とにかく、レイアウト部分はこちらに任せて後は全部自分でデザインしたいという場合に使えそうです。 レスポンシブにも簡単対応できるという所も便利そうです 関連エントリ HTML5＆CSS3で作成されたレスポンシブかつフリーなテンプレートが入手できる「HTML5 Up」 レスポンシブでクールなドロップダウンメニュー実装例 HTML5＆CSS3なクールでレスポンシブが良い感じのイメージギャラリー実装jQueryプラグイン「least.js」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Resp
[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック
天地左右の中央に配置したい要素のサイズが幅も高さもピクセルで指定されていれば、marginやpaddingで簡単に配置できますが、サイズ指定にパーセントを使用した要素だと表示サイズに依存されてサイズが分かりません。 そんなパーセントで指定されたピクセルでの正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニックを紹介します。 デモページ：幅780pxで表示 HTML HTMLはシンプルで、中央に配置するdiv要素だけです。 <body> <div>Percentage sized and still centered.</div> </body> CSS ぱっと思いつく方法としてはパーセントをネガティブマージンで使えばいいのでは、となるところですが、ネガティブマージンを使用すると左右の中央はできますが、天地の中央がうまくいきません。 ここではネガティブマージンではなく、
CSS3のふわりとしたアニメーションが気持ちいい画像ギャラリーを実装するチュートリアル
CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。 デモページ：サムネイルのホバー時 サムネイルのホバー時だけでもキャプションの表示だけでなく、画像などのサイズ変更、テキストの表示、各アイテムの可視化、配置変更などもアニメーションで行われています。 実装 実装はポイントをまとめて紹介します、Stepは3つです。 元記事では詳細に書かれているので、参考にしてください。 Step 1: HTML 画像、2つのパラグラフ、タグが一つのセットになっており、それぞれをリスト要素で実装します。 <ul class="portfolio-items"> <li class="item"> <figure> <div class="view"> <img src="images/1.jpg"> </div>
IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
[CSS]ショートカットの表記をApple Keyboard風に美しく実装するスタイルシート
ブログなどでショートカットを単にテキストで記述するのではなく、ちょっと洒落た感じに、Apple Keyboard風に実装するスタイルシートを紹介します。 デモページ：拡大 実装はシンプルで、HTMLはclass（mac-key）を付与するだけ、CSSも10行ちょいです。 HTML <p>New Tab <span class="mac-key">⌘</span> + <span class="mac-key">t</span> </p> <p>New Window <span class="mac-key">⌘</span> + <span class="mac-key">n</span> </p> <p>New Incognito Window <span class="mac-key">⇧</span> + <span class="mac-k
[CSS]メール用のちょっとかわいいアニメーションを実装するスタイルシートのデモ
ホバーで封筒を開き、便箋を出し入れし、また封筒を閉じるアニメーションをスタイルシートで実装するデモを紹介します。 画像もスクリプトも一切無しです。 Animated letter ※デモはChrome, Safariがベストです。 封筒や手紙のイラストに画像は一切使用されてなく、封筒は変形やボックスシャドウ、便箋は疑似要素などで描かれています。 他にもいろいろとアレンジが出来そうですね。 HTML <div id="wrapper"> <div class="anvelopebg"></div> <div class="anvelope"></div> <div class="opener"></div> <div class="letter"></div> </div> CSS *{ margin: 0; padding: 0; } body{ background-color: #1a
[CSS]デスクトップ・スマフォ・タブレット向けの美しいUIエレメントを簡単に実装できるスタイルシート -TopCoat
クリーンなHTMLを使い、レスポンシブを念頭においたUIエレメントを簡単に実装できるオープンソースのライブラリを紹介します。 TopCoat TopCoat -GitHub TopCoatのセットアップ 当スタイルシートを外部ファイルとして配置するだけです。 <link rel="stylesheet" type="text/css" href="css/topcoat-desktop-min.css"> TopCoatのスタイルシートは2種類あり、デスクトップ用（24KB）、スマフォ用（20KB）となっています。 それぞれのデモを見てみましょう。 TopCoat for Desktop TopCoat for Mobile TopCoat for Desktop デスクトップ用のデモです。 デスクトップでご覧ください。 TopCoat for Desktop
[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス
ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む（スクロール非対応） Step 2: ページ全体を角丸で囲む（スクロール対応） Step 3: ページ全体を角丸で囲む（スクロールバーを変更） Step 1: ページ全体を角丸で囲む（スクロール非対応） まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。 基本的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。 角丸用の画像 コードを見てみましょう。 HTML HTMLは、bodyだけで構いません。 <body> <h1>Rounded inside body border</h1>
[CSS]パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル
画像とテキストを配置した2枚のパネルを切り替える時に、CSS3アニメーションでふわりと入れ替えたり、しゃっとスライドしたり、くるっと回転したり、拡大させたりするチュートリアルを紹介します。 CSS animated profile cards 実装とデモ アニメーションは4種類あり、まずは共通のHTML/CSSから。 HTML 各パネルはリスト要素で実装し、デフォルトの画像のパネルはimg要素、切替時のテキストのパネルはリスト要素です。 「EFFECT」には、それぞれのエフェクトを入れます。 <ul id="[EFFECT]" class="profiles"> <li> <img class="pic" src="images/[PIC].jpg" /> <ul class="info"> <li><a href="[URL]">[NAME
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでサクッと簡単に写真にフィルタをかけられる「CSSCO」:phpspot開発日誌
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ
デザインの勉強にもなる、CSSで実装するパンくずのまとめ