ユーティリティーファーストとTailwind CSSのススメ - Qiita
Tailwind CSSは結構いいんでないの？というポエムです ユーティリティーファーストって考え方について まず、 ユーティリティークラスが何かということ ユーティリティークラスを使ってHTMLを書いていくということってどういうことか これは、ある程度CSSを書いている人であれば想像できることであろうと思う。 こんな風に、あらかじめユーティリティー的なクラスを用意しーの .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-a
CSS Grid Layout を極める！（基礎編） - Qiita
0. はじめに CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。 例えば、こんな簡単なHTMLで・・・ <body> <h1>タイトル</h1> <article>記事1</article> <article>記事2</article> <article>記事3</article> <article>記事4</article> <nav>ナビ</nav> <footer>フッター</footer> </body> CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS
PostCSS まとめ - Qiita
僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
Smashing Magazineのパフォーマンス改善ケースが凄まじい件 - MOL
Frontrend Advent Calendar 2014 - Qiitaの24日目。たぶん。知らんけど。 ちょっと前になるが12/13にバンクーバーで開催されたThe Style & Class Conference 2014に参加してきた。前日にSmashing Conferenceが、ウィスラーというバンクーバーから比較的近い所で開催されていて、本当はそっちに行きたかったんだけど高額なため、地元コミュニティのほうにだけ参加した。ウィスラーの方の記事は@ygoto3が書いてたっぽい。 Smashing Conferenceで登壇していたJohn Allsopp氏やVal Head氏もこのカンファレンスで登壇するということで、『なんだ、ウィスラーのついでかよー』と思い全然期待してなかったのだが、行ってみたらカンファレンス全体の構成などすごく考えられていて、とても素晴らしいカンファレンス
HTMLやCSSを知らなくても簡単にWebサイトが作成できるMac用Webエディタ「Blocs」がリリース。
Mac App Storeには現在申請中だそうですが、NormさんのWebサイト”Ui Store“では既に$49.99で販売が始まっており、トライアル版もダウンロード可能です。 使い方 使い方は非常に単純で、ユーザーはページを作成し、決められたBlocを編集していくだけです。まず、Blocを追加し、 次にBlocのスタイルを選択します。BlocはBricという要素に分かれており、各Bricは画像や動画、テキスト、リンク、見出し、フォーラム、ミュージックなどに変更可能です。 また、Bric要素の編集はサイドメニューから行います。 Bricの編集が終わったら、新たにページを増やすために右上の[+]ボタンか、メニューバーの [Page] > [New] からページを追加します。流れはメニューバーにある順番[File] > [Page] > [Bloc] > [Bric] で行えばわかりやすいと
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
uncss: Find Unused CSS
You know what's better than adding features to a website or app, from a code perspective? Removing stuff you don't need. Whether it be code, images, or dependencies, getting rid of the crap stale code is like the first sip of a big glass of wine after a long day of stressful work. Running a directory of images through ImageOptim is a euphoric experience, am I right? What if there was a tool, h
Grid 日本語版
なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。 断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。 モバイルファースト 最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
[CSS]スタイルシートを自動でIE6対応にするオンラインサービス -ie6fixer
手元のスタイルシートをフロートやネガティブマージンなどIE6のバグを回避する記述を自動生成するオンラインサービス「ie6fixer」を紹介します。 ie6fixer IE6に対応したスタイルシートを生成する方法は、以下の手順です。 「master stylesheet」の欄に、スタイルシートを入力。 「Give me my ie6 fixes」ボタンをクリック。 以上で、IE6のバグに対応したスタイルシートが生成。 IE6のバグに対応している箇所は、現在のところ下記の通りです。 「min-height」は、「height」に変更。 「float」は、「display:inline;」を追加。 「position:relative;」は、「zoom:1;」を追加。 ネガティブマージンは、「position:relative; zoom:1;」を追加。 「overflow:hidden;」は、
CSSStickyFooterに学ぶCSSでフッターを最下部に固定するテクニック - F.Ko-Jiの「一秒後は未来」
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 | CREAMUで紹介されていたNew CSS Sticky Footer – 2009がなかなか便利そうだったので、どんなテクニックを用いているのか調べてみました。 HTMLタグはたとえば次のような構造です。 ↑ #mainを#wrapで包み、#wrapと#footerが同階層にあります。 これにCSSを適用すると、次のようなレイアウトになるようです。 ↑ #mainの下部にpaddingをフッターの高さと同じだけ確保し、同じ値で#footerの上部にネガティブマージンをとっているようです。 ページの最下部にフッターを固定する方法はいくつかあると思いますし、自分でも試行錯誤してやっていますが、一つ便利な方法を知っておくと役立つかと思います。 clearfixなど、完全なCSSとサンプルはNew CSS Stic
HTMLにCSSとJavaScriptを含めない方がいい理由 | エンタープライズ | マイコミジャーナル
Robert's talk - Web development and Internet trends Webサイトを構築するにあたってHTMLとCSS、JavaScriptの3者を完全にファイル分離するべきだという方法論が紹介されるケースが増えている。最近話題に上がったトピックに絞っても次のトピックが類似した内容を紹介している。紹介している内容や対象、視点に違いはあるが、どれもHTML、CSS、JavaScriptは分離してインラインで記述しない方がいいと説明している。 Unobtrusive DOM Scripting 累進的拡張 Obtrusive JavaScript Checker HTMLを綺麗に保つ12の原則 Obtrusive JavaScript Checkerの開発者でもあるRobert Nyman氏が自身のブログにおいてWhy inline CSS and JavaS
| ＾＾ |秒刊SUNDAY | ずばり！イケてるWEBデザインを集めたまとめ16サイト。
2008年06月10日 ずばり！イケてるWEBデザインを集めたまとめ16サイト。 日本では、いけてるサイト ドットコムや、デザインリンクデータベースなどが有名ですが、海外に行けばもっとイケているサイトは沢山あります。デザインも海外テイストなものから、オールワールドで通用するものまで、参考になるものがありますのでどうぞ。 ◆SF art & design portal 色をピックアップして選ぶ事が出来るサイト ■SF art & design portal ◆CSS Divine 色で探せるデザインサイト ■CSS Divine Website Showcase Gallery ◆The Best Designs XHTMLとFLASHなサイトをキーワードで。 ■The Best Designs ◆CSS Remix Web2.0系ではないサイト集。 ■CSS Remix ◆CSS Mani
画像のHTTPリクエストをCSSを使って軽減する"CSS Sprite Generator" | エンタープライズ | マイコミジャーナル
Ed Eliot氏およびStuart Colville氏は9月28日(ドイツ時間)、Webページにおける画像の読み込みオーバーロードを軽減するためのおもしろい取り組みをWebサービス「CSS Sprite Generator」として公開した。ページを読み込む場合、画像を要求するHTTPリクエストが発行されるわけだが、「CSS Sprite Generator」はその要求数を低減させようとするものだ。 ページが画像を多く含んでいる場合、画像を取得するためのHTTPリクエストが大量にWebブラウザから発行されやすくなる。このHTTPリクエストを軽減するために、ページで使われている画像をひとつの大きな画像にマージしてしまい、かわりにCSSの機能を使ってマージされた画像から必要な部分だけを表示しようというのがCSS Sprite Generatorでの発想だ。 CSS Sprite Generat
ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexbox Cheat Site
styled-component + CSS Grid - Speaker Deck
Bootstrap3日本語リファレンス
Brackets - Web デザインを認識する最新のオープンソースコードエディター
