Bootstrap 5
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Bootstrap 5 has officially landed! After three alphas, three betas, and several months of hard work, we’re shipping the first stable release of our new major version. It’s been a wild ride made possible by our maintainers and the amazing community that uses and contrib
CSSアーキテクチャについて軽くまとめてみた - Qiita
概要 最近バックエンドからフロントエンドになり、「CSSアーキテクチャについてお勉強してみよう！」ということで、一旦代表的なものをまとめてみました。 CSSアーキテクチャとは cssの設計方法 命名規則やディレクトリ構成や色々ある 汎用性を持たせる設計をするために、誰がみても、途中で誰が入っても構成等がわかるように設計しようねという思想からきてるっぽい BEM コンセプト CSSセレクタの命名規則と言われている Block,Element,Modifierの略 Block:塊 ヘッダー、ナビゲーション、フッターなどのパーツ 独立してる Element:要素 検索ボタン、検索ボックスなどの部品 機能を持っている Modifier:装飾 部品の状態の色等の装飾 実例 命名規則 blockに対して、elementとmodifierをそれぞれ_(アンダースコア1つ)・__(アンダースコア2つ)・-
なんとなくで理解しないWebpackのCSS周辺 - Qiita
CSS in JSに夢を見たが、なかなか一筋縄では行かなかったので1、webpackにおけるCSSと本気で向き合ってみた。 しかしまだ理解が甘いところがあったのでloader, pluginまわりの関係性を整理した。 （前置き）webpackの基礎情報 css関連の本題にはいる前に、webpackの基礎を再確認する。 Webpackの特徴 webpackの特徴的な事項として、CSSや画像など、javascriptでないデータも基本的に全てをjavascriptで扱ってしまう、という事が挙げられる。 同等の対抗として挙げられるbrowserifyやrollupは、あくまでも「javascriptのmodule解決」にフォーカスしているのに対して、webpackは全く違う方向を向いている loaderとpluginの違い 結構あやふやに扱っていたが、上記のwebpackの基本部分を明確にして考
Budou: 日本語のための自動折り返し制御ツール
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
ネストを覚えた人のためのSassの便利な使い方
11. $baseColor: #AD253A; 変数を代入 body { background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
スマートフォンと画面解像度・ピクセル密度
320 dpi Androidの密度グループ iPhoneを当てはめると、iPhone 3までがmdpi、iPhone 4からはxhdpiに区分けされそうです。日本で流通しているAndroidスマートフォンの多くはhdpiに属するでしょうが、最近のHD解像度の端末はxhdpiに属しそうです。 IS05やXperia ray, INFOBAR A01/C01などはグループ上hdpiに属しています。しかし、画面サイズが小さいことからピクセル密度が300dpi前後と、xhdpiに近くなっています。小型で高解像度な端末が増えると、所属するグループだけでは画面の精細さを判断するのは難しくなるでしょう。 ピクセル密度の違いが見た目に影響する さて、ピクセル密度のばらつきによって、すこし困ったことが起こります。密度の低い環境に合わせて作られたコンテンツの見た目が、密度の高い環境で良く見えない可能性が出て
Blueprint: A CSS Framework | Spend your time innovating, not replicating
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing. What does Blueprint have to offer? A CSS reset that eliminates the discrepancies across browsers. A solid grid that can support the most complex of layouts.
Compassを使ってSassのCSS出力を手軽にしよう｜Blog｜Skyward Design
Compassを使ってSassのCSS出力を手軽にしよう Posted by Hideki at 2011年12月 8日 21:36 タグ： CSS効率化 Sassを使っていて1つ面倒なことと言えば、CSSを生成するのに必要なコマンドではないでしょうか。 sass -t expanded _scss:shared/css --watch 長い...。プロジェクトでCSSの設計を始めるたびにこれだけ入力するのは大変です。 そこで登場するのが「Compass」です。CSS3のmixinなどが含まれた強力なフレームワークなのですが、次のコマンドを打つだけでCSSの出力ができる機能も持っています。 compass watch 簡単ですよね。いつでもどのプロジェクトでも「compass watch」ですから。 ※1度だけCSSを出力する「compass compile」もあります。 インストール方法
たいぷらいたーざっき。(2011-08-26)
_ [Rails][Web][デザイン] Compass - CSSオーサリングフレームワーク。 CSSがとっても楽に書けるSassに、便利そうなものをたくさん詰め込んだ、そんなCSSオーサリングフレームワークがCompass。（らしい） Compass Home | Compass Documentation Railsアプリに放り込む Install the Compass Stylesheet Authoring Framework | Compass Documentation /lib/example_app$ gem install compass /lib/example_app$ compass init rails . こうするとささっと入る。「Gemfileにこう書いてね」とか「layouts/application.html.erbの stylesheet_link_
howtohp.com - howtohp リソースおよび情報
This domain is registered at NameSilo. If you are the owner, start administering it at NameSilo.com. If this is not your domain, find similar names that work for you. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちゃんとCSSを書くために - CSS/Sass設計の話
CSSだけで幅を超えた文字列を...で省略する - Qiita
HTML5 Boilerplate 4:改善されたApache設定、IR技法、MITライセンスの使用
GitHub - vwall/compass-twitter-bootstrap: The twitter bootstrap ported to compass
IDEA * IDEA
