良い UI をつくる - おいちゃんと呼ばれています
師走に入った。来年良いスタートを切るために一年を振り返るには良い時期だ。 さて、2015年の後半くらいから、フロントエンド・エンジニアとして「良い UI をつくる」ことに自分のリソースを集中させてきた。UI はここではウェブアプリケーションの UI を指す。 一年半をそれに費やしてきて、このあたりで、自分が考える、良い UI（ユーザーインターフェイス）とは何か、どうすればそれを実現できるのかを整理しておくのも悪くないなと思ったので書き留めておく。 良い UI をつくるには 良い UI をつくるには次の 2つが必要だと考える。 1 良い UI を定義できること 2 上記 1 を実装（実現）できること そう、いまから何をしようとしているのかというと、良い UI をつくるために必要な要素をツリー構造で整理しようとしているのだ。 ただし、以下に良い UI をつくるために必要な要素を分類しようと試み
CSSでコンテンツの中央配置を実装する方法 - NxWorld
左右・上下左右などCSSで要素やコンテンツの中央配置（中央寄せ）を実装する方法を備忘録も兼ねていくつか紹介します。 どれも目新しいものではないのですが、ただ中央寄せといっても様々な実装方法があるので、デザインや動きによっていろいろ使い分けることができるとコーディングでレイアウトを組むなども楽になると思います。 はじめに ここで紹介している内容はいずれもHTMLは下記のようなものを使用し、<div class="child"> ... </div>の部分を中央配置させるという内容になっています。 また、領域がわかりやすいように.childにはグレーの背景色を指定しています。 <div class="parent"> <div class="child">Lorem ipsum dolor sit amet.</div> </div>
Layers CSS
Lightweight. Unobtrusive. Style-agnostic. Build your look on the web, not Twitter's – and build it fluid. Layers CSS is a CSS framework aimed for practical use cases. It comes with a small footprint and zero bullshit. Normalizations & sensible defaults Fluid grid + progressively enhanced columns Preserves native form styles by default No px definitions No colors, no borders, no rounded corners No
CSSのfont-smoothingでフォントをキレイに見せる - ディレイマニア
フォントがやけにキレイに見えるなというサイトがあってどうやってるのか全然分からなかったんですが、最近になって「font-smoothing」というプロパティの存在を知りました。 スマホやモダンブラウザ向けのプロパティですが、1行足すだけでテキストがスタイリッシュになります。 font-smoothingで細めのフォントを実現 まず最初にfont-smoothingをかけたものとかけてないものでどう違うのか比較画像をお見せします。 ▼font-smoothing使ったときと使ってないときの比較用GIFアニメです。テキストの雰囲気が違うのが分かりますかね。 書き方は簡単で、下記の記述をフォントを変更したいところに書き加えるだけ。 -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 例えばbodyに書い
意外と多い!? Web フォントに対応していない環境 ～2012 年の Web フォント事情
Web フォントは「Web サイトにフォントを埋め込む」ための技術です。 先日、Web フォントを使った 絶対にコピペできない文章を作ったったwwww を公開しました。多くの人に楽しんでもらえたのですが、その一方で、Web フォントが適用されなかった方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。 ほぼすべてのブラウザーが Web フォントに対応しているはずなのですが、一体、何が原因だったのでしょうか。 そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。 ４種類のフォーマット 一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
おい、このスタイルガイド、生きてるぞ！ Hologram と「Pepagram」ではじめるスタイルガイド入門 - Pepabo Tech Portal
はじめまして、鹿です。カラーミーショップというネットショップ構築サービスで、決済画面を担当しているデザイナーです。 UI パターンを一覧できる「スタイルガイド」は、開発にあたってとても役に立ちます。でも、wiki やテキストファイルに書かれたドキュメントは、更新を忘れて放置してしまい、実態とかけはなれて混乱を招くこともあります。プロジェクトにあわせて一緒に成長していく、生きたスタイルガイド（Living StyleGuide）を作るには、管理しやすいことも重要です。 そこで、本エントリでは、スタイルガイドジェネレーターの Hologram を利用してスタイルガイドを作成・運用する方法と、ペパボ用テーマ「Pepagram」を紹介します。 スタイルシートこわい 突然ですが、スタイルシート書いてますか？ もしスタイルシートに触れたことがある方なら、いちどでもその仕様にうんざりさせられた経験がある
Styling Broken Images | bitsofcode
Broken images are ugly. But they don’t always have to be. We can use CSS to apply styles to the <img> element to provide a better experience than the default. Two Facts About The <img> Element # To understand how we can style broken images, there are two facts about the way the <img> element behaves that we need to understand first. We can apply regular typography-related styling to the <img> elem
総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi engineer blog
こんにちは！フロントエンド闇祓いの Kuniwak です。 この投稿はmixiグループ Advent Calendar 2015の20日目の記事です。 今年の9月に、スマートフォン Web ブラウザ版 mixi「mixi Touch」の巨大 CSS を Less （CSS プリプロセッサー）でビルドする環境へと移行しました。 書き換えた CSS の行数は、なんと 56,725行 です。😵 ということで、今回は弊社の大規模 CSS → Less 移行事例についてお話しします。 背景 スマートフォン版 mixi は、2010年5月に始まりました。 この頃のスマートフォンは、iPhone 端末であれば iPhone 3GS、Android 端末であれば Nexus One という時期です。 また、スマートフォンの世界では、Webkit ベースのブラウザーが席巻していた時代ということになります。
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
edalog - アニメーションを滑らかに。レイヤーとwill-changeプロパティ
HTML5 Conference行ってきました 話を聞いたセッションは以下の通り 11:20〜 ルームA プリンより滑らか。スムーズなアニメーションの作り方。 13:20〜 ルームD Web Componentsのアクセシビリティ 14:20〜 ルームE 2015年これからの日本のWebパフォーマンスについて 15:20〜 ルームC Open Web Platform推進に、日本の Web Developerはどう関わっていくか 16:20〜 ルームC Polymer で作る次世代ウェブサイト マークアップの話や、css設計の話、あと最後のスペシャルセッションのLTも聞きたかったので、動画のアーカイブ確認します。 聞いた中でも、なんとなく聞いたことあったけどそういうことなのか、という糸口が見つかったような気がしたのが、アニメーションのセッション。 スライドも公開してもらえるっぽいので、わか
CSSでTokyo Otaku Modeのロゴを作ってみる | Tokyo Otaku Mode Blog
こんにちは。 Tokyo Otaku ModeのUXデザイナーおよびフロントエンドエンジニアの吉見です。 みなさんCSSは好きですか？ 先日弊社のロゴを眺めているとCSSだけでも表現できそうだなと思い、実装してみた話をしたいと思います。 HTMLの準備描画のためだけのDIVを大量生産して実装していくだけではおもしろくないので、ある程度制約を設けたいと思います。 Tokyo Otaku Modeという1字1字をそれぞれ i タグにし、 T は data-tom="t"、O は data-tom="o" といった具合に独自data-属性を持ったDOMで構成してみます。 出来上がったソースが下記のようなHTMLです。 ※ 一部Safariではデモが動作しない可能性があります。ChromeまたはFirefoxでご覧ください。 index.html <div id="tokyootakumode">
hologramでカスタムスタイルガイド | 第1回 機能概要
hologramでカスタムスタイルガイド 第1回 機能概要 第1回目はhologramというRubyで書かれたスタイルガイドジェネレータの基本的な機能を概観します。シンプルでありながら高い拡張性をも持ち合わせ、柔軟にスタイルガイドを作成することができます。 はじめに このシリーズでは、hologram（ホログラム）という、Rubyで書かれたスタイルガイドジェネレータを紹介します。 まず第1回の今回は、hologramがどういったものか、サンプルとともに紹介しましょう。今回はざっくりとこんなふうになるという解説にとどめますので、細かい解説は次回以降に行っていきます。 なお、紹介するサンプルは次のリポジトリからダウンロード、またはクローンできます。併せて参照してください。 hologramサンプルリポジトリ https://github.com/codegrid/hologram このシリーズ
Hologram ではじめるスタイルガイド入門
スタイルシートを書くのってほんとうにややこしいですね。気がついたら、どこになにが書かれているのかわからない数万行の CSS 地獄になってしまいます。 CSS 地獄にならないためには、例えばボタンなら共通のボタンのスタイルシートに統一して、どのページでも同じスタイルシートでボタンを表現したほうが、効率的だし仕事も早いですよね。デザインのリニューアルだって一瞬です。さらには、デザイナーが作業しなくてもエンジニアだけでボタンを用意できてしまうという CSS 天国が待っています。 CSS 天国を実現するためには、どのような共通のスタイルシートを用意しているのかまとめてあるドキュメント、「スタイルガイド」を用意しておくと便利です。べつに wiki にまとめてもいいんだけど、wiki って更新するの忘れてしまいがち。そこで、スタイルシートに書いたコメントを抽出して自動でスタイルガイドを生成してくれるっ
CSS in JS と CSS Modules // Speaker Deck
ng-kyoto 主催「ng-kyoto Angular Meetup #3」での発表資料です。 http://ng-kyoto.connpass.com/event/20512/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blaze CSS - Open Source Modular CSS Toolkit
cubic-bezier.com
Using Hologram with Rails to Auto-Generate Styleguides