CSS Nite LP26 CSS Preprocessor Shootout | Mima Design Memotto
1月12日、CSS Nite LP26 CSS Preprocessor Shootoutへ行ってきました。 今回も内容が濃く非常にためになりました。 以下、メモ書きです。 ◇基礎講演：CSSの設計◇ 高津戸壮さん（ピクセルグリッド） 設計について CSSを書いているとごちゃごちゃになるので、 うまいこと設計する必要がある。 ただ、コードを書くだけではちゃんとした設計はできない。 ページ設計の段階から考える必要がある。 ・モジュール名を基準に書く 干渉しないなどのメリット色々 ・モジュール一覧を作る どこだっけと探したり、同じモジュールを二度作ったりすることを防ぐ ・具体的過ぎず抽象的過ぎない命名を ・余白のルールを設ける なるべく単純に ・細かいデザイン 細かい余白の調節と量産効率性を考える。 ＊オススメ マージン用のモジュールを作る。 デザインを細かく再現する必要
Crunch App
There are a ton of code editor program available, so how do you choose the best? The main criteria is obviously the languages you are using, as you will need an editor that supports these languages. Regardless of whether or not you are going to be building a brand-new website from scratch or utilizing a popular CMS and learning how to create a blog website with WordPress to customize as you go alo
WordPressのビジュアルエディタ上の表示と実際の投稿の表示を合わせる方法｜1bit::mobi
自分のように、HTMLやCSSが分かる人にとっては必要性のないTIPSではあるのですが、 クライアント様にWordPressを導入した HTMLやCSSが分からないクライアント様がWordPressを使って自分で更新している クライアント様にはビジュアルエディタで更新してもらうんだけど、ビジュアルエディタ上の表示と実際に投稿された時の表示が異なるのでなんとかしてほしいと言われたことがある という方は多いのではないでしょうか？（実際自分もクライアント様に言われたことがあります。） ビジュアルエディタ上の表示と実際に投稿された時の表示を揃える方法を見つけましたのでご紹介します。 確認環境 WordPress2.9.1で確認 設定方法 使用しているthemeフォルダ内に「functions.php」を作成し、以下の記述をします。 <?php add_filter('mce_css', 'my_e
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
Easing Functions Cheat Sheet
Easing functions specify the rate of change of a parameter over time. Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor. This page helps you choose t
text-rendering: optimizeLegibility
WordPress の次期デフォルト・テーマ、Twenty Twelve の CSS を見ていたら、body 要素に text-rendering: optimizeLegibility という見慣れないプロパティが指定されていたのでちょっと調べてみました。 The ‘text-rendering’ property – SVG 1.1 (Second Edition) text-rendering | Mozilla Developer Network Cross-browser kerning-pairs & ligatures CSS Text-Rendering | Trent Walton text-rendering プロパティは CSS ではなく SVG の仕様に定義されています。現在のところ利用できるブラウザは Firefox、Chrome、Safari。指定できる値は a
Testing -webkit-filter : Playground for CSS webkit filters
What? Why? Reading on the Chromium blog about the new CSS -webkit-filter made me wonder what kind of effects can be created, using just one single line of CSS, resulting in this playground. Browser compatibility Above features should work using at least Chrome 19. Read more Understanding CSS Filter Effects - HTML5 Rocks Chromium Blog: Accelerated CSS Filters Landed in Chromium About Last update Ja
A Tale of Animation Performance | CSS-Tricks
Hey @chriscoyier, do you have any source confirming translate() is better than top/right/bottom/left for moving objects please? :) — Kitty Giraudel (@KittyGiraudel) December 10, 2012 Context So we’re all on the same page, what Hugo means is, there are two different ways you can “move” elements. Give the element relative, absolute, or fixed positioning. Then you can use the top, right, left, bottom
CSS Loupe（おまけ）とCSSプログラミングの制作について – No.1026
CSS Programming Advent Calendar 2012の19日目、一週間ぶりです。元バスケ部の友人に「そんなに綺麗なフォームでそんなに入らない意味がわからない」といわれたことがあるくらい美しいフォームに定評のある1026です。CSSフリースローお楽しみ頂けたでしょうか？ さて、今日は元々宣言していたパズルがポシャったのでかるいやつを、ということでCSS Loupeを作りました。JSでたまにあるこういうもののPure CSS版です。 クリスマスっぽい画像を探したら、全体的に赤でちょっと拡大がわかりにくくなってしまったでしょうか… フィルターかけるボタンとかつけようかとも思ったのですが、付けたところでルーペとしてどうにかなるわけではない（という言い訳で若干面倒くさい）ので辞めました。 適当な解説 画像の上にdivを敷き詰めて、hoverするdivに合わせてルーペが移動。拡大画
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
CSSでiOS風の選択ボタンをつくるチュートリアル。（CSS おれおれ Advent Calendar 2012 – 10日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 10日目 iOSの選択ボタン。HTMLでいうラジオボタン的なもの。”Segmented Control”というらしいです。 Segmented Control風ラジオボタン。 HTML こんな感じです。 <p> <span class="segmented"> <label><input type="radio" name="fruit" value="apple" checked><span class="label">Apple</span></label> <label><input type="radio" name="fruit" value="grape"><span class="label">Grape</span></label> <label><input type="radio" name="fruit"
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
CSSだけで組み立てられたアイコンを公開しているサイト『One div』
CSSだけで組み立てられたアイコンを公開しているサイト『One div』 『One div』は純粋にCSSだけで組み立てられたさまざまのアイコンを公開しているサイト。 各アイコンの下にあるボタンをクリックすると、アイコンを表示させるためのHTMLやCSSの内容が表示され、これらのデータをファイルとしてダウンロードすることも可能です。 実際、下のアイコンは画像ではなく空の<div>を下のCSSでアイコンとして描画しています。 .fish { width: 2.1em; height: 2.1em; position: relative; border-radius: 1.5em 0em 1.5em 0em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);
[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント
ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセット どのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset まずは、2012年に人気のあったCSSリセット ベスト5！ CSS Reset経由で最もダウンロードされたものです。 Eric Meyer's "Reset CSS" 2.0 コードとドキュメント HTML5 Doctor CSS Reset コードとドキュメント Yahoo! (YUI 3) Reset CSS コードとドキュメント Universal Selector '*' Reset コ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無効なURLです
CSS Nite LP26に行ってきました | Webデザインのタネ
border-radius on div and opacity on image inside not working right in Chrome
CSS で切る・貼る・コピーする
スライダー操作で簡単にCSS3のコードが作成できる『Useless CSS3 Generator』
GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド | コリス