業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
Polymer 2.0 Preview - Polymer Project
Blog Polymer 2.0 Preview Check out the preview branch of the forthcoming Polymer 2.0 release. 2016-09-09 Today we pushed a 2.0-preview branch to the Polymer repository, where we’re working on the next major version of the library. Polymer 2.0 is a minimally-breaking change from the current library, with a few very precise goals: Take advantage of native v1 Shadow DOM and v1 Custom Elements API’s T
ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ - NxWorld
既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。 そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたいときに参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。 一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。 image hover 63 effects イメージにhoverするとキャプションが表示されるというエフェクトが多数まとめられています。 HTMLもシンプルでエフェクトはすべてCSSで実装されています。 Css3 Transform rotate, sc
morishitter blog
今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること 持論だが、「デザインの意図を正確に理解した上で書かれたCSSは破綻しない」と思っている。 しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とUI実装者が同じである場合を除いて、デザインの意図を正確に伝え、理解することは難しい。 僕が1番時間を使うのがこの工程だ。 今の仕事ではデザイナーがSketchファイルを作成し、エンジニアがそれを元に実装する。 Sketchファイルを開き、アートボードをひたすら眺めデザインの矛盾がないかを確認し、「なぜこのようなデザインなのか」を質問しまくる。 ここで良い質問と提案をするためにも、エンジニア側に最低限のデザインに対する知識が必要だと思う。 最近読んだ本だと、「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善
You Don't Need JavaScript に学ぶ CSS テクニック
さまざまな UI を JavaScript を使わずに、CSS だけで実現するデモ You Don't Need JavaScript を紹介します。 かなり煽ったタイトルのデモですが、作者も「いくつかの点で問題がある」と述べているように、これらの UI を実装するのであれば素直に JavaScript を使うことをおすすめします。あくまでデモとして「CSS の可能性」を感じることができればと思います。 ただ、実装としてはなかなか面白いので、是非ソースも含めてチェックしてみてください。今回は、いくつかあるデモから３つピックアップして簡単な解説と一緒に紹介します。 ＊ サンプルによっては、ブラウザによって正常に表示されないことがあります。最新の Chrome で動作確認をしているので、表示されない場合は Chrome で試してみてください。 アコーディオン ラジオボタンと擬似クラスの :ch
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ
HTMLとCSSを中心にデザインされた、注目を集めたいときにぴったりな最新ボタンエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 CSS3が主要なモダンブラウザに対応したことから、アニメーションを加えたり、スタイリングの幅がグッと広がっています。加速するウェブデザインの進化において、これからますます楽しみな分野で、他と差の出るテクニックと言えるでしょう。 詳細は以下から。 コピペでラクラク、押したくなるボタン用HTMLコードスニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Fancy Button CSSのみでホバーエフェクト用ドロップシャドウとして適用した、今年のデザイントレン
CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10＋ - NxWorld
自分用に一覧化したものがほしくて作ったのでシェアします。 あくまで個人的に思ったものなので多少合わないと思うものもあるかもしれませんが、可愛らしいデザインや遊び心あるような感じのサイトで使えそう・相性が良さそうだと思ったボタンデザインやホバーエフェクトです。 いずれも画像やJavaScriptなどは使用せずに見た目から動きまで全てCSSで表現しており、CSSなのでカラー変更やフォントサイズの変更なども容易にできます。 閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。 基本的に必要だと思う記述は全て掲載しておりますが、例えばfont-familyやfont-sizeなどのように環境によって大きく記述が異なるようなものは省略して紹介しているので、場合にはよって実装してみたものと紹介して
メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS
メンテナンス性に優れ、拡張性を備えたCSSを書くための「MaintainableCSS」を紹介します。 あるスタイルを修正する際に他に影響を与えてしまわないか、せっかく書いたコードが先祖帰りしないか、似たページをつくる時にコードを再利用するのに問題はないかなど、全部はもちろん個々でも非常に参考になると思います。 MaintainableCSS 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 メンテナブルCSSにすることのメリット 1. はじめに 2. セマンティック 3. 再利用 4. ID 5. コンベンション 6. モジュール 7. ステイト 8. バージョニング メンテナブルCSSにすることのメリット モジュール化、カプセル化 スタイルはあなたの許可なしで、他のスタイルの影響を受けません。 どんなデザインの要件でも あなたの必要
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要
レスポンシブ用のMedia Queriesを使う時に「@media (min-width: 400px) {}」のように「px」を単位に使用している人も多いと思います。しかし、px指定には注意が必要です。 Webページでよく使用される条件で検証を行い、Media Queriesでなぜpxを使ってはいけないのか、そして何が適しているのかが分かる検証記事を紹介します。 PX, EM or REM Media Queries? 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 はじめに pxとemとremの検証方法 検証1. html要素でfont-sizeを指定 検証2. ブラウザでズームが可能 検証3. ブラウザでフォント設定が変更可能 検証の結果 はじめに あなたはMedia Queriesで使う単位にpx, em, remのどれが一番
![[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebb660a3174b5d3836e1ab0370b94c0ac1d1e64a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016032901.png)
CSS Grid Layout Moduleについて調べたメモ - 1000ch.net
CSS Grid Layout Moduleについて調べたメモ CSSによるレイアウトの問題はFlexboxでほとんどが解決されたと言って良いが、複雑なグリッドレイアウトを実現するためにCSS Grid Layout Moduleの策定が進められている。display: grid;ないしdisplay: inline-grid;といったように、displayプロパティに値が追加されており、それらが指定された要素はブロック要素またはインライン要素のように振る舞い、内包されるコンテンツがグリッドモデルに従ってレイアウトされる。 Chromeは50から、Firefoxは46から対応しているが、Chromeは現安定バージョンの49でもchrome://flags/でExperimental Web Platform featuresを有効にすれば使える。 そんなdisplay: grid;について
HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について | blog.jxck.io
Intro Chrome が予定している <link rel=stylesheet> の挙動の変更について、 Google Chrome チームの Jake が、興味深いブログを上げている。 The future of loading CSS この内容は、単に Chrome に対する変更だけではなく、 HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。 今回は、この内容を意訳+補足解説し、本サイトに適用していく。 HTTP/1.1 時代の CSS HTML 自体がコンポーネントを意識した作りになっている場合は、自然と CSS も class などを使いコンポーネント単位に作ることができるだろう。 しかし、 HTTP/1.1 では、リクエストの数を減らすために全ての CSS を 1 つ(もしくは少数個)に結合する最適化が主流だ
実装が面倒なタイムラインコンテンツを簡単に実装できるスタイルシート -Timelined
垂直に伸びた時間軸にポイントを配置し、そのポイントにコンテンツを紐付かせるタイムラインを簡単に実装できるスタイルシートを紹介します。
StyleStatsのChrome拡張機能を作った - MOL
StyleStatsのChrome拡張を作った。 StyleStats - Chrome ウェブストア StyleStatsはCSSを解析してスタイルの各種指標を表示してくれるnpmだ。それを簡単にChrome拡張から利用できるようにした。調べたいページで右上のボタンを押すと新規タブで結果が出る。実に簡単だ。 これまでの流れ CLI npmからインストールしてコマンドラインで使うのが一番やれることが多い。ローカルのファイルも解析できるし、それこそProgrammaticallyに自分でハックして、独自のレポートとかもできる。まぁ黒い画面に不慣れ人はちょっとあれかもしれない。 Web そうゆうわけで、もっとライトに使ってもらおうとWeb版も作った。CLIと違って、Unique Font Families、 Unique Colors がプレビューできたり、円グラフやタイムラインチャートなどグ
CSS のカバレッジを計測する Clairvoyance というツールを作りました - アジャイルSEの憂鬱
タイトルの通り、CSS のカバレッジを計測するツールを作りました。 github.com これは何？ css に書かれたスタイルが html の中でどのくらい使われているのか計測できるツールです。 使用頻度の多いスタイルを調べる（影響範囲が大きいので気をつける） 未使用のスタイルを調べる（消したい） ってのを調べるために作りました。 なんて読むの？ Clairvoyance は「クレアボヤンス」と読みます。 千里眼 という意味です。 PhantomJS を使っているので、超常現象っぽい名前にしてみました。厨二病乙。 インストール方法 npm でインストールできます。 $ npm install clairvoyance phantomjs を使っているので、もしかしたら phantomjs のインストールが別途必要かも。 使い方 インストールすると clairvoyance というコマンド
2016年に取り入れていきたい、CSSのテクニック・ライブラリのまとめ
2016年は、1月12日に古いバージョンのIEのサポートが終了します。 IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。 これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。 イラスト: Girls Design Materials 2016年1月12日からIEの対応は実質IE11に レイアウト関連のCSS アニメーション関連のCSS ユーティリティ関連のCSS 2016年1月12日からIEの対応は実質IE11に 2016年1月12日(米国時間)に、IEの古いバージョンのサポートが終了します。 各Windows OSごとの対応バージョンは、下記の通り。 Internet Explorer サポートポリシー変更の重要なお知らせ Vistaユーザーはほぼ
CSSでの表見出しの均等割付 (css3版) - 鍋の底
NSEG Advent Calendar 2015 - Adventarにエントリを書きたいと思っていたら、ネタが降ってきたので急いで書きました。 というわけで12/23のエントリになります。 さて、ワープロなどにある均等割付を、Web でも表現したいという需要があります。 このとき css では text-align に justify を指定すると思います。 この文章のように複数行ある場合には、効いているように見えますが、 table の見出しセルを均等割付をしたい場合には、うまくいきません。 Webでしらべても「text-align justify 効かない」がサジェストに現れるくらいには、効かないもののようです。 なぜこうなるのか、文章に対する均等割付から考えてみましょう。 均等割付の際には、段落の最後で、均等に割り付けてしまうと、むしろおかしくなります。 そのためか、段落の最後で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
きちんとしたHTML/CSSを記述するために参考になるスライド8選
SMTB - Semantic UI Bootstrap
