ホームページ > 記事 > ウェブフロントエンド > 優れた Web サイトをすばやく構築: CSS Web ページ レイアウト フレームワーク設計ガイド
優れた Web サイトをすばやく構築: CSS Web ページ レイアウト フレームワーク設計ガイド
- 王林オリジナル
- 2024-01-16 09:44:06870ブラウズ
Web デザイナーとしての重要な仕事は、優れた CSS Web ページ レイアウト フレームワークを設計することです。この種のフレームワークにより、Web サイトがより美しく、使いやすくなり、ユーザー エクスペリエンスが向上します。この記事では、優れた Web サイトを迅速に構築できるように、CSS Web ページ レイアウト フレームワークの設計ガイドラインと具体的なコード例をいくつか紹介します。
1. 適切な CSS フレームワークを選択する
CSS Web ページ レイアウト フレームワークを設計する前に、適切な CSS フレームワークを選択する必要があります。 Bootstrap、Foundation、Materialize など、選択できる CSS フレームワークは数多くあります。各 CSS フレームワークには独自の長所と短所があり、ニーズと好みに基づいて自分に合ったフレームワークを選択する必要があることに注意することが重要です。
たとえば、応答性の高い Web サイトを迅速に開発する必要がある場合、Bootstrap は最も適したフレームワークの 1 つである可能性があります。組み込みのグリッド システムにより、応答性の高いレイアウトを迅速に作成でき、さまざまな要素の設計に使用できる CSS クラスが多数あります。
次は、Bootstrap を使用して作成された基本的な Web サイト構造のサンプル コードです:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
</div>
</body>
</html>2. グリッド システムの作成
グリッド システムの作成は、CSS Web をデザインすることです。ページ レイアウト フレームワークの重要なステップ。優れたグリッド システムを使用すると、Web サイトのレイアウトの一貫性と安定性が高まり、さまざまな要素をより便利に管理およびレイアウトできるようになります。
次はサンプル グリッド システムのコードです:
.container {
margin: 0 auto;
max-width: 960px;
padding-left: 15px;
padding-right: 15px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col {
float: left;
padding-left: 15px;
padding-right: 15px;
}
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333%;
}
.col-5 {
width: 41.66667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33333%;
}
.col-8 {
width: 66.66667%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333%;
}
.col-11 {
width: 91.66667%;
}
.col-12 {
width: 100%;
}このサンプル コードでは、.container クラスと .row クラスを作成しました。コンテナ クラスは幅を制限します。ウェブページの一定の範囲内。 .row クラスは、行に負のマージンを設定するために定義されています。
さらに、グリッド システムの構成要素である .col クラスも定義します。 float (left) プロパティを使用して列を期待どおりに配置します。さまざまな列サイズに対して、col-1 からcol-12 までのクラスを定義します。各クラスは異なる幅を持ち、幅の合計は 100% になります。
このグリッド システムを使用する場合、各コンテナには .container クラスが必要で、各行には .row クラスが必要で、33.33333% の幅を必要とする要素には .col-4 などの列を使用する必要があります。 。
3. Web サイトをレスポンシブにする
優れた CSS Web レイアウト フレームワークはレスポンシブである必要があります。これは、Web サイトがさまざまな画面サイズやデバイスに適応できることを意味します。レスポンシブな Web サイトを実装するには、メディア クエリを使用する必要があります。
次はサンプル コードです:
/* 在768px宽度以下屏幕上隐藏.slide类 */
@media only screen and (max-width: 767px) {
.slide {
display: none;
}
}
/* 在768px宽度以下屏幕上将.container-fluid类更改为.container类 */
@media only screen and (max-width: 767px) {
.container-fluid {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
}
/* 在992px宽度以下屏幕上将.col-md-4类更改为.col-xs-6类 */
@media only screen and (max-width: 991px) {
.col-md-4 {
width: 33.33333%;
}
}
@media only screen and (max-width: 767px) {
.col-xs-6 {
width: 50%;
}
}
/* 在小屏幕上使图片缩小 */
@media only screen and (max-width: 767px) {
img {
max-width: 100%;
}
}このサンプル コードでは、3 つのメディア クエリを定義します。最初のメディア クエリは、幅 768 ピクセル未満の画面で .slide クラスの要素を非表示にします。 2 番目のメディア クエリは、小さな画面に合わせてマージンとパディングを増やすために、.container-fluid クラスを .container クラスに変更します。 3 番目のメディア クエリは、小さな画面に合わせて .col-md-4 クラスを .col-xs-6 クラスに変更し、小さな画面で画像を縮小します。
4. その他の設計上の考慮事項
上記の設計ガイドラインに加えて、他の設計上の考慮事項がいくつかあります。
たとえば、Web サイトをデザインするときは、Web サイトが使いやすく、ナビゲートしやすいことを確認する必要があります。ドロップダウン メニュー、パンくずリスト、サイド ナビゲーションなどを備えたナビゲーション バーを使用してナビゲーションを実装できます。
また、Web サイトが視覚的に魅力的であることを確認してください。色、アニメーション、グラデーション、画像などを使用して、Web サイトの視覚効果を高め、より魅力的なものにすることができます。
最後に、Web サイトのパフォーマンスも考慮する必要があります。 CSS スプライトを使用して HTTP リクエストを削減し、CSS ファイルと Javascript ファイルを圧縮し、静的リソースをキャッシュするなどすると、Web サイトのパフォーマンスを向上させることができます。
概要
CSS Web ページ レイアウト フレームワークの設計は、さまざまな要素を考慮する必要がある複雑なタスクです。この記事で提供されている CSS Web ページ レイアウト フレームワークの設計ガイドラインと具体的なコード例が、優れた Web サイトを迅速に構築し、ユーザー エクスペリエンスとパフォーマンスを向上させるのに役立つことを願っています。
以上が優れた Web サイトをすばやく構築: CSS Web ページ レイアウト フレームワーク設計ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。