[B! CSS][css] tatsu_toraのブックマーク

Rails 7: importmap-rails + tailwindcss-railsでnode.jsが不要な理由｜TechRacho by BPS株式会社

2022.02.17 Rails 7: importmap-rails + tailwind css-railsでnode.jsが不要な理由 Rails 7 : rails newのフロントエンド関連オプションの組み合わせを調べてみた上の記事に書いたように、Rails 7でimportmap-railsを使う場合、node.jsは不要になり、node_modules/ディレクトリも作成されません。 # デフォルトでimportmap-railsがインストールされる $ rails new . ちょっと不思議だったのは、importmap-railsとtailwind css-railsを組み合わせた場合にもnode.jsが不要なことです。なお、このセットアップではconfig/importmap.rbにtailwindのエントリは入らず、app/assets/builds/の下にtailwi

tatsu_tora 2022/02/21

rails
css

リンク

2021年版！おすすめのCSSフレームワーク総まとめ。特徴や比較も！ | Web Design Trends

CSSのコード記述量を減らして、効率的にスピード感を持ってWeb制作を行う助けとなるのがCSSフレームワークです。現在公開されているCSSフレームワークの種類は非常に多く、それぞれの特徴や目的なども様々で、自分に合ったCSSフレームワークを見つけるのも大変です。今回は、2021年現在でおすすめのCSSフレームワークをCSSフレームワークのランキングを元にご紹介していきます。それぞれの特徴や違いを理解して、目的に合わせたCSSフレームワーク選びに役立てていただければと思います。 CSSフレームワークとは CSSフレームワークとは、ボタンやフォーム、レイアウトなどWebページの実装に必要なコンポーネントや機能が詰まったライブラリのようなものです。短期間でWebサイトを実装したい場合や、デザイナー不在のチームがWebサービスを作る場合など、CSSフレームワークを利用することによってデザイン

tatsu_tora 2021/08/16

リンク

Tailwind CSSが私には合わなかった理由

ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得

tatsu_tora 2021/08/10

css

リンク

もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends

CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法などがありますが、細かい所を自動で調整してくれたり、簡単にレイアウトを作成することができるというFlexboxの特徴から使用される頻度が高いです。慣れてしまえば扱いやすいFlexboxですが、使い方に慣れるまで少し苦労することも多いですね。そこで、今回はCSS Flexboxの使い方を分かりやすくご紹介していきたいと思います。 2021年版：Flexboxの対応ブラウザとベンダープレフィックスまとめ CSS FlexboxはCSSでレイアウトを組む時に使われる主要な手法の1つです。しかし、比較的新しいレイアウト法なので、一部のバージョンが古いブラウザでは正しく表示されないという課題も抱え

tatsu_tora 2020/11/20

css
Flexbox

リンク

Slant - 53 Best CSS framework as of 2024

A CSS framework is a set concepts and practices that deals with common tasks when writing CSS. A CSS framework speeds up the mock-up and development processes, makes sure code displays consistently across all browsers, helps keep code tidy, provides solutions to common CSS issues and can even teach good practices. The best CSS frameworks have great documentation and community resources available t

tatsu_tora 2018/11/13

リンク

マテリアルデザインをサクッと実装できるCSSフレームワーク6選【2017年版】

グーグルが自社のデザインにマテリアルデザイン（Material Design）を導入したのは2014年のことです。以来、Gmail、Docs（Googleドキュメント）、Drive（Googleドライブ）など、マテリアルデザインは多くのグーグル製品に実装されました。マテリアルデザインはAndroidネイティブアプリケーションにも、モダンWebアプリケーションにも見受けられ、人気はますます高まっています。最新のデザイントレンドを追いかけるWeb開発者なら、マテリアルデザインも選択肢に入るでしょう。そこで、マテリアルデザインのCSSフレームワークと機能を紹介します。プロジェクトに合うフレームワークを見つける助けになれば幸いです。すばらしいWebエクスペリエンスの実現のため、助けてくれるパートナーを見つけてください。フレームワークの人気度や利用できる機能の詳細は変わる場合があります。フレーム

tatsu_tora 2018/07/30

リンク

フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル背景と境界書字方向の操作内容のはみ出し CSS の値と単位 CSS における大きさの指定画像、メディア、フォームの要素表のスタイル付け CSS のデバッグ CSS の整理評価課題: CSS の基本的な理解度評価課題: 素敵なレターヘッドの便箋の作成評価課題: かっこいいボック

tatsu_tora 2018/07/17

css
flexbox

リンク

★★【保存版】Font Awesomeの使い方まとめ：Webアイコンフォントを使おう

今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。

tatsu_tora 2018/03/23

リンク

dresscording.com

dresscording.com 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

tatsu_tora 2017/02/26

リンク

Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた！ - paiza times

どうも、まさとらん（@0310lan）です。みなさんは、「CSSフレームワーク」を活用しているでしょうか？いきなりフレームワークと聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は誰でも利用できるようにシンプルな設計で公開されているモノが増えています。そこで今回は、多機能でありながらも学習コストが低い「CSSフレームワーク」を厳選し、レスポンシブ対応でモバイルに優しいものをいくつかご紹介しようと思います！ ■CSSだけで多彩なサイトを構築できるフレームワーク！【 Picnic CSS 】 Web制作に必要なコンテンツを、とにかく簡単な手順で手っ取り早く構築できるように設計されているのが「Picnic CSS」です！特に、Flexboxを活用した非常に柔軟なグリッドレイアウトや、JavaScript不要でインタラクティブな要素を構築できる機能などはとても便利だと思

tatsu_tora 2016/12/20

css

リンク

購入ボタンを押すと美しく梱包してくれる見て楽しい触って気持ちいい購入ボタンの実装

面白いなーと思いまして。購入ボタンをクリックするとまるでそれを包装してくれるかのようにアニメーションして、購入につなげるアクションです。特にこのサンプルで表示されているのはギフトカードの購入なので、まさにギフトカードを包み込むようにアニメーションするのが気持ちいですね。以下サンプルでBuyをクリック！ See the Pen Gift Card UI by David Khourshid (@davidkpiano) on CodePen. HTMLと、SCSSのみ。JavaScriptはつかっていませんので、非常にシンプルな構造になっています。是非お試しあれ。それでは、また。

tatsu_tora 2015/08/05

CSS

リンク

コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。コーディングをしていて、クラス名に迷うことってありませんか？ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ

tatsu_tora 2015/06/18

css
HTML

リンク

2015年も注目したいCSSフレームワーク6選 | エバーセンス開発ブログ

”CSSフレームワーク”といえば「Bootstrap」が有名ですが、Bootstrap以外にも多くのフレームワークがあります。特にGoogleのMaterial Designなども台頭してきたこともあり、今後はBootstrapにとどまらず、目的に合わせてフレームワークを使い分けながらデザインをしていく事が求められそうです。そんな訳で、Bootstrapを代表としたCSSフレームワーク6選！を紹介したいと思います。 ENTRY NO:1 / Bootstrap http://getbootstrap.com/ 最早フレームワークの代名詞となったBootstrap。 twitter社が開発してフレームワークで、ver2からレスポンシブWEBデザインに対応した事が切っ掛けで一気に普及したようです。 CSSフレームワークの中では、最も多くの企業やサイトで採用されているので、そのUIを