高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！
フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するためにCSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるためにCSSを利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則12個（英: 12 Principles of Animation）は、「生命を吹き込むイリュージョン: ディズニーアニメーション（英: The Illusio
2019年までに見直しておきたい
CSS・JavaScriptの手法 - Speaker Deck
Frontend Conference Fukuoka 2018で発表した資料です。 https://frontend-conf.fukuoka.jp/ 各リンク先を確認する場合は、以下のpdfを参照ください http://tonkotsuboy.github.io/slides/181204_frontend_fukuoka/181208_frontendconffukuoka.pdf はてなブックマーク http://b.hatena.ne.jp/entry/s/speakerdeck.com/tonkotsuboy_com/2019nian-madenijian-zhi-siteokitai-cssjavascriptfalseshou-fa ご意見やご感想はTwitter ( https://twitter.com/tonkotsuboy_com ) までお寄せください。 #fec
CSS3 のみで display: none からフェードインさせる - Qiita
CSS3 のみで display: none; の状態からからフェードインさせる方法を調べてみました。たとえば特定のクラスがついたときにフェードインさせるには下記のようにすればできました。 display の animation はできないので、下記のように 1% のキーフレームを追加して 表示かつ opacity: 0; としておくのがポイントです。 Gist 動作サンプル <!DOCTYPE html> <html> <head> <meta charst='utf-8'> <title>TEST</title> <script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <style> .box { background: #000000; display: none; h
複数のSassをwebpackでビルドして一つにまとめたい
複数のSassをwebpackでビルドして一つにまとめたいThu, 05 Apr 2018 12:08:22 GMTwebpack Sass Scss フロントエンドやってる人からしたら当たり前なのかもしれませんが、ちょっと詰まったので手順。なおwebpack4でやってます。 やりたいこと webpackを使ってSassをビルドする 対象のSassは複数あり一つにバンドルしたい webpack以外のビルドツールは使用しない という感じです。書くとややこしいのでbabelとかは今回は考慮しないものとします。また、webpack以外のビルドツールは使いません。Gulpとか。そんなに覚えられないですし。 ディレクトリ構成 こんな感じでやります。src配下の複数のscssをビルド&バンドルしてdist配下に出力します。
超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
Milligram - A minimalist CSS framework
Why it's awesomeMilligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy! Do you want to star it, tweet it, or share it with anyone? So do it! This means a lot to me ♥ Getting St
超高速エンジンの内部：Quantum CSS（別名Stylo）- 前編 | POSTD
Project Quantumのことをお聞きになったことがあるでしょう。これはFirefoxを高速化するために、Firefoxの中身を大幅に書き換えたものです。実験的なブラウザ、Servoから部分的に交換を実施し、エンジンの他の部分の著しい改善を図っています。 このプロジェクトは、飛行中のジェット機でのジェットエンジンの取り替えに例えられます。現場でコンポーネントごとに変更を実施するので、各コンポーネントの準備が整い次第、Firefoxで効果を確認することができます。 また、Servoから採用した最初の重要なコンポーネントは、Quantum CSSと呼ばれる新しいCSSエンジン（以前の別名はStylo）で、現在はNightly版でテストすることが可能です。(編注:Firefox 57からはデフォルトで有効化されています) about:config に行き、 layout.css.servo
CSS書きたくなさすぎ問題2017 - DRYな備忘録
css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui （追記）UIkit （追記）Semantic UI Pure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
【2016年冬】最新CSSフレームワークまとめ - Qiita
はじめに 以前、HTMLやCSS設計がよく分から無いというあなたへ。知ることから始める5つのTIPSという記事を書いたのですが、これは、僕が当初CSSの設計が凄く苦手で、苦手なりにも沢山書いていって少しわかるかな？と思ってきたときに備忘録も兼ねてまとめました。 なぜ苦手だったのかと振り返ると、その中で一番大きな要素が、構造間の依存関係を把握できていなかったことにあるのではないかなと思います。 この記事の中でも言うようにCSSの設計やもっと大きく言えばプロダクトの設計思想によって異なるとは思いますが、その依存関係を把握できていない原因はおそらくは何かしら取り入れているCSSのフレームワークの理解に乏しいことに原因があるのではと考えました。 そこで、多くの人に用いられているであろうCSSフレームワークを、2016年末時点でgithubのスター数が多かった順に５位までまとめてみました。ここで一般
かゆいところに手が届く！Flexboxを使った便利な小技
2017年9月14日 CSS 要素を横並びにする時に便利なFlexbox（フレックスボックス）。みなさん、使いこなせていますか？今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します！ ↑私が10年以上利用している会計ソフト！ 画像とテキストを互い違いに表示 See the Pen Flexbox – row-reverse tip by Mana (@manabox) on CodePen. まずは画像とテキストが入るボックスを作成。それらを囲む .box という div を用意しました。 HTML <div class="box"> <img src="images/iphone1.jpg" alt=""> <div class="box-text"> <h2>見出しが入ります</h2> <p>テキストが入ります</p> </div> </div>
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コンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS セレクタの使い方がまとめられたチートシート -CSS selectors cheatsheet
NES.css - NES-style CSS Framework
Purpose of installing Twitter Bootstrap through npm?
Renaissance - The freshest CSS framework
https://www.siimple.xyz/documentation/elements.html
Templates
2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ
