CSS3を使ったエレメントを簡単に作成出来るChrome拡張・「CSS-SHACK」CSS-SHACKはChromeでCSS3を使ったエレメントを作成できるアプリケーションです。右のツールボックスで装飾するとリアルタイムで反映、そのままソースをエクスポートできるようになっています。レイヤー機能も付いてます。Webアプリでは無いのでオフラインでも使用できます。デスクトップ版は有料となっています。個人的な感想ですが、吐き出されるCSS3のコードは多少修正が必要かもしれません。 CSS-SHACK
CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方 – bl6.jp
CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に配置させたい時があるかと思います。先日このように配置させなきゃいけない状況になったのでその時のやり方をメモがてらエントリーします。ちなみに今回は二つの要素の幅と高さが決まっている場合と、二つ目の要素の幅と高さだけが決まっていて一つ目は決まっていない場合の2パターンのやり方です。 [ads_center] 二つの要素の幅と高さが決まっている場合 二つ上下に並んでいる要素が共に幅と高さが決まっている場合のやり方です。この場合はpositionだけを使えばいいのでとても簡単です。 HTML <div class="wrap"> <div class="box1">box1</div> <div class="box2">box2</div> </div> .wrap { position: relative; height:
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
小粋空間: CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
CSSだけで簡単に吹き出しを作成する方法4つ！
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapper { padding: 30px; position: relative; } .box { position: relative; background: #ccc; height: 50px; width: 100px; margin-bottom: 20px; } .box:after { content: ''; position: absolute; border-top: 10px solid #ccc; border-right: 5px solid transparent; border-left: 5px solid tran
[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集
text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 HTML <h1 class="elegantshadow">Elegant Shadow</h1> CSS まずは、各見出し共通のスタイルシートから。 h1 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-size: 92px; padding: 80px 50px; text-align: center; text-transform: uppercase; text-rendering: optimizeLegibility; } Elegant Shadow用のスタイルシートです。 .eleg
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
The Lengths of CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. There are quite a few properties in CSS that take a length as a value. The box model properties are the obvious ones: width, height, margin, padding, border. But plenty of others as well: the offset and sizing of a box-shadow or the size and spacing of fonts. What are all th
WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm（プラズム）
これがずっとやりたかったんだよ！すべてのソリューションはかちびとで問題ない。@shintarowfreshです。 もうとにかくWordPressでアイキャッチ画像を用意するのが面倒極まりない。とはいえ設定しないとみっともない。という2重苦を抱えていたのですが、これからは開放されます、気持ちいい！！ WordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法 – かちびと.netWordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法 – かちびと.net 設定に必要なIDの調べ方はコチラに。 Quick Tip: Saving a Default Post Thumbnail | Wptuts+ 後はもう書いているコードをコピペして終わり、イッツダン！ すると こんなかんじで、新規投稿の際、指定のデフォルトの画像がハマっているわけで。 上書きしたかったら、新し
接頭辞つきのクラス名にマッチする CSS セレクター
Kraken というフロントエンドのフレームワークのコードを見ていたら、なるほどと感心する CSS セレクターの書き方を見つけた。grid-one、grid-two みたいな接頭辞つきのクラス名にマッチするセレクターで、こんな感じ: [class^="grid-"], [class*=" grid-"] { /* ... */ } 単純に考えると [class*="grid-"] でいけそうな気がするけど、それだと foo-grid- みたいに頭に余計なものがついていてもマッチしてしまう。そこでホワイトスペースを接頭辞の前に置いて [class*=" grid-"] とすることでそれを避けている。すると今度は class="grid-one" みたいに class 属性の先頭で頭にホワイトスペースがない場合にマッチしないので、[class^="grid-"] という前方一致のルールを追加。
CSSで作る立体的なボタンセットのサンプルコード
よく見かける立体感のあるボタンの作りかた。グローバルナビゲーションで使われるような横並びのボタンセットをリストアイテムとした場合のサンプルです。 HTMLとCSSの原型ベースとなるのは以下の様なHTML。 <ul> <li><a href="">button 01</a></li> <li><a href="">button 02</a></li> <li><a href="">button 03</a></li> <li><a href="">button 04</a></li> <li><a href="">button 05</a></li> </ul> リストアイテムの中にアンカータグが入っている、メニューではよく使われるパターンです。 これに次のようなCSSを適用します。 ul{ display:table; table-layout:fixed; width:500px; ov
js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
各ブラウザに対応するCSSハックやJavaScriptによるハックをまとめているWebサイト・Browserhacks
各ブラウザのバージョンごとのCSSハックやJavaScriptによるハック方法をまとめているWebサイト・Browserhacksをご紹介します。CSSハックという言葉自体ちょっと懐かしい気がします・・・ CSSハックやJavaScriptによるハック方法をまとめたサイトです。IEはともかく、OperaやSafariのハックはちょっと助かるかも。 ブラウザ名で検索も出来る様になっています。IE、Firefox、Chrome、Safari、OperaなどのCSSハックやJavaScriptによるハック方法が掲載されています。 試してないけどMedia QueriesでIEのCSSハックという方法は思いつかなかったです。 デモページもあるのでハックが効いてるか確認する事も可能です。 Browserhacksにも書いてありますが、ハックは最適な解決法とは言えないので、個人のサイトなら別にいいと思
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]50+のクリエイティブなスタイルシートのチュートリアル | コリス
これからのWeb制作に使える、面白いUIを実装できるjQuery・CSS集
有用なCSSフレームワークをまとめた・FRONT-END CSS FRAMEWORKS
GitHub - stevekwan/best-practices: JavaScript and CSS guidelines for pragmatists.
cmmntr.com
4つのCSSツールを1つのサイトに集約した・「CSSmatic」
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
