ホームページ > 記事 > ウェブフロントエンド > CSSレイアウトを学ぶための入門チュートリアル
CSSレイアウトを学ぶための入門チュートリアル
- 高洛峰オリジナル
- 2017-03-17 09:33:371374ブラウズ
概要
Web の台頭以降、CSS に関する入門書や学習教材は圧倒的なものになりました。
この記事では、特定の CSS 構文については説明しませんが、初心者の観点から、CSS にまったく触れていない、またはほとんど接触していない人でも、CSS とは何か、その使用方法をすぐに理解できることを願っています。
CSS とは
概念を理解するとき、最初に目にするのはその名前ですが、無視されがちなのもその名前です。
CSS (カスケード スタイル シート)、中国語のカスケード スタイル シートに翻訳できます。名前からわかります:
カスケード: スタイルを重ね合わせることができるため、優先順位があることを意味します
-
スタイルシート: CSS がスタイルを記述することを意味し、単なるテーブルであり、プログラミング言語の次にCSSが登場するようになり、CSSの構文を拡張したSassやLessなどの言語も登場してきますが、実はCSSだけを使ってWebを作ることもできます。 HTMLだけでなく、機械やブラウザの性能の向上に伴い、Webページの美しさや使いやすさに対する要求はますます高くなり、CSSの重要性が徐々に高まってきています。
CSS には 2 つの主な機能があると思います:
変数
やプログラミング言語の設定ファイル
と同様に、Web のスタイルを統一した方法で管理し、変更を容易にすることができます。コンテンツを柔軟に表示できるようにします
HTML は Web ページの実際のコンテンツであり、CSS は- HTML 要素
を表示するかどうかを制御するだけであることに注意してください。
CSS
Layout CSS はレイアウトで最もよく使用されます。これは、CSS のおかげで、いわゆる p+css レイアウト方法が以前はテーブル レイアウトに使用されていました。
p+cssのレイアウトを予備的に理解するには、フレームモデル、位置決め、フローティングの3点を理解すれば十分だと思います。
ボックスモデル
各pはCSS用のボックスです。各ボックスは内側から外側に向かって 4 つの部分で構成され、コンテンツpadding border
marginp とボックスの長さは、これら 4 つの部分の長さと幅の合計で構成されます。例: <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<p>Content</p>
</body>
</html>
body {
background-color: #FAEBD7;
}
p {
width: 100px;
height: 100px;
padding: 30px;
border: 10px solid blue;
margin: 10px;
background-color: red;
text-align: center;
}この例は単純ですが、次のことがわかります:
外側から内側にマージン、ボーダー、パディング、コンテンツです
- pの幅と高さはちょうどコンテンツのサイズです
- 配置
-
ボックスモデルを理解すると、配置も非常に簡単になります。実際、それはページ上で各ボックスを配置することを意味します。
測位は 絶対測位
は、ブラウザの左上隅からの相対的な距離です<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<p id="p1">Content1</p>
<p id="p2">Content2</p>
</body>
</html>
body {
background-color: #FAEBD7;
}
p {
width: 100px;
height: 100px;
padding: 30px;
border: 10px solid blue;
margin: 10px;
background-color: red;
text-align: center;
position: absolute;
}
#p1 {
top: 100px;
left: 100px;
}
#p2 {
top: 200px;
left: 200px;
}絶対位置は、画面サイズを固定できない限り明確ですが、柔軟性がありません。複数の CSS セットが必要です。設定が不十分だと、要素が重なり合う可能性があります。
上記の例と同様に、position:Absolute を Position:relative に置き換えると、2 つの p が重ならないことがわかります。
レイアウト中に、複数の ps を一列に配置したい場合は、floating を使用します (または前のテーブル方法を使用します)
p float 属性を設定した後、p を使用してさまざまな構造をレイアウトできます。
以下は、シンプルな p+css レイアウトを作成するための例として一般的な管理システムを使用します
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<p id="head">head</p>
<p id="middle">
<p id="nav">nav</p>
<p id="content">content</p>
</p>
<p id="foot">foot</p>
</body>
</html>
body {
background-color: #FAEBD7;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
border: 1px solid black;
text-align: center;
}
#head {
height: 50px;
width: 100%;
}
#middle {
width: 100%;
top: 50px;
bottom: 100px;
left: 0px;
position: absolute;
}
#nav {
float: left;
width: 200px;
height: 100%;
}
#content {
height: 100%;
overflow: hidden;
}
#foot {
height: 100px;
width: 100%;
bottom: 0px;
left: 0px;
position: absolute;
}
上記の例では、頭と足の高さが固定され、ナビゲーションの幅も固定されています。その他は適応性があり、ブラウザ ウィンドウのサイズを調整することで効果を確認できます。
概要
CSS レイアウトは非常にシンプルです。その他のインタラクティブなアクションがある場合は、js を通じて実現できます (ナビゲーションとコンテンツの連携など)。
現在、テーブル レイアウト メソッドを使用する人はほとんどいません。テーブルはデータを表示するための単なる手段であり、行メソッドとセル メソッドはコンポーネント化に適していないためです。
以上がCSSレイアウトを学ぶための入門チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。