質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
Bootstrapを読み込めばNormalize.cssは不要でしょうか？
質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
CSS3を使って美しく装飾されたテーブルの作り方
CSS3をたくさん使ってきれいなテーブルを作ってみましたので紹介します。特にセレクタの勉強になると思いますので、ぜひ参考にしてみてください。 まずはHTMLから。無駄に長いので3位から9位は省略しています。 <table> <tbody> <tr> <th>順位</th> <th>国</th> <th>2010年推計人口</th> </tr> <tr> <td>1</td> <td>中華人民共和国</td> <td>1,341,335,152</td> </tr> <tr> <td>2</td> <td>インド</td> <td>1,224,514,327</td> </tr> <tr> <td>10</td> <td>日本</td> <td>126,535,920</td> </tr> </tbody> </table> 続いてCSSです。とりあえず全部載せて、後で個別に説明します。 t
css：cssで作るシンプルなフォーム（input・textarea） | webデザイン | web is a creation
webデザイナーとしての個人的アウトプットblogシンプルなので応用が利く、cssを使ったフォームのサンプルです。 pngもダウンロードできるようにしました。 サンプル モダンブラウザ対応してると思われます。 IE8以下は未対応。 ただし、IE9はplaceholderのみ未対応です。 HTML <section id="demo-sec" class="demo-section"> <p><input type="text" name="demo-name" id="demo-name" class="demo-name-element" placeholder="お名前"></p> <p><input type="text" name="demo-email" id="demo-email" class="demo-email-element" placeholder="メールア
【2013年注目必至！なCSS仕様】CSSフィルタ、これはすごい！（デモ付き） | OpenWeb
以前から気になっていたCSSフィルタについて、ちょっと調べてみました。 結果、あまりにお手軽に、効果絶大なエフェクトをかけられることが判明して、ちょっと興奮しています。これはすごい！ CSSフィルタは、SVGで従来から規定されていたFilter Effectsを、CSSの世界に持ち込んだものです。 CSSとSVGのワーキンググループが共同して立ち上げたCSS-SVG Effects Task Force (FX TF)により、「Filter Effects 1.0」という仕様として策定が進められています。 この仕様によって新しく導入されるCSSプロパティはいくつかありますが、主なものはfilterプロパティです。 filterが素晴らしいのは、ぼかしやドロップシャドウといったエフェクトを、CSSのみで簡単に指定することができるからです。 例えば、要素にぼかしをかけたい場合は、以下のようなプ
3D card flipping | CSS transitions, CSS transforms and CSS animation
Flipping a simple image to a div (transitions and 3d transforms) Plan Put an image on top of a div inside a container. Put that in another container with perspective defined. When hovering on the outside container, add a rotate around the Y axis to the inside container. Demo This is nice for exposing more information about an image. Any content can go here. Code First, the markup. <div id="f1_cont
Height equals width with pure CSS
Single page demo Description If you have an image with a certain aspect ratio you can easily keep the proportion with the "auto" value. Like: img{ min-width: 100%; height: auto; } The problem is that you can't use the "auto" value for the height property of a block element like a DIV or alike. It will always resize depending on the inner content/elements. The trick I found a solution which was alr
私がよく使っているWebサイト作成に役立つブックマークレット
ユーザーがウェブブラウザのお気に入りなどに設置されたブックマークレットをクリックすると、ブックマークレットに記述されたJavaScriptの小さなプログラムが、ウェブブラウザで起動する。プログラムはページの外観や表示を変更したり、他の場所にジャンプしたり、子ウィンドウを表示したり、ウェブブラウザで表示中のウェブサイトのURLを取得したり、ユーザーに追加情報の入力を促したりする。 - Wikipediaより ということで、プログラムを起動するボタンとしてブックマークを使う感じです。では、私が普段から使っているお勧めブックマークレットを紹介します。 XRAY クリックした要素の内容を表示してくれます。topやleftなどの位置関係、width、height、margin、paddingなどのボックスに関することなどが一目で分かります。 ColrGrabr そのサイトにどのような色が使われている
幅を固定しないでfloatをする « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
低価格、短納期、高品質なWebサイト制作|ScuderiaWeb Webサイト制作をご検討中の方へ。ScuderiaWebが低価格・短納期・高品質なWebサイトを制作いたします。 floatでdivを2つ横並びしたときに、片方しか幅を指定せず、もう片方の幅はautoにする方法です。 通常、floatで横並びを実現する際は、両方のdivの幅指定が必要ですが、例えばブログのサイドバーのみ幅を指定して、記事部分はブラウザの解像度によって幅を変更したいといったときなどに活用できます。 サンプル 片側のみ200pxに固定し、もう片方の幅は指定していないサンプルです。 幅を固定しないでfloatをするサンプル（別ウィンドウで表示） コード (X)HTML <div id="side"> サイド </div> <div id="contents"> コンテンツ </div> CSS div#side {
css3buttongenerator.com
Settings + Font / Text text: font-family: font-color: font-size: text-shadow: x: y: blur: + Box box-shadow: x: y: blur: padding: padding-top: padding-right: padding-bottom: padding-left: + Border border-radius: border: border-style: border-width: More + Background background: gradient solid start color: end color: color: + Hover background: gradient solid start color: end color: color: Button prev
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. | Stronghold Archive
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. どうもこんにちは。Toshikuraです。今回のTipsは【CSS 画像やテキスト要素を縦横中央配置する6つの方法】です。CSSの基礎的な記事ですが縦横中央配置には色々な方法がありますのでメモしておきます。うまく使い分けると便利な場面もあったりしますので備忘としてお役に立つかもしれません。 1. display:tableでの実装 CSSのdisplayプロパティによって要素をテーブル化し、vertical-alignで縦方向へ中央配置する方法でレスポンシブ化も容易です。もっとも安定した方法だと思いますがIE7では動作しません。 HTML <div class="table"> <p>p tag p tag p tag p ta
[CSS]サイズが分からない要素を真ん中に配置するテクニック
width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
【CSS】横幅が可変な要素を中央寄せにする - tanihiro.log
margin: 0 auto;で中央寄せするためには要素の幅を指定しないといけないので、横幅が可変な場合はこの方法では中央寄せにできません。 inline-blockを使えばできるみたいです。 <div class="pager_wrapper"> <ul class="pager"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> .pager_wrapper { text-align: center; } .pager { display: inline-block; } 中央寄せにしたい横幅が可変な要素を更にdivタグなどで囲い、外側の要素にtext-align: center;を指定します。 中央寄せにしたい要素は、display: inline-block;を指定します。 これで、親要素のte
cssで一部だけを角丸にする。 - Qiita
-webkit-border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px; -moz-border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px; border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px; 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 の順で指定するらしい。 指定されたpxを半径とした円の円周を角丸の大きさとして考えてるみたい。
CSSを使って蛍光ペンで太い線や細い線を引いた雰囲気を出す
文字に色を付けたり、大きくしたり、飾りをつけたりして、抑揚やアクセントをつけると読みやすくなりますよね！ 私は、長文が苦手な方です。 苦手なだけに、私と同じような気持ちの人に、ストレスなく読んでもらえるように、日々コソコソと考えています。 ということで、今回は、アクセント代わりに蛍光ペンで線を引いたような効果を中心に文字周りで使えそうなコードをメモっていきたいと思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting to Animate.css
高さ100%のボックス-CSS TIPS
CSS Arrow Please - By Simon Hoejberg - @shojberg
text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス
GitHub - Prinzhorn/skrollr: Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
