amakanにstylelintを導入した - ✘╹◡╹✘
https://amakan.net/ のこの辺の改善の続き。 amakanをUnicornからPumaに移行した - ✘╹◡╹✘ amakanでyarnを使うようにした - ✘╹◡╹✘ amakanでRuby 2.3.3を使うようにした - ✘╹◡╹✘ amakanを Ruby 2.3.3 から 2.4.0-preview3 に移行した - ✘╹◡╹✘ amakanのフロントエンドを色々改善した - ✘╹◡╹✘ amakanをSidekiqに移行した - ✘╹◡╹✘ amakanの開発環境をDockerに移行した - ✘╹◡╹✘ amakanの本番環境をDockerに移行した - ✘╹◡╹✘ amakanをDocker化した感想 - ✘╹◡╹✘ amakanのCIをShippableに移行した - ✘╹◡╹✘ amakan の CSS は勘で書いていて、何となく気が向いたので style
複数の背景画像とCSSグラデーション
伊勢丹の新しいタータンのような矩形模様の繰り返しに過ぎないものは、多数の背景画像を気軽に扱える時代になったので、CSSグラデーションで簡単に作ることができる時代になった。最近あまりCSSグラデーションを書いてなかったので、今時のグラデーション文法の復習も兼ねて作った。 Demo: New Isetan Tartan チェックを構成する線をそれぞれ背景画像として定義し、特定の順番で重ねるという方法で行う。新タータンの場合は上から順にのような重なりになっている。 赤の縦線 赤の横線 黄の縦線 黄の横線 ベースの緑 background-imageプロパティーで複数の背景画像を重ねた場合は先に書いた画像が手前に来るので1から4に順にグラデーションとして書いていく。それぞれのグラデーションはtransparentキーワードを使って綺麗に切り替わるように調節してやれば良い。 .test { back
ルビと行間
ルビありの文章を作っていて、ルビのある行とない行で行間がずれるのを防ぐにはどうしようかと考えていた。どうもInternet ExplorerとChrome共にrtの表示はCSSで制御できないみたい。それならと論理的な計算で行間を確保すればいけるかと思ったけれども、それもダメそう。アバウトにline-height: 2という結論は出たけれども……。 Demo: Sizing Ruby rtのフォント・サイズは50%でline-heightプロパティーはnormalなので、その高さは0.5 * 1.25 = 0.625と計算できる。例えば親のフォント・サイズが16pxとすると16px * 0.625 = 10pxとなる。これが行間に収まれば良いので、line-height: 1.625あれば十分そうだが、フォントによっては1.85程度必要になる。アセンダラインとディセンダラインの影響なんだと思
compiler/csslint.vim #2
Vim上ではオンザフライでガシガシCSS Lintでチェックしたいので、マイルドにチェックするようにCSS LintのCLIオプションを調節していた。多くのルールを無効にするとややこしい感じがしたので、知りたいものだけ--errorsでエラーに昇格させ、Vimのerrorformatオプションで警告は捨てるという形にした。 Download: compiler/csslint.vim 有効にしたルールは以下の7つのみ。元々エラーで吐かれるものはそのまま。 display-property-grouping duplicate-properties empty-rules import known-properties star-property-hack underscore-property-hack もうちょっと色々チェックしても良さそう。
ReworkとPostCSS
AutoprefixerやMyth経由で話題になったRework。そしてAutoprefixerが乗り換えたPostCSS。両者はどのようなことに主眼を置いているライブラリなのか、SassやLESSとの関係はどうなのか、そしてどのようなツールを書く時にそれらを使うべきなのだろうか。 ReworkはCSSをプリプロセスするためのライブラリということになっている。サポートされているかどうかよくわからない最先端の標準仕様のドラフトに従って書かれたCSSをブラウザーがちゃんと解釈できるようにするとか、特殊な記法を展開するとか、だ。こういった現実世界ではうまく動かないCSSをプリプロセスしてちゃんと動くCSSに変換するツールを作るためのものということになる。 SassやLESSと同じ立ち位置のものを作るためのものなので、共存させることにはあまり意味が無い(まったく無いわけではない)。現状のSassや
How SVG Line Animation Works | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I bet all of you have seen that little trick where an SVG path is animated to look like it’s drawing itself. It’s super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used
contentプロパティーの値とgetComputedStyle() - Weblog - Hail2u.net
CSSのcontentプロパティーを使ってCSSのバージョン番号を仕込み、それをwindow.getComputedStyle()メソッドを使って表示してやろうと考えた(スタイル・ガイド用)。Chrome 32やFirefox 27では期待通りに動いたんだけど、Internet Explorer 11ではうまく拾えず、初期値であるnormalが返ってきた。どうやらIE11は擬似要素以外に指定したcontentプロパティーの値をgetComputedStyle()でうまく読めないようだ。バグではなさそう。 Demo: content property and getComputedStyle() Chrome 32やFirefox 27ではYesとなる(引用符が付いたり付かなかったりはする)が、Internet Explorer 11ではnormalとなる。 デモではhtml要素に直接con
SVG と背景色を使ってサイズやカラーが自在な汎用性のあるアイコンボタンを作る
SVG によるアイコンデータと CSS による背景色の指定を組み合わせてサイズやカラーを自在に変更可能なアイコンボタンを作るお話。あわせて主要 Web サービスのロゴデータを SVG で用意する方法や注意点なども。 透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG （Scalable Vector Graphics） でやることでサイズ変更にも対応しやすいやつを作るっていうお話。 手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 （スマートフォン表示だと隠れてると思いますが） にある 「Follow」 メニュー部分で使ったので紹介。 やってることは簡単です。白抜きにしたい部分をそのまま白色、背景は透過するよ
安全な@font-faceの書き方
Translation of: Bulletproof @font-face syntax 最も優れた@font-faceの定義方法を解説させて貰おう: @font-face { font-family: 'Graublau Web'; src: url(GraublauWeb.eot); src: local('Graublau Web Regular'), local('Graublau Web'), url(GraublauWeb.otf) format('opentype'); } 最後になぜこの方法が最も優れたものなのかは説明することにして、最初に他の方法の欠点を解説することにしたい。もちろん、問題の中心になるのはIEが.eotフォントが必要なのに対して、他のブラウザでは.ttfか.otfを必要とすることである。それでは順に解説していこう。 条件付コメントによる方法 <style
Firefox 27 が正式リリース、all:unset で CSS のリセットが可能に
Firefox の最新版、Firefox 27 が正式リリースされ、自動更新も提供開始されました。 CSS 関連では、all プロパティと unset 値に対応し、CSS のリセットが簡単に行えるようになった他、cursor プロパティ用の -moz-grab、-moz-grabbing 接頭辞が外れました。ベンダプレフィックスなしで使用できます。 Firefox 27.0 リリースノート Firefox 27 サイト互換性情報 Firefox 27 for developers all: unset で何ができるか 仕様的には下記にあります。 3.1 Resetting All Properties: the all property ： CSS Cascading and Inheritance Level 3 The all property is a shorthand that
HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと
HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S
要素の表示/非表示をトグルするベストプラクティス - hogehoge @teramako
[JavaScript] tr要素 の display プロパティを用いた表示切替えについて | Blog | Development Reference を読んで、display = "block" はアカンやろ、と思ったので書いておく。 <div id="foo"> <p>FOO</p> </div> div#foo を JavaScript から表示/非表示をするには。 ダメパターン function show (elm) { elm.style.display = "block"; } function hide (elm) { elm.style.display = "none"; } これはダメなパターン。何故なら、show 関数が対象とする要素が、display: block で合っているか保証がないから。 場合によっては、inline,inline-block,table,
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック
角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。 デモページ ※リンク切れ 実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 <body> <div> This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border? </div> </body> CSS 落書き風のボーダーを実現しているのは、border-radiusです。 スラッシュで区切ることにより、水平
Front-end CSS Frameworks
UI is the vocabulary of the web. Semantic empowers designers and developers by creating a language for sharing UI. Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
csscss by zmoazeni
What is it? csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations. What is it for? One of the best strategies for me to maintain CSS is to reduce duplication as much as possible. It’s not a silver bullet, but it sure helps. To do that, you need to have all the rulesets in your head at all times. That’s hard, csscss is easy. Let it tell you what is
How to use CSS3 transitions
Everyone loves motion. Adding the fourth dimension (time) to a site design is the main way screen-based design stands out from print design. CSS Transitions are a simple method for animating properties of an element enabling you to enrich certain events in your web design, without the need of Flash or JavaScript. The W3C aptly describes transitions on their website as "CSS Transitions allows prope
[CSS]にょいーんとアニメーションでパネルを表示するスタイルシート
JavaScriptやFlashを使用せず、パネルをにょいーんとアニメーションで表示・非表示するスタイルシートを紹介します。 デモページ 実装 デモページを例に実装方法を紹介します。 HTML 最初のチェックボックスはdisplay:none;で非表示で、その後にlabel要素を実装します。 <input type="checkbox" id="doggiezzz" class="popUpControl"> <label for="doggiezzz" class="header-button"> <input type="checkbox" id="doggiezzz" class="popUpControl"> <label for="doggiezzz" class="header-button"> More dogs! <span class="box"><img src="ht
[CSS]表示サイズに合わせて最適なグリッドを構築するスタイルシート -SimpleGrid
デスクトップ用のブラウザだけでなく、iPhoneなどスマートフォンにも対応した、表示サイズに最適なレイアウトを適用するResponsive Web Design用のシンプルなグリッドシステムを紹介します。 ～720px ※画像クリックで拡大 [ad#ad-2] SimpleGrid 3つの特徴 Responsive Web Design SimpleGridは4種類のスクリーンサイズで最適なレイアウトを提供します。 水平スクロールバーとは、さよならです。 ～720px 720px～ 985px～ 1235px～ 効率的なclass管理 同様のグリッドシステムの多くは、同じサイズのグリッドを一つのclassで管理します。SimpleGridではユニットの最初・中央・最後を個別のclassで管理します。 スタイルシートはシンプルに SimpleGridは管理のしやすいシンプルなclass名を採
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
作りながら学ぶ HTML/CSSデザインの教科書-公式サポートサイト
