ユーザーインターフェイスデザイナーのための30の無料の美しいCSSレイアウト
公開: 2021-03-26Webサイトは、コンテンツ、色、および柔軟性のこれらすべての興味深い配置をどのように取得しますか？ それはCSSのせいです！ CSSをWebのスーツと考えてください。 それはそれを素晴らしく見せるためにケーキにその余分なコーティングです。 Webを味わうことはできませんが、デザイナーが時間をかけてユニークで野心的で優れたWebブラウジング体験を提供することで、Webを最大限に楽しむことができます。 CSSの使用を開始するのはかつてないほど簡単でした。 現在、Webがどのように正確にスタイリングされているかを理解するためのオンボードエクスペリエンスを提供する、何百もの本、フレームワーク、およびコーディングWebサイトがあります。 最良の部分は、あなた自身がそれらのスタイリング努力の貢献者になることができるということです！
レイアウトは、Webデザインの最も技術的な側面の一部です。 ウェブサイトを適切に表示するには、適切に設計されたレイアウトを設定する必要があります。 従来のWebデザインでは、複雑なシングルグリッドに依存し、各グリッドを再利用して個々のボックス要素を反映していましたが、Flexboxなどのツールを使用して多層デザイングリッドを作成したり、好みに応じて、それぞれを個別にスタイル設定します。 これまでは長い道のりでした。これらの新しいツールは存在しますが、一部の設計者はまだそれらをまとめるのに苦労しています。 これは主に、CSSの進化がかなり速いためであり、JSとHTML5の助けを借りて、そのプロセスはよりクモの巣のようになる可能性があります。
そのため、これ以上面倒なことはせずに、CSSのベテラン自身が作成した最も用途の広いCSSレイアウトを30個提供します。 これらのデザインとレイアウトは、独自のプロジェクトで使用するために、またはレイアウトがどのように機能するかを理解する目的でのみ使用できます。 これは、CSSがどれだけ進歩したか、そしてインタラクティブなJSコードを少し追加するだけですべての違いが生まれることに気づき始めると、あなたを刺激する素晴らしいレイアウトのコレクションです。 一番下には、レスポンシブでモダンなレイアウトをすぐにスタイリングできるように、有名なCSSレイアウトフレームワークがいくつか含まれています。
Metro UI
Martabak Angusはインドネシアの居住者であり、Laravel、Angular、Sassなどの言語で多くのフロントエンド開発を行っています。 ここにあるのは、以前に確立されたコンセプトに基づいたユニークなデザインのための彼の多くの創造的な表現の1つです。 Windows Metroの設計は、Windowsがバージョン7を超えると普及し、現在では多くのWindowsプラットフォームで快適に使用されています。 最近、ウェブサイトやアプリにメトロデザインを実装するのに時間をかけるデザイナーの間で非常に有名になりました。 この特定のユーザーインターフェイスは、従来のWindowsデスクトップレイアウトもワークフローに追加します。 さらに、インタラクティブなエクスペリエンスを作成するギャラリースライダーが追加された、スムーズな流れるアニメーションボタンがあります。 Windows 8 Metro UIは、純粋にネイティブCSS3で構築されており、スライドギャラリーでさえ、JavaScriptをまったく使用していません。
Flexboxを使用した純粋なCSS組積造レイアウト
Jhey TompkinsはCSSの専門家であり、昨年だけでもGitHubに15,000を超える個人の貢献があります。 なんて素晴らしい成果でしょう。 GitHubの彼のリポジトリの多くにも100以上の星があり、彼は仲間の間でよく知られています。 Jheyのこの特定のCSSレイアウトは、Flexboxを使用して、独自の要素やWebサイトウィジェットに対応できる堅固な石積みレイアウトを実現します。 いくつかの興味深い機能には、創造性を高めるために個々のグリッドを「反転」する機能や、ユーザーがグリッドにカーソルを合わせると強調表示されるグリッドが含まれます。 結論として、これは、多くのコンテンツを処理するWebサイトプロジェクトに使用するのに最適なグリッドレイアウトです。
列レイアウトの拡張
Ettricsは、カナダの小さなデジタルデザインエージェンシーです。 2人の男がこの小さな代理店を管理し、世界中の何千人ものデザイナーが認めている素晴らしい芸術作品をいくつか作成しました。 また、過去に、六角形アニメーション、スライダーアニメーション、メニューオーバーレイ、ドラッグアンドドロップインターフェイス、インタラクティブな棒グラフなど、いくつかのクールなCSSスニペットを共有しており、合計で最大100,000回以上のビューが追加されています。
また、コミュニティとのチュートリアルの作成と共有に関しても恥ずかしがらず、設計者が優れた設計理解を使用してユーザーインターフェイスキットと魅力的なユーザーエクスペリエンスを作成する方法について幅広く書いています。 開発者は、Expanding ColumnLayoutと呼ばれるこのレイアウトも作成しました。 視聴者はすでにこのレイアウトを30,000回以上閲覧しています。 このレイアウトにアクセスすると、ポートフォリオに最適なシンプルなページレイアウトが表示され、さまざまな色の列が表示され、各列が個別に展開されます。 拡大するウィンドウ内に、好きなコンテンツを入れることができます。
列のあるフルスクリーンレイアウト
Karol PodlesnyはEttricsの仕事を引き受け、回路図を少し変更しました。 また、さまざまな色のセットと、コンテンツを共有するためのわずかに最適化された拡張ウィンドウを利用できます。 さらに、それはフルスクリーンであり、モバイルデバイスに優雅に適応します。 色を個別に管理する時間を節約するために共有する価値があります！
純粋なCSS組積造レイアウト
Adam Blumは過去にいくつかの興味深い共有を行ってきましたが、この純粋なCSS組積造のレイアウトも例外ではありません。 JavaScriptをいじくり回さずにCSS3列に関する知識を広げたい場合は、この単純なレイアウトが出発点として最適です。 とにかく、私たちは皆どこかから始めなければなりません。 また、作成者は個々の列ブロックをきちんと整理し、レイアウトに要素を追加し続けると、各ブロックの上にすばやく構築できます。
静的ページレイアウトの例
Nick Pettitは、Treehouseの社内コース教師の1人でもある優れたゲーム開発者です。 世界的に有名な開発者学習リソース。 Nickがこのレイアウトでここに構築したのは、静的Webサイトレイアウトがどのように機能するか、そしてそのような静的レイアウトを使用して、完璧に機能するデモを提供するために時間を費やす必要なしにプロトタイプを構築する方法の例です。
Flexboxを使用した製品ページのレイアウト
Angular.jsの背後にある公式チームも、特定のレイアウトを作成する方法に関するさまざまなスニペットとコード構造を積極的に共有しています。 そのため、Angular Materialは、製品ページ用の堅固なFlexboxレイアウトをコミュニティに提供しています。 開発者は、このテーマに個別の製品グリッドを詰め込み、注目の製品と通常の製品を表示しました。 また、この製品に結果を並べ替えてフィルタリングする機能を提供しました。 これにより、マテリアルデザイン仕様で増幅された新しいAngular2フレームワークに何が期待できるかを少し味わうことができます。 全体として素晴らしい結果。
美しいCSS3レイアウト
Adrian Gyuricskaは、ポートフォリオページをホストするのに理想的な、非常にすっきりとした小さなCSSレイアウトを作成しましたが、基本的には単一ページのブログレイアウトに変換することもできます。 私たちが最も気に入っているのは、リンクが豊富な滑らかなサイドバーと、さまざまなセクションに分割されたカラフルな要素レイアウトです。 また、JavaScriptアクションが少し発生しており、テンプレートはJadeとSCSSでスタイル設定されています。
モバイルメニューを備えたFlexboxグリッドレイアウト
Lindsey Di Napoliは、フロントエンドデザイナーとしての彼女のキャリアを描いたポートフォリオ/リソースプロジェクトであるCSSgirlの背後にいます。 彼女は自分の時代にいくつかのクールなものを構築しました。Flexboxグリッドレイアウト（サポートされているモバイルナビゲーション付き）は、少なくとも無料共有の点で、これまでの彼女の最高の作品の1つです。 彼女は過去に本当に刺激的なプロジェクトに取り組んできたと確信しています。 いずれにせよ、このレイアウトは、Flexboxを使用して美的で完全に位置合わせされたデザインを作成する方法をもう一度示しています。 コンテンツエリア内でのカードの使用が好きで、ソーシャル共有ボタンを表示するすっきりとした小さなオーバーレイがあります。
CSS3を使用したフラットなブログレイアウト
Renaud Tertraisは、フラットCSS3ブレッドクラム、小さな丸いブレッドクラム、SVGとJavaScriptを使用したアニメーションロゴ、CSS3アイコン（矢印）、フラットCSS3評価システム、入力範囲デモ、そしてもちろん、このフラットブログレイアウトなどのプロジェクトの背後にあります。これらはすべて純粋なものを使用して構築されています。 CSS3。 レイアウトをリストアイテムとして表示するか、グリッドとして表示するかを選択できます。 これは単純なレイアウトアプローチであり、ブログを必要とする今後のプロジェクトのいずれにもうまく適合します。 このコードへの適応は非常に簡単で簡単です。
Flexboxを使用したレスポンシブカードレイアウト
Mynor Alexanderは、Flexboxとカードのレイアウトについていくつか教えてくれます。彼に直接会う必要はありません。 Flexboxを使用して構築されたこのレスポンシブカードレイアウトのソースコード内にあります。 今日、カードレイアウトの適応は継続的に成長しています。 彼らがデザイン体験に提供する価値はかけがえのないものです。 したがって、フロントエンド開発者としてデザインでカードを使用する方法を学ぶことは、Webデザインの未来に進むための典型となることは言うまでもありません。
スムーズな遷移を備えたCSSのみのレスポンシブレイアウト
Ying Zhangは、Web開発者としていくつかの大手ブランドと協力し、彼女自身のプロジェクトPure Essenceを主催して、彼女自身のキャリアの進歩について話し合っています。 彼女が共有したスニペットの中には、スムーズな移行がサポートされ、すべて完全かつ完全にレスポンシブなこの純粋なCSSレイアウトがあります。 遷移は、ページの下部にあるメニュー選択によって行われます。 アイテムをクリックすると、新しいページがロールオープンし、スムーズに移行します。 さらに、要件に最も合うようにページの個々の側面をカスタマイズできます。 Web上で双方向性を構築する方法の素敵な例。
レイアウト付きグリッド
これはAngularMaterialからのさらに別のシェアです。 今回は、将来の設計開発の定型文として使用できるシンプルなグリッドレイアウトを共有しています。 Angular 2フレームワークの完全リリースに備えて、新しいレイアウトとコンセプトを押し出し続けているCodePenページに注目してください。
Flexboxの記事のレイアウト
Jon Daielloは多くの素晴らしいプロジェクトに取り組んできましたが、そのほとんどは製品の設計と開発に関係していました。 このレイアウトでは、彼は行って、コンテンツのレイアウトを構築する際にFlexboxが実際にどれほど柔軟であるかを示しました。 雑誌やブログの記事を問わず、Flexboxを使用すると、他では見られない鮮明な品質を実現できます。 このレスポンシブアーティクルレイアウトは、グリッド内の従来のコンテンツレイアウトに似せて構築されています。 これは、ジョンが自分のWebサイトで使用しているのと同じレイアウトです。これは、ジョンが自分の作業を信頼しているという別の言い方です。 確かに、ヘッダーとフッターの領域は少し改善される可能性があります。おそらく、このレイアウトから取り除く必要があるのは、グリッド自体の実際の構造だけです。
ページ遷移を伴うフルスクリーンレイアウト
投稿の前半で、このレイアウトの水平バージョンを実際に見ました。 したがって、Furkan Ozdenがここで行ったことは、元のレイアウトを取得して、それをボックス化されたレイアウトに単純に変換したことです。これは、おそらく特殊なケースの設計に適しています。 機能はすべて同じです。 コンテンツを含むフルスクリーンのモーダルウィンドウを開くボックス（リンク）のさまざまな選択肢が表示されます。 それでもポートフォリオやウェブ上で履歴書をホストしたい人には良い選択です。 一方、ページ遷移は滑らかさを失うことはありません。
スケルトンレイアウトの例
SitePointは、いつものように、共有するのに最適なものを知っています。 これらの人々は何十年もの間彼らのウェブ開発プラットフォームを運営していて、最新の技術と最近のウェブで流行しているものに非常に経験があります。 彼らのスケルトンレイアウトは、フロントエンドのスキルを練習したい人なら誰でも自由にスタイル、調整、最適化できるビジネスWebサイトのスケルトンレイアウトを構築する方法の例です。 センターナビゲーションウィジェット、スキルと経験を紹介するための素晴らしいカード要素、履歴書情報（説明、経験、採用方法）を表示するための別のウィジェット要素、そして最後にフッターを備えた素晴らしいフルスクリーンヘッダーセクションがあります連絡先の詳細とソーシャルメディア情報を入手しました。 全体的に優れたデザインであり、初心者が最新のWebデザインテクノロジーを使用してレイアウト内に物を配置する方法を練習するのに理想的です。
FlexboxとFlexWrapを使用したタイルスタイルのレイアウト
Jack ArmleyはExpediaで働いており、独自のクリエイティブなひねりを加えたオンラインゲームやWebサイトの構築に数年を費やしてきました。 彼の仕事の多くは、タイポグラフィと一般的なフォントを使用して、彼と一緒に仕事をする特権を持つ人々に素晴らしい体験を提供することを含みます。 このCSS3レイアウトのデモは、FlexboxとFlex Wrapを使用して、ブログサイト、見積もりサイト、社説、およびカードとグリッドレイアウトの組み合わせの恩恵を受ける一般的なコンテンツ共有サイトで使用する価値のあるデザインを作成するタイルスタイルレイアウトに基づいています。
レスポンシブ垂直タイムライン
CodyHouseは、すぐに使用でき、カスタマイズしやすいコードスニペットの無料ライブラリです。 CodyHouseが新しいスニペットまたはスクリプトをリリースするときはいつでも、独自のチュートリアルとガイドが付属しています。 これらのガイドとチュートリアルは、コードがどのように機能し、最終結果をどのように達成できるかを示しています。 この例では、レスポンシブ垂直タイムラインレイアウトがあります。 あなたはあなたがどれだけ進歩したかを披露したいビジネスウェブサイトやポートフォリオで理想的にそれを使うことができます。 このデザインが雑誌で見られるのは珍しいことです。 ただし、タイムラインレイアウトを使用して、特定のブログタイプのサイトを回避することができます。 最新のビジネスアップデートやニュースに関連するコンテンツを公開している人も、この機能を利用できます。
デイリーキッテを修正
Women's Coding Collectiveとしても知られるWCCは、女性を支援することを厳密に目的とした開発者のコミュニティです。 WCCは、コードを書くことで彼らに力を与えます。 これにより、今日のWeb開発コミュニティで通常見られる性別の役割間のギャップを埋めることができます。 WCCは、開発者としてのキャリアを開始する方法に関するガイダンスとリソースを女性に提供します。 このDailyKittehレイアウトの例は、WCCが学習のために提供する種類の作業の例の1つにすぎません。 女性は素敵で静的なウェブサイトページを構築する方法を学ぶことができます。 WCCは、すべての要素がどのように協力して最終結果を得るかを理解させることもできます。
SpotifyアーティストページのUI
Adam Lowenthalは、Spotifyのアーティストページから直接取得したUI要素の非常識な編集を提供します。 これは、完全に描写して理解するのに少し時間がかかる巨大なレイアウトです。 レイアウトの奥深くにあるナビゲーションメニューでいっぱいのサイドバーがあります。 これらのレイアウトにより、ユーザーはアーティストページのさまざまな側面にアクセスできます。 最新の曲と音楽プレーヤーが統合されているだけでなく、関連するアーティストも追加されています。 このレイアウトを完全に理解するには、本当に時間をかける必要があります。 しかし、それは本当の宝物なので、あなたは旅を楽しむことができ、そして楽しむべきです。
中性子
NeutronはSASSを利用したCSSフレームワークであり、柔軟で整理された明確なWebサイトレイアウトを作成するためのツールを提供します。 これは、セマンティックマークアップを介して行うことができます。 ほとんどの場合、列を操作します。 レイアウトをどのように表示するかを定義するのに役立つ個々のパラメーターを受け入れます。 これらのパラメーターには、列リスト、コンテナーの寸法、コンテナーの配置、マージン、セレクターのターゲット、およびグリッドの順序が含まれます。 これらの各パラメーターは、意図を最もよく反映するレイアウトを整理するのに役立ちます。
csstyle
CSSTYLEはあなたが必要だと知っていたものですが、それが構築される前にアクセスする方法を決して知りませんでした。 作成者は、スタイルガイドに準拠した保守が容易なスタイルシートを作成するのに役立つこの素晴らしいツールを開発しました。 最近では、スタイルシートの大規模なコレクションを維持することは単純に不可能です。 また、すべてのセレクターとクラスを理解しようとしているときに、わだちに陥ることもあります。 さらに、それらがメインコードベースにどのように影響するかを学ぶ必要があります。
CSSTYLEを使用すると、このツールがCSSファイルの作成に役立つため、これらの問題を忘れることができます。 これらのファイルは読みやすく、ナビゲートしやすく、自動化も機能します。 コンポーネントインスタンス、パーツ、要素などに適用できる汎用スタイルの微調整を作成できます。微調整名の前に+記号を使用して微調整を適用することもできます。 上記の調整により、コンポーネント、オプション、およびパーツのスタイルが自動的に上書きされます。
ピュア
私たちが見たこれらすべての美しいCSSレイアウトで、あなたはまだ何かが欠けていることに気づきます。 これらは、完全に機能するWebサイトを作成するために配置できるWeb要素およびコンポーネントです。 もちろん、自分でコーディングすることは可能ですが、Pureのようなフレームワークを使用するのに時間を無駄にするのはなぜですか？ Pureは、実際にはいくつかのレイアウトオプションを提供します。 これらには、ブログ、電子メール、フォトギャラリー、ランディングページ、価格表、サイドメニュー、およびその他の種類のメニューが含まれます。
これらのレイアウトをつなぎ合わせて、独自のWebデザインを構築するプロセスを開始できます。 Pureに付属するコンポーネントは、グリッド、ボタン、テーブル、フォーム、およびメニューです。 これらすべてをまとめると、これらすべてが簡単に流れます。 Pureを含めてCSSを作成することで、サイトまたはアプリがブラウザー間で適切に機能することを確認できます。 それも本当にユニークに見えます。 何よりも、CSSファイルのサイズは小さいままです。 この機能は、モバイルユーザーや接続速度の遅いユーザーに最適です。
YAMLCSSフレームワーク
YAMLは、真にレスポンシブなWebサイトを作成するための最新のデザイナー機能をすべて提供します。 そのグリッドシステムは、柔軟性があり、さまざまなフレームワークで比類のないものとして知られています。 YAMLは、ユーザーに広範なドキュメントを提供します。 これらは、最新の設計開発に慣れ、同期するのに役立ちます。 開発者は、CSS3とHTML5の構造化を完全に補完する方法でコードベースを編成しました。 YAMLは10年以上存在しています。 それ以来、迅速なレスポンシブ開発のための主要なフロントエンドフレームワークの1つとして進化し、成長し続けています。
スケルトン
大規模なフレームワークのすべての広範な機能を必要としないプロジェクトを構築している場合は、Skeletonが最適です。 開発者は、この定型テンプレートにいくつかの便利な要素を追加して、デザインをブラッシュアップしました。 グリッドは、モバイルレスポンシブでデバイスに自動的に適応する基本的な12列のグリッドです。 タイポグラフィはカスタマイズ可能であり、レスポンシブプロパティを使用して各ブラウザで適切に調整します。 いくつかの事前定義されたスタイルのボタンから選択でき、カスタムフォームを実装することもできます。 これらは管理が難しい場合があることは誰もが知っていますが、Skeletonはそのプロセスを簡単にします。 次に、メディアクエリ、コードの強調表示、テーブル、リスト、基本的なユーティリティなどの要素があります。 利用可能なデモランディングページをダウンロードすることもできます。
久部CSSフレームワーク
Kubeは、モバイルおよびWebアプリケーションの迅速なブートストラップに使用できる未来的なプロフェッショナルWeb開発フレームワークです。 ある意味では、アプリケーション全体のバックエンドのプロトタイプコンプレックスとして機能します。 独自のスタイルガイドとコードアルゴリズムを使用して、必要なデザインを作成できます。
世界中の何千人ものプロの開発者やデザイナーがプロジェクトにKubeを選ぶ理由はたくさんあります。 一つには、久部はたった32Kbで、それがあなたのために何ができるかを考えると非常に印象的です。 もう1つ、久部のミニマルなスタイルを完全に取り入れるかどうかは、開発者とデザイナー次第です。 彼らはまた、それをほぼすべての規模に拡張および拡張することを選択できます。
スージー
Susyは、すべてのハードワークを実行するフレームワークの原動力です。 アイデアとデザインパターンを1つのレイアウトにまとめることができます。