目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ

だれもがスマホからウェブサイトを閲覧するようにになったいま、あらゆる端末からでも見やすいサイトづくりが当たり前になっています。 この時に必要になるのが、レスポンシブWebサイトの制作です。 しかし、デスクトップやタブレット、スマホ用のレイアウトを個別に調整するとなると、「Web制作に時間がかかってしまう」と悩んでしまうひとも多いかもしれません。 あらかじめデザインやレイアウトが施されたテンプレートを利用することで、Webサイト制作を効率的に進めることができます。 今回は、商用利用できて無料ダウンロードできるHTML・Figmaテンプレートを公開しているTemplates Jungleをご紹介します。 ライセンスについて 素材を公開しているTemplates Jungleでは、HTMLとFigma用でライセンスが異なるため、注意が必要です。 HTMLテンプレートは、フッターに表示してあるクレ

Making the web more beautiful, fast, and open through great typography

デザイナーのスギヤマです。 日々の仕事の中で、数多のデザイン系サービスにお世話になっています。今回は、その中でも何度も何度も何度も何度も使用している推しサービス（全て無料で使用可能）について、厳選に厳選を重ねてみました。 こちらのサービスの存在がなければ、きっと私の仕事は今の数倍の時間を必要としていたでしょう。ありがとうございます。ありがとうございます。 何年も使い続けている無料デザイン系サービス10選 FLAT COLORS フラットカラー https://flatuicolors.com/ 中でも　https://flatuicolors.com/palette/defo　を特に推します。 さまざまなカラーチャートサイトをジプシーしては結局ここに戻ってきてしまう。本当に使いやすい。シンプルにして最強のカラーシステムサイト。 最初期のデザインカンプを作る時には、まずここでの色を使っておけ

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

リニューアルした SmartHR ロゴの作り方 - SmartHR Tech Blog

LayoutIt! helps you make your frontend coding easier without needing to be an expert in JavaScript, HTML5 or CSS3 Bootstrap Builder Drag-and-drop the same Bootstrap components to your own design. Easy to integrate with any programming language, you just download the HTML and start coding the design into it. Grid Generator Start creating your own CSS Grid Layouts simply and easily with this magic t

Open source icons. Lovingly hand-crafted.Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG. Completely open source, MIT licensed and built by Ionic.

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ

そういえば昨日「ピクシブ株式会社」って言おうとして3回くらい噛んだ気がする— プリントゴッコ (@moznion) 2014, 7月 5 ページャNight，僕が当初想定していたよりも1000倍位有益な会になって本当に嬉しかったです．あとで記事等書きます．— プリントゴッコ (@moznion) 2014, 7月 5 録画したustの様子はこちら http://www.ustream.tv/recorded/49544381 ページャNight <[1]> on Zusaarというイベントを開催致しました． 実に冗談みたいな理由から興ったイベントでしたが，ページャ (ページネーション) というWebサービスの1コンポーネントに焦点を絞った非常に濃厚かつ興味深いトークの数々を聞くことができて，非常に良い勉強会になったと思います． 以下，発表の一覧です． 15分トーク @mizchiさん お前

作成：2014/05/7 更新：2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全

同人音楽CD特設サイトを一瞬で作ろう Tokusetsu 2は、同人音楽CDの特設サイトが簡単に作れる無料Tumblrテンプレート（テーマ）です。 HTMLの知識を必要とせず、フォームに情報を入力していくだけで特設サイトが作れます。 一瞬で完成 Tokusetsu 2 は、最速で特設サイトを作る方法です。あなたは画像を2種類用意するだけ。あとはフォームに必要な情報を入力していけば、あっという間に同人音楽CD特設サイトが作れます。 新しいデザイン Tokusetsu 1で好評だった「特設サイトが一瞬で作れる」コンセプトはそのままに、 完全に新しいデザインに作り直しました。同人音楽で活動しているみなさまのために設計した Tumblr テーマです。

Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件