モダン日本語フォント指定CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…
Image diffing using CSS
Since the last post on CSS was popular here is another simple CSS trick that I found useful in the past. Let’s say we want to find the difference between these two images: You can do this by simply inverting the colors and then stacking them together at 50% opacity. This can be achieved with a single CSS filter: -webkit-filter: invert(100%) opacity(50%); What you should get back is a gray image ex
tacit
Headings Just use standard <h1>...<h6> tags: This is <h1> Use a heading of the highest level once per page. This is <h2> Use <h2> for sections of the page. This is <h3> Use <h3> for sub-sections. This is <h4> I would recommend to avoid this type of heading at all. This is <h5> I would recommend to avoid this type of heading at all. This is <h6> I would recommend to avoid this type of heading at al
CSS SANS
CSS SANS は、WEB上でデザイン・文字組をするためのプログラミング言語 CSS でつくられたフォント。 WEBの歴史・進化を映し出し、時代に合わせて形を変える、これまでにないフォントです。 CSS SANS is the font created by CSS, the programming language for web designing and typesetting. It is an unprecedented font that reflects history and evolution of the Web, and even changes its own shape. フォントの成り立ちHow the font is madeCSS でできることは、WEBページのレイアウトを整えたり、文字組・文字間の調整をしたりなど、様々。 ただひとつ、「文字自体をデザイン
神獄のヴァルハラゲートのCSS設計 - I'm kubosho_
CSS Architecture Advent Calendar 2014 9日目の記事になります。 神獄のヴァルハラゲートのCSS設計方法について振り返りつつ、こうしているということや、上手くいったところ、改善したいところを書いていこうと思います。 アプリの規模 ASP.NET MVCを使っていて、View側はRazorテンプレートを使っているのですが、Razorのファイルを検索してみると以下の量となります。 find ./ -name "*.cshtml" | wc -l 1674 実際には、これにフィーチャーフォン向けのファイルや、部分的なViewファイルも含まれています。 なので、実際CSSを適用しているファイルの量は、この検索結果よりは格段に減りますが、それでも、約600ファイルはあると思います。 ちなみに、今年のはじめに同僚の@mayukiが、ソーシャルゲームのフロントエンドと
MediumのCSSはこの上なく最高！ | POSTD
自分は常に最高であれって思っている。最高の香りを身にまとい、最高の振る舞いをする。ごみ1つ捨てるのだって、ほかの誰よりイカしてなきゃ。 ―Lil Wayne ずっと長いこと恥も外聞も知らずに、MediumでCSSについて執筆しようと思っていました…。 それからどうなったって？ 違うことをやっていた？ 何てこと、どうやったら同じことができるかって？ やり方を教わりたいって？ これから書くことは私たちのCSSについての覚書で、これまでに歩んできた道のりと現在のCSSについて述べています。 始まり（これまでの道のり） だいたい2年ほど前、私はソフトウェアアプリケーション開発と（皆さんが読んでくれているといいのですが） medium.com に取り組むためにObvious Corp.に加わりました。 その時、Mediumは、すでに一連の”スタイル更新”を行っていました（ スタイル更新とは デザイナ
不特定多数の人が更新する大規模サイトに必要な CSS 設計の思想
今話題（？）の CSS 設計のメモ。 この「ある程度の規模」というのは、肌感覚としてテンプレートの枚数( ≠ Webサイトのページ総数)が 20P〜50P くらいのイメージ。 また、コーディング完了後に自分以外の人間による断続的な更新が入るという前提。 そして一番重要なのは「更新する人のスキルは定義しない。」ということ。つまり HTML の知識が乏しい人が更新する可能性があることを前提とする。 きっと1ヶ月くらいすれば変わると思うけど、自分の思想のログとして残しておく。 今ぼくは以下のことに気をつけながら CSS を書いている。 コードが長くなることを気にしない セレクタが長くなることを気にしない セマンティクスの実現の難しさを理解し、妥協する 再利用性より保守性 拡張しやすい設計 最初から最適化しようとしない ゴールは目先のパフォーマンス向上ではなく誰が触っても問題が起きにくい設計 ひと
CSS謝罪文 - jsdo.it - Share JavaScript, HTML5 and CSS
CSSによるインデックスされない謝罪文 CSSに本文が書いてあるので、画面上は表示されているがGoogleでのキーワード検索には引っかからない 「流出」などの嫌な単語は:beforeと:afterに「流」「出」を分けて書くことで、自然言語解析を回避 #s { p:first-child { font-weight: bold; font-size: 120%; } p:not(:first-child) { text-indent: 1em; } p:nth-child(1):before{ content: "お 詫"; } p:nth-child(1):after{ content: " び"; } p:nth-child(2):before{ content: "平素は弊社のサービスをご利用いただき、誠にありがとうございます。"; } p:nth-child(3):before{ c
BootstrapサイトをPageSpeed Insightで満点をとるまで改善する - ワザノバ | wazanova
http://calendar.perfplanet.com/2013/breaking-the-pagespeed-barrier-with-bootstrap/1 comment | 0 pointsDan Ritiが、Bootstrapを利用したサンプルサイトをPageSpeed Insightのスコアが100点になるまで改善した取組みを紹介してます。 1) Bootstrap off the shelf [ Mobile Score: 77, Desktop Score: 90, DOMContentLoaded: 833ms ] 2) Enabled mod_pagespeed [ Mobile Score: 80, Desktop Score: 93, DOMContentLoaded: 660ms ] PageSpeedのデフォルトのフィルターを有効にするだけでは3ポイントし
we love herokuのデザインリニューアル
we love herokuリニューアルのお話です。今回はデザインサイドの話です。 we love heroku とは we love herokuは、herokuを使ったサービスを登録するギャラリーサイトです。 開発したキッカケは、@herokujpさんのつぶやきでした。去年の2月ぐらいでしたかね、仕事の帰り道にこのつぶやきをみて、設計しながら家帰り、即実装という感じでした。 railsを初めて1ヶ月ぐらいの頃にherokuを試したところ、すごく感動したのですっかりherokuのファンになっていました。そして、2月のheroku meetupに参加しようと思っていたところ、先ほどのつぶやきが目に止まり。作ってみるかな、と。 トップページを振り返ろう 今回は機能の話は書きません。あえての見た目の話だけです。当時のバージョンのスクリーンショットはこんな感じでした。 Bootstrap2のまん
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
CSS Flexbox Please!
CSS Flexbox Please! The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapはこう使う
フロントエンド初学者がSPAに手を出してみた
Hex clock
html5-memo.com
モダンCSS設計の解説サイトまとめ - Qiita
CSSのセレクタがちょっとあやふやな人はやってみて！ 楽しみながらCSSのセレクタを学ぶ -CSS Diner
http://www.atozcss.com/
deform.jp - このウェブサイトは販売用です！ - 日本 アート デザイン デジタル ブランド ユニーク ヶ月 地図 リソースおよび情報