超マイナーなCSSヲタク知識を晒してみる：CSS displayプロパティ値の自動変換 - Qiita
これはDMM.com #2 Advent Calendar 2017 - Qiita 23日目の記事です。 昨日は @norinity1103 さんの 「パターン・ランゲージ」のワークショップを社内で実施した件 でした。 カレンダーのURLはこちら DMM.com #1 Advent Calendar 2017 - Qiita DMM.com #2 Advent Calendar 2017 - Qiita 自己紹介 はじめまして。DMM.com LaboのÉcouffesと申します。最近のマイブームは吉岡里帆のどんぎつねクリアファイルを30分毎に眺める事です。そのマイブームも、あれです、自動化したいです。はい。 はじめに 今回 Advent Calendar 参加にあたり、当初は勢い余って『超マイナーなCSSヲタク知識を晒してみる』と宣言しました。 ヲタク知識たるもの、実務に即役立つ有益な
JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]
「ピクシブ株式会社 Advent Calendar 2015」の24日目の記事です。こんにちは、今年8月からピクシブに入社した新米の@_furoshikiです。入社直後は、古くなって大変なことになっているJavaScriptのコードを、そーっと触る系エンジニアをやっていました！ 私はピクシブに入る前から、オフィスの一部を借りて「東京Webパフォーマンス」という趣味丸出しなイベントを開催しています。その中で扱ったテーマのひとつである「requestIdleCallback」が、古いJavaScriptのコードにUIをブロックされ、荒んでいた私の心を救ってくれました！ 今回、このrequestIdleCallbackというブラウザの新機能について、pixiv insideのブランド力を信じて、日本に多く広まるよう宣伝してみようかとおもいます！ そもそも、ブラウザのなにが問題なのか？ Windo
![JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b5c5c67bdd44dcf1b4cc991ccabb9ad1c20ca0bb/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20151217%2F20151217010303.jpg)
わたしのデザインセオリー（写真マスク編） - デザイナーのイラストノート
この記事は「Webデザインセオリー Advent Calendar 2015」の11日目の記事です。@striveさんの「Webデザインの価値と効率を上げるため意識していること Webデザインセオリー Advent Calendar 2015」というとても戦略的でいい記事から一点、小手先の話ですみません・・・！ デザインに写真を使うときにわたしがよくしていること 「デザインセオリー」というと「これをやればデザインはOK！」みたいに聞こえますが、もちろんそんなことはなく、自分が画像をトリミングしたりマスクするとき、イメージや印象を伝えるために、どんな手法をよく使うかということを実例を交えながらご紹介します。 グラデーションマスクにこだわってみる メインイメージなどで、写真の上にメッセージを重ねるのはよくある手法ですね。例えばこの緑をバックにした女性の写真を使用して、上に文字を重ねましょう。
花見酒（グラデーション）: CSS昔話 Advent Calendar 2015
この記事はCSS昔話 Advent Calendar 2015 5日目のエントリーです。 一部、事実と異なる部分があります。 幼なじみの二人。 そろそろWeb 2.0風のデザインが評判なので 「ひとつグラデーションを使ってみようじゃねえか」 と、話がまとまった。 ところが、あいにくCSS2.1の勧告もしていない。 そこで兄貴分がオツなことを考えた。 Internet Explorerの独自プロパティに Gradient関数を借り込んで 前景と背景の間にグラデーションを表示する div { filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff00,EndColorStr=#ff00cc00); } Internet Explorerは、Netscape Navigatorが
@importトリックの回顧 - dskd
公開日2015-12-04タグAdvent CalendarCSS“昔々あるところに……。” CSS 昔話 Advent Calendarの 4 日目。 CSS の@import ルールは CSS 内で違う CSS ファイルをインポートできる機能だが、ブラウザによって宣言の解釈が異なっている時代があった。 WinIE4 は@import ルールで url()を使わないと解釈できない MacIE4.5 は@import ルールでファイルパス指定をシングルクォーテーションで記述しないと解釈できない /* WinIE4 は url() でないと解釈できない */ @import "/css/style.css" /* 無効 */ @import url("/css/style.css") /* 有効 */ /* MacIE4.5 ではシングルクォーテーションでないと解釈できない */ @impo
Universal IE6 CSS
昔々あるところに、 Universal Internet Explorer 6 CSSというのがおったそうな。 …Universal IE6 CSSについては知らないひとも多いかもしれない。 CSSを学び、少しテクニカルなことをしはじめたころに憧れていた人物にAndy Clarkeという人がいる。 彼はStuff and Nonsenseというデザインコンサルティング会社に勤めており、イギリス人らしくモッズなスタイルのWebデザイナーだ。実務では政府の仕事をやっていたり、それ以外の活動としては、Web標準、HTML5、CSS3の黎明期にモダンなCSSデザインアプローチの書籍を出版・講演活動と広げてきた人物だ。 2008年くらいに「クロスブラウザ対応」という言葉が流行り、あわせてProgressive Enhancement/Graceful Degradationというようなアプローチが浸
Extract for Brackets(preview)の使い方
Brackets Advent Calendar 2014の12月21日の記事です。 Extract for Bracketsの使い方について解説をしています。Read less
BracketsでSassをライブプレビューする - Qiita
本記事はBrackets Advent Calendar 2014の20日の記事です。 ライブプレビューがとても簡単に行えることが魅力のBracketsですが、実はSassのライブプレビューにも対応しています。 方法は デフォルト機能によるもの エクステンション（brackets-sass）によるもの の2通りあり、それぞれメリット・デメリットがあります。 以下、それぞれの方法でライブプレビューを実行するための解説をしていきます。 ディレクトリツリー |──index.html | |──sass/ ──main.scss | |──_var.scss | |──_module.scss | |──css/（コンパイル前は空フォルダ） デフォルトの機能 メリット 必要なのはSassの実行環境のみ Compassにも対応 デメリット 反映されるのがファイル保存時のコンパイル後で、
フリーランスというか、会社立ち上げて 1周年なので今年を振り返る
フリーランス Advent Calendar 2014、4日目の記事。ちょうど独立して 1周年なので、「なんでフリーランスになったのか」、「今年 1年は自分にとってどうだったか」、「来年はこんな感じで行きたいな」 について淡々と書いてみたいと思います。 この記事は、フリーランス Advent Calendar 2014、4日目の記事です。いつもは技術系のカレンダーにしか参加していないので、この手のは初めてなんですが書きます。 ちょうど 去年の今頃、自分の会社作って独立しましたというご報告をこの Blog でもさせていただいて、早いものでそこからもう 1年経ってしまいました。今月決算なので色々大変です。 自分の会社 （バーンワークス株式会社） 作って独立しましたのご報告 私はフリーランスという働き方などに対して、一家言あるわけではありませんので、「なんでフリーランスになったのか」、「今年 1
四畳半ワークス+1.5
とある六畳間で印刷物を作ったりWEB的な何かをしていたり、物思いをしてみたり、嫁様の目を盗んでtwitterとかしてたりします。
Brackets Advent Calendar 2014 - Adventar
Adobeが開発するオープンソースのコードエディター「Brackets」アドベントカレンダーです。Bracketsをちゃんと仕事でバリバリ使っている人がどれくらいいるのか気になってます。参加者がいなかったら僕一人でやるかも。エクステンションの話しとかテクニックの話しとか聞きたいです。
Consolasフォントについて #LOVEFONT - ただのブログです
Adventカレンダーのために、とりあえずブログたててみました← Advent Calender #LOVEFONT クリスマスの記事です Consolasとは Consolasはmonospacedフォント、Windows(Vista以降)に搭載されてます。 Consolasの好きなところ フォントによって誤認識しやすい文字も、認識しやすいフォントになっています。(0とO、lとI・1等） 華やかさはありませんが、視認性が非常に高くなっています。 monospacedなので、LinqやSQL、HTMLのようにコード中に半角スペースが大量に出てくるような場合にも、読みやすいと思います。 普通の説明は、眠い説明になりそうなので割愛して、とりあえず適当に読みにくそうなコードを適当に書いてみた。（コードに意味はないです。こんなもの普通かかねーよという突っ込みはなしにします。） ※自分のVSが痛ID
Shumpei Shiraishi's Weblog: Web開発を革命する（かも知れない）Web Componentsという仕様について
2012年12月25日火曜日 Web開発を革命する（かも知れない）Web Componentsという仕様について Web Componentsは、現在のところ余りまとまった日本語の情報がないようですが、Web開発を大きく、本当に大きく変える可能性を持つテクノロジーです。 Web Componentsは、現在のWebが抱える大きな問題点を解決する手段としてW3Cで仕様が策定中です。仕様策定を主導しているのはGoogleで、現時点ではGoogle Chrome（WebKit）がWeb Components（の一部）を実装している唯一のブラウザです。 Google Japanのエンジニアも、Web Componentsの実装には深く関わっているとのことなので、そのうち日本語の情報も充実してくると思われますが、本エントリはそれまでのつなぎ、ということで書いてみたいと思います。 しかし、Web Co
#LOVEFONT : Museo / TAKAYA OHTA
#LOVEFONT Advent Calenderについて 「#LOVEFONT Advent Calender」は、”特定のフォントを愛する人が、そのフォントの一体どこがいいのか、どうしてそのフォントでなくてはダメなのかを語る” ことを目的としてWEBCRE8.jpを運営する酒井優さんが企画なさったイベントです。12月1日から12月25日まで、フォントを愛する方々がそのフォントについて思いの丈を綴っていますが、本日12月23日は僕が大好きなフォント「Museo」を紹介したいと思います。 #Museoについて 「Museo」はJos Buivenga氏の「exjibris Font Foundry」によって配布・販売されているセリフフォントです。2008年の発表以降、3ウェイトが無料であることやWebフォントとして利用できるために海外のWebサイトを中心に支持を得たフォントであります。現
美しいセリフフォント Garamond #LOVEFONT - colopixie
今年も残るところ10日…！初詣のCMを見たりするとすごい年末感ありますね。2012のまとめはそのうち書きましょう。 さて今日は、WEBCRE8.jpの優さんから#LOVEFONT Advent Calendar 2012に声をかけていただいて参加させていただきました。21日目です。Garamondにしてみました。 なんとGaramond（ギャラモン）は16世紀という長い歴史でさらに様々なバリエーションが生まれ続けてきたというのです。Variation of Garamond そのバリエーションは、元はGaramondですが大きさ、ハネなんてところが変更されています。下のHやoでも重ねてみると全然異なっていることがわかりますね… Garamond v Garamond | Physiology of a typeface Garamondと聞いて思い浮かぶのはなんでしょうか？ たとえば、Ap
PT Sansの紹介
この記事は#LOVEFONT Advent Calendar 2012、24日目の記事です。 PT Sansとは PT SansはParaType社が制作したsan-serifフォントです。PT Sansの他にも、serifフォントのPT Serif、等幅フォントのPT Monoがリリースされています。 PT Sansの特徴 * 強い癖がない。汎用的に使うことができます。ただし、"Q"だけは特徴的な形をしているので好みが分かれるかもしれませんね。 * 色々種類がある。通常のPT Sansに加えて、幅の広いPT Sans Caption、幅の狭いPT Sans Narrowの3種類がリリースされているので用途によって使い分けられます。ブログの記事タイトルなど、1行に収めたいときなどはPT Sans Narrowをよく使います。 * Google web fontsで使える。つまりすぐ使えます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS でフォームの値を読む
アクセシビリティ・ブルース 〜 お前の alt に首ったけ 〜
http://keikudo.com/design/3865
http://font-stalker.com/2012/12/20/frutiger/