FREE WEBSITE BUILDER SOFTWARECreate awesome websites in seconds No code, free, with AI. Publish anywhere.
ロゴやウェブサイトの配色決めにおいては、パーツ単体で見たときに良さそうでもいざ実際に配置してみると「思った感じと違う……」と難航しがちです。そんな時、AIの力でカラーパレットを作成してくれるサイト「Huemint」は自動で良さげな感じに仕上げてくれるうえに、利用する際のイメージを分かりやすいプレビューで用意してくれる非常に便利なサイトということで、実際にその使い勝手を試してみました。 Huemint - AI color palette generator https://huemint.com/ サイトにアクセスするとこんな感じ。「Launch」をクリックします。 するとブランドロゴのページに移動しました。AIの選んだ4色を使った場合のイメージが右側に表示されています。下にスクロールしてみると…… 生成された配色が合成されたイメージ画像が表示され、製品に表示したときのイメージが分かりやす
背景 スコープ Tailwind CSSとは? コンポーネント指向とは? Tailwind CSSのメリット class名を考える必要がない デザインシステムの最低保証 ドキュメント、チートシートの豊富さ Tailwind CSSのデメリット classに多くのコードを書く必要があり、可読性が落ちやすい CSSの理解度がある程度必要 デザインを100%再現したい場合に強味を生かしづらい 他ライブラリやフレームワークとの比較 Bootstrapとの比較 Material UI/Vuetify等のUIライブラリとの比較 インライン記述との比較 まとめ 所感 参考 背景 こんにちは。mtaaaです。 社内のフロントエンド勉強会でTailwind CSSについて発表を行ったまとめとして、ブログに残したいと思います。 スコープ Tailwind CSSとは? なぜTailwind CSSに注目が集ま
より詳細な内容は公式ブログの記事にまとまっているので、日本語に翻訳して紹介していきます。 Bootstrap5公式Blog記事(日本語訳) Bootstrap5を正式公開しました!3つのアルファ版、3つのベータ版、数か月の開発を経て、最初の安定版としてメジャーバージョンをリリースします。Bootstrapのユーザー及びコントリビューター、メンテナーとすばらしいコミュニティによって実現しました。ここに来るのを手伝ってくれたすべての人に感謝します! 新しいロゴ 新コンポーネント:Offcanvas 新しいアコーディオン 新しくなったフォーム チェックボックスとラジオボタン フローティングラベル 新しいファイル入力 シンプルになったレイアウト RTL対応 刷新されたユーティリティ 新しいユーティリティAPI 新しいユーティリティ スペーシングユーティリティ 新しいスニペット例 グリッドとレイアウ
この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題!コピペ可なHTMLスニペット ベスト100発表 どう書くんだっけ? を一発解決!コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー
地図とWebは相性が良いです。移動中に地図を見たいと思うことは多いですし、旅行や出張前に計画を立てる上でも地図が必要です。それもあり、Googleマップをマッシュアップする地図サービスは無数に存在します。 今回紹介するBootLeafはそんな地図マッシュアップのベースになるようなソフトウェアです。様々な情報を地図に載せやすくなっています。 BootLeafの使い方 地図が右側に、表示している情報が左側に一覧になっています。 メイン画面 左のリストから選ぶと該当するデータがハイライトします。 データ選択 さらに詳細なデータはモーダルで表示されます。 モーダル表示 データは検索でインクリメンタルに絞り込めます。 検索 ラインデータの表示もサポートされています。 ラインデータ表示 データはチェックボックスで表示/非表示が切り替えられます。 データの追加表示 BootLeafを使えば地図と独自のデ
Material Designを使用してみたいけど、時間がない、手間をかけたくない、という人にぴったりな、Material Designが採用された商用でも個人でも無料で利用できるBootstrap 4ベースの新作テンプレートを紹介します。 企業向けサイト、プロダクトのランディングページ、ポートフォリオやギャラリー、ブログ用のテンプレートが揃っています。 Material Design for Bootstrap 4 MDB- GitHub Bootstrapの特徴や基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrap 4の主な特徴、IE8のサポート終了、Sassに移行、CSSの単位はremとem採用 Bootstrapのグリッドシステムの基本な使い方 新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ ではMaterial De
商用プロジェクトでも利用でき、モバイル端末でのサイト表示にも対応した高品質なHTMLテンプレート素材を200種類以上公開しているサイト Colorlib を今回はご紹介します。レスポンシブデザイン対応はもちろん、Bootstrapフレームワークを利用したものが中心で、カスタマイズも手軽に行うことができます。 ホームページを作成しよう!無料で使える高品質HTMLテンプレート26個まとめ 2018年4月度 無料で最強!レスポンシブ対応の高品質HTMLテンプレート23個まとめ 2017年10月度 HTMLテンプレートのライセンスについて Colorlib で公開されている200種類を超えるHTMLテンプレートは、どれも Creative Commons Attribution 3.0 License (CC BY 3.0)となっています。HTMLテンプレートを無料ダウンロードするときは、以下の点
Primary Secondary Success Info Warning Danger Link Primary Secondary Success Info Warning Danger Link Primary Secondary Success Info Warning Danger
Titan – One page / Multi page Multipurpose Template made with HTML5 & Bootstrap 32 customers reviews Yes, It’s free. Seriously. Today, ThemeWagon has over 150 web templates that are free. How many of them have cutting-edge, modern design? Honestly, most of them have error-prone codes, old-fashioned design. After analyzing the web design trend of past five years, we have crafted Titan; with better
突然ですがおしゃれなWEBサイトを作るのに欠かせない存在となってきた「Bootstrap」を知っていますか? BootstrapとはTwitter社にて開発されたWEBサイト構築をよりスムーズかつ、スピーディーに仕上げる為のフレームワーク。 フレームワークとはCSSのスタイリングやレイアウトが既に定義されたCSSのパッケージの様なもの。 引用:無料テンプレートで爆速WEB制作!Start Bootstrapを使ってみよう! 数年前では考えられなかったスピードでWEBサイトを作成できるようになりました。簡単に利用できる「Bootstrap対応のテンプレート」を使用する人も増えていますが、 などの悩みもでてくるのではないでしょうか? そこで今回はおすすめの優良なBootstrapテンプレートを集めてご紹介したいと思います。無料のテンプレートもありますが、有料でも使い勝手の良いテンプレートをピッ
短時間で手軽にウェブサイトを作成できるCSSフレームワークは、数多く公開されています。CSSフレームワークを使用することで、開発速度をスピードアップさせるだけでなく、クリーンで規則性のあるレイアウトを時間をかけずに作成できます。 今回はたくさんあCSSフレームワークの中から、特に人気の高いものを中心に、高機能で使い勝手の良いものから、無駄を一切省いた超軽量なものまで、最新CSSフレームワークをまとめてご紹介します。目的やデザインの好みなど、自分にあった使いやすいフレームワークを見つけてみてはいかがでしょう。 ウェブサイト開発を爆速に!人気オススメCSSフレームワーク厳選まとめ【2018年保存版】 Bulma Flexbox をベースにしたCSSフレームワーク。軽量で用意されたひとつのCSSファイルを読み込むだけの手軽さも人気の理由。 URL: https://bulma.io/ CDN:
2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった、そして改訂された、Bootstrap 4の基本テンプレート、ナビゲーション、コンポーネントを紹介します。 Bootstrap Bootstrap 4の基本テンプレート Bootstrap 4のナビゲーションバーのテンプレート Bootstrap 4のコンポーネントのテンプレート Bootstrap 4の実験的なテンプレート Bootstrap 4の基本テンプレート まずは、Bootstrap 4
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. It’s literally taken us years to do it, but Bootstrap 4 has finally arrived! Words cannot begin to describe the elation the entire team and I have for this release, but I’ll do my best. Thank you to everyone, especially to the team, and to everyone who’s contributed co
Bootstrap 4.0のテンプレートやコンポーネントのデザインを確認しながら、定義されている変数を簡単にカスタマイズできるオンラインツールを紹介します。 BootstrapでWebサイトやブログを作成する時に、BootstrapのUIコンポーネントを利用する時に、Bootstrapのテーマを作成する時に、便利なオープンソースの無料ツールです。 Bootstrap Magic Bootstrap Magic -GitHub Bootstrap Magicの特徴 Bootstrap Magicの使い方 Bootstrap Magicの特徴 Bootstrap 4.0対応 最新のBootstrap 4.0のすべてのテンプレート・コンポーネントに対応しています。 Sass対応 BootstrapはSassにも対応しているので、Bootstrap Magicでも同様にSassの変数が利用できます
デザイン性だけでなく使い心地にもこだわった、ウェブデザイン制作をグッと楽にする無料HTMLテンプレート素材をまとめました。 人気のHTMLフレームワーク Bootstrap を利用して作成されており、カスタマイズしやすく拡張性の高いテンプレートが中心に揃います。また、2017年のウェブデザイントレンドをうまく反映した素材も多く、サイト開発のデザインやレイアウトの参考にしてみても良いでしょう。 レスポンシブ対応で無料!ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Paper Kit 2 控えめな配色と美しいタイポグラフィーが特長のBootstrap 4対応で、収録されているコンポーネントはどれもレスポンシブ対応で、あらゆる画面スクリーンサイズでも読みやすいうれしい設定も。 デモページ ダウンロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く