タグ Bootstrap
人気順 5 users 50 users 100 users 500 users 1000 userspuppeteerでbootstrap導入時の影響調査をやってみた! - Hajimari Tech Blog| 株式会社Hajimari
こんにちは! 6月から23卒内定者インターン生として株式会社Hajimariに入社した、江端 凌です。 普段は、TUKURÜS事業部で受託開発の業務に携わっています。 今回は受託開発している既存サイトに、bootstrapを導入することになったので、どのような影響が出るのかを調査することになりました。 背景としては、既存サイト... 続きを読む
デザインに適したアイコンがこれで見つかる! UIデザイン用のさまざまなアイコン素材をまとめて比較・カスタマイズ・ダウンロードできる -Iconer
Bootstrap, Material Designのアイコンをはじめ、Feather, heroicons, tabler iconsなど、人気が高いUIデザイン用のアイコン素材をまとめてカスタマイズ・ダウンロードでき...記事の続きを読む 続きを読む
【React】daisyUIを触ってみた!かなり楽しいw
daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこ... 続きを読む
CSSでフォームの実装に悩んだら! さまざまなフレームワークで実装されたフォームのライブラリ -HeroTofu
Tailwind CSSやBootstrapやBulmaなど、CSSのさまざまなフレームワークで実装されたフォームのライブラリを紹介します。 それぞれのフレームワークを利用している時はもちろん、フレームワークの比較検討にも役立ちます。 HTML Forms Library HTML Forms Libraryとは HTML Forms Libraryの使い方 HTML Forms Libraryとは ... 続きを読む
Vue.jsで再利用可能なタブのUIコンポーネントを実装する方法を解説
タブは、Webサイトやスマホアプリでよく使用されるUIコンポーネントです。TailwindCSSやBootstrapなどのライブラリにも必ずありますが、再利用可能な柔軟性のあるものではありません。 スタイルを簡単にカスタマイズできる再利用可能なタブコンポーネントをVue.jsで実装する方法を紹介します。 How to Build a Tab Compo... 続きを読む
jQuery依存を脱した「Bootstrap 5」正式リリース、IEもついにサポート対象外に。右からの横書き「RTL」など新機能 - Publickey
jQuery依存を脱した「Bootstrap 5」正式リリース、IEもついにサポート対象外に。右からの横書き「RTL」など新機能 複雑なHTMLやCSSを記述しなくとも、簡単にWebページをデザインできるフレームワーク「Bootstrap」の最新版、「Bootstrap 5」正式版がリリースされました。 One more time, we're gonna celebrate—Bootstra... 続きを読む
地味に便利!さまざまなプロジェクトに適したHTMLのテンプレートを簡単に生成できる -HTML Boilerplates | コリス
普通に使えるシンプルなHTMLのテンプレートをはじめ、jQueryを使用するHTMLのテンプレート、Bootstrapを使用するHTMLのテンプレート、ソーシャルメディア用のタグを記述したHTMLのテンプレート、クッキー...記事の続きを読む 続きを読む
CSSファイルを読み込むだけ!クラスなしCSSフレームワークいろいろ | Webクリエイターボックス
2020年5月11日 CSS, Webサイト制作 BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読... 続きを読む
Bootstrap 5の新しいアイコンとFont Awesomeアイコンのそれぞれの使い方と使いやすさを比較 | コリス
WebサイトやスマホアプリのUIでアイコンを使用する際に候補になるのが、アイコンのライブラリです。中でも無料で利用できるFont Awesome(有料版もあり)の人気が高いです。 Bootstrap 5用に最近リリースされたSVGアイコンとFont Awesomeアイコンの使い方と使いやすさを比較した記事を紹介します。 Bootstrap 5 icons vs... 続きを読む
CSSファイルから未使用のスタイルを削除する4つの方法 | コリス
CSSの未使用のスタイルを削除するツールPurgeCSS、PurifyCSS、UnCSSの使い方、また、Chrome デベロッパーツールで手動で削除する方法を紹介します。 BootstrapやTailwind CSSなど、CSSのフレームワークを使用する際、すべてのスタイルを使用することはほとんどありません。また、再利用可能なUIコンポーネントを使用する... 続きを読む
CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..) - Qiita
CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..) いま開発している積読用の読書管理アプリでは、CSSフレームワークにBlumaを使ってる。 昔は、VuetifyやBootstrapを使っていたけど、ブレイクポイントが違っているのでまとめてみた(´ω`) ブレイクポイントのまとめ xs sm md lg... 続きを読む
Bootstrap ナビゲーションバーのカスタマイズ方法といろいろなデザインの実装例 | コリス
Bootstrap 4のナビゲーションバーのカラーを変更したり、アイテムを整列させたり、レスポンシブのブレークポイントを変更するなどのカスタマイズ方法、ナビゲーションバーのいろいろなデザインの実装例を紹介します。 Bootstrap Navbar Guide and Free Navigation Examples by Nataly Birch 下記は各ポイントを意訳した... 続きを読む
Vue.jsベースのオープンソースな管理画面テンプレート・「Vuestic Admin」 | かちびと.net
Vuestic Admin Vuestic AdminはVue.jsベースのオープンソースな管理画面テンプレートです。40以上のUIコンポーネントも同梱されています。 レイアウトはBootstrapが導入されており、レスポンシブ対応となっています。管理画面系のコンテンツによく必要とされるコンポーネントは概ね揃えられているので、1から作るよりは... 続きを読む
Bootstrap の開発メンバーになった話 - Qiita
先日、Bootstrap の作者 (@mdo) からチームに加わらないかとお誘いのメールがあり、喜んで受け入れて、Bootstrap のチームメンバーになりました。 ↑ Organizations の所に Bootstrap のアイコンが表示されるようになりました。 どういう経緯でチームメンバーになったのかを書いてみたいと思います。 はじめての Issue 報... 続きを読む
CSS フレームワークを使いたくない - ジンジャー研究室
CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今... 続きを読む
Web Technologies of the Year 2018
Web Technologies of the Year 2018Posted by Matthias Gelbmann on 2 January 2019 in News, AddToAny, Advertising Networks, Amazon CloudFront, AppNexus, Bootstrap, CDNJS, CloudFlare, Content Delivery, Content Management, Endurance Group, Fastly, GoDaddy Group, Google, Google Ads, Google Analytics, Go... 続きを読む
2018年おすすめのCSSリセット!「Reboot.css」の特徴と使い方を解説 | コリス
Bootstrapは既に多くの人が知っていると思います。 では、Bootstrapで採用されているCSSのリセットは知っていますか? Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」の特徴と使い方を紹介します。 A Look at Bootstrap 4's New Reset: Reboo... 続きを読む
Bootstrapなどのフレームワークは使用せずに、Webサイトを実装した際に学んだCSSの4つのテクニック | コリス
新しいプロジェクトをゼロから始めることは、どれくらい経験豊かであっても、新しいことが学べる素晴らしいチャンスです。Bootstrapなどの完成されたフレームワークは使用せずに、Webサイトを実装した際に学んだCSSのテクニックを紹介します。 4 CSS tricks I've learnt the hard way 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセ... 続きを読む
びっくりするほど簡単!HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール | コリス
さくっと短時間で、慣れれば1分! デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala ... 続きを読む
商用利用無料、Bootstrap 4をそのまま簡単に使用できるWordPressのテーマファイル -UnderStrap | コリス
Bootstrap 4もWordPressも非常に人気があるツールです。 その二つが合体したWordPressのテーマファイルを紹介します。 Bootstrap 4のレイアウトやコンポーネントをそのまま利用してもよし、それらをベースに独自のテーマを構築することもできます。 続きを読む
最新版で学ぶwebpack 4入門 - Bootstrapをバンドルする方法 - ICS MEDIA
モジュールバンドラーwebpack(ウェブパック)の人気は飛ぶ鳥を落とす勢いで、 フロントエンドエンジニア必須のツールとなりつつあります 。タスクランナーGulpで対応していたことの多くはwebpackで置き換えが可能。JavaScriptエンジニアだけでなく、 CSSコーダーにも利用が拡大しているのではないでしょうか? 前回の記事「 webpackにスタイルシートを取り込む方法 」ではCSS・S... 続きを読む
商用利用無料!Material Designが簡単に実装できる、Bootstrap 4をベースにした新作テンプレートのまとめ | コリス
Material Designを使用してみたいけど、時間がない、手間をかけたくない、という人にぴったりな、Material Designが採用された商用でも個人でも無料で利用できるBootstrap 4ベースの新作テンプレートを紹介します。 企業向けサイト、プロダクトのランディングページ、ポートフォリオやギャラリー、ブログ用のテンプレートが揃っています。 Material Design for B... 続きを読む
BootstrapベースのシンプルなUIのオープンソース管理画面テンプレート・「tabler」 | かちびと.net
tabler tablerはBootstrap 4ベースのシンプルなUIの管理画面テンプレートです。多くの場合は左カラムにメニューを配置するケースが多かった気がしますが、こちらは上部に配置されていますので操作性よりは視認性に優れている印象でした。システム全体はモジュール式となっているので必要なコンポーネントを追加する形を取れるため、軽量化しやすく設計されています。また、CSSで出来る部分はCSSで... 続きを読む
Bootstrap 4で実装されているデザインシステム要素すべてをデザイン素材にした無料素材 -Bootstrap Design System | コリス
Bootstrap 4で実装されているデザインシステム要素すべてをデザイン素材としてスケーラブルに再現したSketch用の無料素材を紹介します。 すべての要素はBootstrapで使用されている名前が適切に付けられている ...記事の続きを読む 続きを読む
BootLeaf - Bootstrap/Leafletを使った地図テンプレート MOONGIFT
地図とWebは相性が良いです。移動中に地図を見たいと思うことは多いですし、旅行や出張前に計画を立てる上でも地図が必要です。それもあり、Googleマップをマッシュアップする地図サービスは無数に存在します。 今回紹介するBootLeafはそんな地図マッシュアップのベースになるようなソフトウェアです。様々な情報を地図に載せやすくなっています。 BootLeafの使い方 地図が右側に、表示している情報が... 続きを読む