連続するリストを横並びに等分表示する...レスポンシブへの足がかり - Qiita
簡単なCSSで連続するリストを横並びに等分表示してみた。プログラマー未満人にはレスポンシブへの足がかりにならないかと... <div id="item-list"> <ul class="cols-3"> <li>商品01</li> <li>商品02</li> <li>商品03</li> <li>商品04</li> <li>商品05</li> <li>商品06</li> </ul> </div> /* 便宜的に...すべての余白を0に、box-sizing を border-boxに * { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #item-list { ba
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
StyleStats - An evaluating tool for writing better CSS
Pemain judi online terpercaya bukanlah sesuatu hal yang rumit, melainkan adalah kegiatan yang sangat mengasyikkan untuk dilakukan secara rutin setiap hari. Kalau boleh diibaratkan bermain judi online terpercaya Sbobet lebih mirip ke aktivitas makan yang […] Read the Post Cara Belajar Dari Judi Online Sbobet Terpercaya Agen resmi Sbobet pada dasarnya merupakan wadah yang menyatukan segala elemen ma
『CSS3でつくるキャラアニメーション』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！ アメーバゲーム部門でディベロッパーをしております、なるげと申します。 現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。 ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。 今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。 ガールフレンド（仮）とは 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲー
hamashun me : 背景色を敷いた要素に border-radius を指定すると何かはみでる件
ロケタッチのシールページの角丸部分が変だったんですが、vantさんのブクマから解決方法が見つかりました。 Sneak ― Fixing the background 'bleed' コードはこんな感じ。 div { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #000; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } 「CSS」カテゴリの最新記事 < フォームボタンにbackground-colorプロパティを指定するとiPhone Safariでグラデーションがかかる件HTML5で最近使っているリセットCS
-webkit-appearanceでフォーム要素のスタイルをリセット
<img src="http://webdev.jp.net/wp-content/uploads/2013/08/webkit-appearance-defaurt-reset wikipedia reference.png” alt=”-webkit-appearanceを設定してみた” width=”400″ height=”400″ class=”aligncenter size-full wp-image-1412″ /> スマートフォンのデフォルトブラウザ、Safariのフォーム要素に、スタイルシートで独自のデザインを設定しようとしたとき 角丸やグラデーション、ドロップシャドウなどの初期スタイルを打ち消すのに、意外と手こずったことはありませんか？ -webkit-appearanceをつかうと、これらの装飾を一部外せるので、フォーム要素をすべてオリジナルの装飾にするスマホサイト
flexboxの旧仕様、改定仕様、現行仕様の一覧 « NAVER Engineers' Blog
暑さもやわらいできたような気配がしてきました。皆様いかがお過ごしでしょうか。 久しぶりのブログ更新です。UIT 富田です。 今回はCSSでのレイアウトをより柔軟にしてくれるflexboxについて解説します。 flexboxは大幅な仕様の変更が過去に2度もあり、各ブラウザとそのバージョンによって実装している仕様が異なるため、後方互換をきっちり対応しようとすると、gradientと並んで2大考えるのをやめたくなるプロパティとなっております。 しかしflexboxを利用することで、現時点ではCSSだけでの対応が難しかったり、複数のプロパティを複雑に組み合わせる必要があるレイアウト（例えば一番大きい高さに揃えた要素を横に並べたり、子要素を上下左右中央位置したりといったもの）が、容易に利用できるようになるという大きなメリットもあり、使えるならば使っていきたいプロパティでもあります。 にも関わらずf
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
Androidでbold対応。 « console.log :) | Don't forget trace :)
こんにちはGGです。 ちょっと短いですが困っていた問題が解決したので メモがてら書いておきます。 Androidのブラウザの仕様で、 Androidにはfont-weight:boldが適用されません。 「to-R」さんでも書かれています通り日本語だけ太字になりません。 http://blog.webcreativepark.net/2011/05/19-121154.html 代替案として、text-shadowを利用して回避する方法がありますが、 植原さんの記事に書いてある 【応用】Androidブラウザでviewportのwidth指定【しました】 対応がされていると、 ipadなどの高解像度の端末で見ると 拡大されテキストとtext-shadowの間隔が広がりテキストが2重に見えてします。 それを回避する為にCSSの以下のプロパティを指定します。 -webkit-text-stro
HTMLに貼ったYoutube iframeを可変にする - しゃの
スマホページにYoutubeを貼る時、サイズを可変にする機会がある。下記で解決。 引用してるのは日本語サイトからだけど、元ネタは海外。 自戒も込めてますが、引用ばかり見ないでちゃんと読んどきましょう。 <div class="video-container"> <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe> </div> .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container i
CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法｜BLACKFLAG
jQueryなどのJavaScriptライブラリでは定番のLightBoxやThickBoxといった、ポップアップ型モーダルウィンドウプラグインが様々あります。 ギャラリー要素などコンテンツの見せ方としてモーダルウィンドウは定着しつつありますが、そんなモーダルウィンドウをJavaScriptなどのSCRIPTを使用せずに、CSS（CSS3）のみで実装するサンプルを実験的に作ってみたので紹介してみます。 まずは動作サンプルから。 ※動作環境は基本的にはWebkitブラウザのSafariやChromeのみですが、今回はWebkit以外のブラウザFirefoxなどでもアニメーション以外の動作は実行されます。 CSS3 MODAL WINDOW【SAMPLE01】 ≫サンプル【01】画面はこちらから。（別枠で開きます。） リンクをクリック後に表示される、 ————————————————– ≫モー
CSSのelement()関数
せめてWebKitに実装されてからとか思ってたけど、CSS Image Values and Replaced Content Module Level 3がLast Callになったのでいい機会ということにしてelement()関数についてエントリを書く。element()関数は任意のIDを引数に取ることができ、その要素を画像として参照できるというなかなかの荒業な関数。具体的には画像のサムネイルを簡単に作成できるとかそういうものをイメージするとわかりやすいと思う。 Demo: Filmstrip View いわゆる「フィルムストリップ」のようなものを作るデモだけど、element()はまだFirefox 4以降でしかサポートされていないので、ChromeやSafariなどでは意図した通りに動かない。Firefoxなら下に並んだサムネイルをクリックすると大きな画像が表示される。切り替えやア
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Admiral
公海555000kk线路检测—首页（欢迎您）
html5-css3.jp - このウェブサイトは販売用です！ - リソースおよび情報
CSS で切る・貼る・コピーする
【CSS】margin collapsing（マージンの折り畳み、崩れ、つぶれ） at softelメモ