よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 UI interactionsの使い方 すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。 HTML HTMLは、button要素にclassを与えるだけでのシンプルな構成です。
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある
Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri
![[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある](https://cdn-ak-scissors.b.st-hatena.com/image/square/222e57e0cb617f5924de9e159879efca2a68aa3e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017111110.png)
CSSのテスト | 前編 何をテストするのか
CSSのテストとは JavaScriptのテストであれば、ある条件のもとに正しい値を返しているか、要素が存在するかなどのテスト項目を挙げることができるかと思います。 ではJavaScriptではなく、CSSをテストするとしたらどういったことをテストすればよいか考えたことはあるでしょうか。筆者は次のような項目を考えました。 CSSが適切な書き方がされているか確認したい Sassで作成した関数（@function）が正しい値を返しているか確認したい ある部分が正しい見た目をしているか確認したい それぞれの項目に関して簡単にですが、なぜそれをテストする必要があるか、またテストの概要を解説していきます。 なお、このシリーズで紹介するサンプルは次のリポジトリにまとめてあります。併せて、参照してください。 GitHub - codegrid/css-testing 1. CSSが適切な書き方がされてい
Free-Style のススメ ~ CSS Modules は解決策ではない - Qiita
最初にまとめ: Free-Style とは CSS in JS の一種 https://github.com/blakeembrey/free-style CSS in JS の長所はそのままに スタイルをローカルスコープで定義可能 JS の仕組みによる依存性解決 (CommonJS, Require.js, ES modules) 使われていないスタイルの自動削除 (UglifyJS 等) スタイル-スタイル間、および JS-スタイル間の定数の共有が容易 JS による柔軟なスタイルの拡張・再利用が可能 CSS in JS が苦手としていた点を改善 style 属性に指定可能な内容に限らず、 CSS が提供するすべての機能を利用可能 疑似クラス 疑似要素 メディアクエリ 前置き: CSS in JS と CSS Modules 前置きの前置き この記事は、 の emoji でおなじみ (?
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
Reactと一緒に使う時のCSS in JSのライブラリ選定とか所感とか - Qiita
CSS in JSの基礎 原点はこちらのスライドがよく挙げられる。 いわゆる「CSSのあらゆる問題をJSで解決する」という感じのもの。 先行の記事としてはこのような感じ CSS in JS(Elm)したら想像以上に良かった Free-Style のススメ ~ CSS Modules は解決策ではない とりあえず今回はReactと一緒に使う前提のことを考える CSS in JS ライブラリの実装系統 CSS in JSライブラリもかなり色々あるが、だいたい下記の観点で分類できそうだった。 スタイルの再現に関する実装 <style>タグを生成して、<head>にinsertする実装パターン 昨今のスタンダードなライブラリの使っている手法 CSSの疑似要素や@media queryもだいたい使える InlineにCSSを展開する実装パターン わりと絶滅危惧種っぽい（開発止まっていたり） そもそも
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
プレビューで簡単！CSSアニメーションがブラウザ上で作れる「animista」
Webデザインを彩るCSSアニメーション。実装時にはデザインのイメージに合わせて、細かな調整を加えたり、なかなかに手間がかかる箇所でもあります。そんな手間がかかる調整工程を省ける、ブラウザ上でアニメーションが作れるツール「animista」を今回は紹介したいと思います。 ブラウザ上でプレビューしながら細かな動きを調整して、タグをコピペするだけでCSSアニメーションが実装できる便利なツールです。 詳しくは以下 拡大や縮小、スウィングなどの18種類ものアニメーションの雛形から、オプションで数値を変更してアニメーションを細かにカスタマイズすることができます。オプションではアニメーションのスピードだけでなく、ディレイや回転回数など、細かな場所まで弄ることが可能。面倒だった細かな調整作業を、ブラウザ上でプレビューを見ながらできるので、効率的に仕事をこなすことができます。スムーズなアニメーション実装で
早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita
これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や
Web界隈で最近気になるWebサービスとか集めてみた【2016年7月版】 - Brian'z Imagination
2016年もいよいよ下半期突入。 歳を取るごとに1年が過ぎるスピードがますます加速するように感じるけれど、全然悲観的じゃない。むしろ毎日新しくて新鮮なことが向こうからどんどん飛び込んできて、毎日エキサイティングだ。 そんなわけで、今回も先月に引き続き最近気になるWebサービスやアプリケーションなどを紹介していきたい。前回は海外サイトを中心に紹介したけれど、今回は海外編・国内編と2本立てで紹介していく。ほとんどのサービスは無料だけれど、とんでもなく便利なものも多いので、きっとあなたの役に立つはずだ。 ちなみに前回の6月版の記事はこちら。 海外編 Real Time Users Real Time Usersは、1分(60秒)以内にサイトを閲覧しているひとの数を表示するカウンターのjavascriptプラグインだ。CSSで表示部分をカスタマイズすることができる。数行のコードではてなブログにも設
UIセンスが壊滅的なエンジニアがそれっぽいwebアプリを作るために使った無料UIライブラリをまとめておく - Qiita
仕事の傍ら、暇つぶしとかでwebアプリを構築したりするわけですが、どうにもUIセンスがなさすぎて、カッコイイサイトとかを参考に真似したりしても、なぜか自分でアレンジするととてつもなくダサくなる、ということを繰り返してきました。 で、もうこうなったら自分で考えずに、すべてライブラリに頼ろう！と思ってwebサイトを構築した時に使ったcssやjsのフレームワーク、ライブラリなんかを、簡単なコメント添えてまとめておこうと思います。 css自分で一切書かなくても、このぐらいのUIまではいけそうです。 フレームワーク Bootstrap ベースはtwitter bootstrapの恩恵に授かります。 GoogleMaterialDesignLiteも見た目はかっこいいんですが、色々コンポーネントがたりなかったりして、結局いくらか自分でデザインしないとどうにもならなくなる印象です。 jQuery 今更書
良くあるメニュー・アイキャッチのアイコンに使えそうなFontAwesomeのまとめ
たくさんのWEBアイコンフォントが使えるFontAwesomeですが、種類が豊富故に『あのアイコン使いたいけど名前なんだっけ・・・』ということも増えてきました。 htmlコードと、擬似要素で使いたい場面もあると思うのでcontentで指定する文字コードもまとめていきます！ 5.0とは合わないようですが、検索のコツは同様に学ぶことができます。 FontAwesomeの使い方まとめようかと思いましたが、こちらのサイト様より丁寧にできる自信がありません！ 使い方については↓を！ http://h2ham.net/font-awasome おんなじWEBアイコンフォントはGenericonsを使っていたのですが、いまいち文字とのベースラインが合わないのが気になって、最近はAwesomeをよく使っています。 Genericonsについての記事はこちらをどうぞ！ Twenty Fourteenに標準装
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで作成する吹き出しとデザインのアイデア
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
harold-spm.com
Web制作の実装や勉強に役立つ便利なチートシートのまとめ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
