styled-componentsを使ったCSS設計 - Qiita
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
CSS Frameworkを持つ - ゆーすけべー日記
例えば、Webサービスのフロントエンドのコードを書き始める時にまず何をするでしょうか？ デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。 少なくとも僕はそうですね。 理論的にはHTMLだけでもWebサービスを作ることはもちろんできますが、 見た目を少しでも調整したいとなるとCSSが必要になります。 例えばCSSを使わないHTMLの場合、いくら単純なレイアウトだとしても、 デフォルトのリンクの色を変えたかったり、フォントを変更したかったり、 要素ごとの余白をどうにかしかったりと最低限の要望が出てきます。 こうした最低限のCSSに対するニーズは共通化して自分なりのCSS Frameworkとして持っておくとよいと思います。 近頃、一からCSSを記述しなくなったのもこうした考え方のおかげです。 今Web上で配布されて利用可能なCSS Framworkが非常に増えて
WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～
第6回 岡山WEBクリエイターズのセッション1で発表したスライド内容を全文掲載。第6回 岡山WEBクリエイターズ セッション1『WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～』 岡山WEBクリエイターズ勉強会でお話した内容を、スライドとともに全文掲載しています。 テキストはあくまで原稿そのままですので、実際に喋った内容とは幾分異なる場合があります。 スライドのPDFをダウンロード 講師概要 SKPRODUCT代表。 デザイン、コーディング、PHPによるシステム構築、ActionScriptを使用したFlashなど、WEB制作全般を行うWEBアーキテクトです。 岡山の大手企業・学校などを中心にWEBサイトと独自に開発したCMSフレームワーク『SEED』の提供を行っています。 本日は、WEB標準デザインはじめの一歩です。 WEB標準というと、技術的なことを想像される方
美しいフォームデザインを実装する事が可能なjQueryプラグイン・Ideal Forms
チェックボックスやラジオボタンなど、フォーム周り のデザインを美しくする事が出来るjQueryプラグ イン・Ideal Formsのご紹介。スタイルもいくつか 用意されており、フレームワークとして使えるよう です。デザインテーマもいくつか用意されている ので好みで選ぶことも出来ますね。 ボタン、セレクト、ラジオボタンやチェックボックス等のフォームデザインを変更できます。デザイの変更はcssのみで可能なフレームワークタイプなのでノンプログラマーな方でも気軽に使えそうですね。IE6以外は対応しているようです。 フォームのデザインをガラッと変えることが出来ます。よりデザインに統一感を出せそうですね。 テーマも用意されている Ideal Formsはフレームワークとしても利用出来るように、cssでデザインが変更できる作りになっています。現在は3つのcssファイルがテーマとして用意されていますのでそ
CSSフレームワーク『BlueTrip』が想像以上にすごい - present
CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね！ さっそく、CSS フレームワークを導入してみます。 BlueTrip を導入 CSS フレームワークはいろいろありますが、今回は先の記事で紹介されていた BlueTrip を導入してみます。 次のページからアーカイブをダウンロードし、解凍して css ファイルと画像を static フォルダに配置。 BlueTrip CSS Framework | A beautiful and full-featured CSS framework HTML の head 部に、下記を追加。 <link rel="stylesheet" href="css/screen.c
2010年、押さえておきたいウェブデザインのトレンド
CSS3やHTML5などをはじめ、トレンドのフォント、見出しのデザイン、クオリティをアップする背景など2010年に押さえておきたいウェブデザインのトレンドをWeb Designer Wallから紹介します。 Design Trends (Predictions) in 2010 下記は、各ポイントを意訳したものです。 元記事では、サンプルも豊富に掲載されています。 はじめに 1. セリフフォント 2. 大きい見出し 3. 埋め込みフォント 4. 繊細なテクスチャ 5. ミニマリストとグリッド 6. CSS3 7. モバイル対応 はじめに 2010年はウェブデザインが今まで以上に刺激的で試行錯誤に満ちたものになるかもしれません。 HTML5、そしてCSS3の魅力的な新機能をデザイナーとデベロッパーが巧みに取り入れようとしています。 去年からのトレンドだと、現在は手描き風や大きい背景は少なくな
サイトのレイアウト時に役立ちそうなレイアウトパターン集「12 Standard Screen Patterns」:phpspot開発日誌
12 Standard Screen Patterns サイトのレイアウト時に役立ちそうなレイアウトパターン集「12 Standard Screen Patterns」 次のような感じで、状況に応じた適切なレイアウトパターンのサンプルイメージと、実装例サイトを紹介しています。 例えば、その１の、Master/Detail というパターンであれば、左、あるいは上部にナビゲーションを置いて、右あるいは下にコンテンツを表示するパターンです。 具体例でいけば、iTunesやWindowsのエクスプローラーが同じようなＵＩですね、というサンプル例が多数紹介されています。 他にも12のパターンが紹介されていて、ＵＩに迷った時はこれを参考にすると糸口が見つかりそうな気がします。 関連エントリ HTMLで雑誌のような美しい段組みレイアウトを軽く実現できるjQueryプラグイン 複雑なCSSレイアウトもサク
段組みを実現するCSSレイアウトをオープンソースで·Typogridphy MOONGIFT
プログラマーやSEの方々はWebデザインが苦手だ。私自身、色々勉強はしつつもどうにも好きにはなれない。そのため、極力テンプレート的なものを使って作業するようにしている。デザインを後回しにすると、システムがある程度できた時にはじめることになり、折角乗っている気分を台無しにする恐れがある。 CSSで段組みを実現 最近の流行は960px幅のWebサイトらしい。その大きさに基づいて、印刷レベルでも耐えうるというのがTypogridphyだ。 TypogridphyはCSSテンプレートをオープンソースで公開している（ライセンスは明記されていなかったのでご注意いただきたい）。XHTMLに準拠し、ValidなCSSとなっている。 TypogridphyはPHPファイルと一緒に提供されているが、プログラミングコード部分がないのでHTMLと変わらないようだ。960pxと書かれているが、デモ用のHTMLファイ
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
![[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
Lucky bag::blog: CSS で画像ポップアップ
JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。 popup.html 最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。 .photo a.popup:hover { background-color: #fff; } 何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。 あの頃のように… - CSS で画像ポップアップさせる (2005年6月10日 19:02) CSS で画像ポップアップ私の中ではかなりの革命です。なぜ今までこれに気が付かな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Start Bootstrap
Open Web Design - Download Free Web Design Templates
[CSS]CSS3で何ができるの？ という時にみておきたいサイト集
IDEA * IDEA