任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する
使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、Sassの関数を使って数値を自動的に作り、さらにそれをそのまま使えれば良いなと思って作ってみましたー！ デモ どんなものなのか、とりあえずデモです。 See the Pen [Demo] Sass Variables Color tone by You Sakai (@webcre8) on Code
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
calc()が効かない？: 中の演算子の間にはスペースが必要です - Qiita
.example{ width:300px; height:100px; top:100px; left:calc(50% - 300px / 2); /*値と演算子の間にスペースが必要*/ } はい、演算子との間にはスペースが要るんです。 他ファンクションでどうなるかは不明。 ===== 【追記】2015-04-08 だいぶ前の記事ですが割と見て頂いてびっくりです。 Twitterで言及されていたのですが、 +, -には スペースが必要 で、*,/ には スペースが不要 なのだそうです。 参考： 1. https://twitter.com/terkel/status/553464271862902785 2. http://www.w3.org/TR/css3-values/#calc-syntax Note that the grammar requires spaces aroun
Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの
コマンドラインツール ターミナルからnpmでファイルをさくっとダウンロードしたり、ちょっとした繰り返し作業も一発で実行してくれるツールが色々あって、やっと苦手意識も減ってきました。 まだ全然使いこなせてはいないんですが、前に比べて意味が分からず門前払いを食らっていた便利なツールがちょっとづつ使えるようになってきました。 気になったのでこもりさん（@chiper）が販売しているDevelopment Environments for Web Designersというのを買ってみました。今あまりWebデザイナーではないけどw Brackets メインで使っているエディターです。もともとはエディターの移行を考えていてSublime Textがあまりなじまなかったときに、プラグインが入れられリアルタイムリロードが簡単にできるエディターとして触ってみました。以降ずっと使っています。Advent Ca
gulpで依存関係を考慮した自動コンパイル - Hatena Developer Blog
こんにちは、シニアアプリケーションエンジニアのid:taraoです。はてなエンジニアアドベントカレンダー2014の21日目として、依存先のファイルが更新されたらコンパイルしなおす処理をgulpで実現する方法について、とくにLessを例にとって紹介します。 はてなでは、JavaScriptやCSSなどの静的ファイルをTypeScriptやLessなどからコンパイルして生成することが増えています。CSS(Less)は主にデザイナが書くため、コンパイル手順はできる限り簡単にする必要があります。多くのチームでは、サーバアプリケーションをローカル環境で実行している最中はファイルの変更に応じて自動的にコンパイルしなおすようになっています。 ファイルの更新監視からコンパイルまでの処理にはGruntなどを使ってきましたが、コンパイル対象のファイルに依存関係がある場合、依存先のファイルの変更に応じて依存元の
Flakes • An Admin UI & Template Framework
Build better business software a lot quicker with flakes Flakes is an Open Source Design & Frontend Framework that serves as a foundation for internal business applications. Flakes is a combination of CSS Libraries, JavaScript Libraries and Design files that serve as a foundation. Flakes gives priority to function and usability over glitz, it takes a no-nonsense approach to user interface design.
[CSS] Object Oriented CSSを学んで綺麗なコードを書く - YoheiM .NET
こんにちは、@yoheiMuneです。 12月はたくさんのアドイベントカレンダーに寄稿しようと思っていますが、今回第１弾はCSS Architecture Advent Calendar 2014です。まだ空きがあるみたいなので、書きたいという方はぜひ！ 今日はOOCSSというCSS設計についてブログを書きたいと思います。 Special Thanks to https://flic.kr/p/cAM8iL 目次 OOCSSとは何か OOCSSは、Nicole Sullivanによって2009年に発表されたCSS設計手法の1つで、Object Oriented CSSの略称です。 CSSの世界にオブジェクト指向という考え方を導入することで、CSS設計の1つの道筋を示しています。 なぜ設計を学ぶべきのか ところでなぜ設計思想を学ぶ必要があるのでしょうか。 設計やフレームワークやアーキテクチャ
![[CSS] Object Oriented CSSを学んで綺麗なコードを書く - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/f240faba3b3a8d30aff7d4ba1a5fa75cf5661fbb/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F346.jpg)
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。 デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種
![[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5d222ae06cf2d58d2b7bc17660d161a7352606d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102201-01.png)
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
CSSの詳細度をうまく操る - ワザノバ | wazanova
http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 Harry Robertsがブログで、CSSのプロジェクトをうまくスケールさせるためには、詳細度の影響をうまく抑えて、メンテナンス性を高めることがポイントだと解説しています。 どれだけ思慮深くソースの順や継承関係を整理しても、詳細度がトリガーになった上書き起きると、それまでの努力が台無しになる。詳細度のタチが悪いのはオプトアウトできないこと。 であるが、その悪影響をうまくコントロールする策としては、 CSSにおいてセレクタとしてIDは使わないこと。クラスを使うことを上回るメリットはない。そもそも、IDでできることはクラスで
ブラウザにやさしいHTML/CSS
1. HTML/CSS 〜 「お・も・て・な・し」をブラウザにも 〜 TAKEHARU IGARI Front-end Engineer / Evangelist ブラウザにやさしい <html5j パフォーマンス部 第⼀回勉強会 /> 2. プロフィール • TAKEHARU IGARI 猪狩 丈治 - 所属 • 株式会社 Lei Hauʼoli フロントエンドエンジニア - 略歴 • 表⽰速度、保守性、ブランディング、SEOを考慮したフロントエンドエンジニアリングを得意とし、 現在、各ナショナルクライアントのプロジェクトや、株式会社リクルートの主要サービスのフロント エンド開発に携わり、⾼速化コンサルティングも⾏う。 - 執筆 • 技術評論社「WEB+DB PRESS」 • Vol.66 〜我流コードからの卒業HTML構造化指南 • Vol.59 〜「Webサイト超⾼速化実況中継 ──
入力フォームのラベルをフワッと浮かせるパターンの別解
Float Label Patternはかっこよくて、単にラベルをプレースホルダーにするよりはマシなので使いたくなる。しかしラベルとプレースホルダーは別に提供してやりたい。機能も違うものなので、その方がきっと良いはずだ。そこで別解として、ラベルが斜めに動くものを考えた。もちろんCSSのみで実装している。 Demo: Alternative Float Label Pattern 入力フォームにフォーカスすると、左にあるラベルが斜め右上に少し移動すると同時に入力フォームが左へ拡大する。これによりFloat Label Patternと同じような結果になるが、デフォルトの状態ではラベルとプレースホルダーを両立させることができる。 ラベルを入力フォームのフォーカスと連携させるには、隣接兄弟セレクターを使うくらいしか方法はなさそうなので、マークアップは入力フォーム→ラベルの順にする必要がある。また
スクリプト無し、動画をページの背景いっぱいに表示する方法
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Reference | Codrops
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md
スタイルシートの検証に便利！ページで使用しているプロパティがどのように使われているかが分かるChromeの機能拡張 -CSS Dig
なんでCSSすぐ死んでしまうん
http://www.designwalker.com/2009/01/table.html
