CSSレイアウトを学ぶための入門チュートリアル

高洛峰

リリース： 2017-03-17 09:33:37

オリジナル

1391 人が閲覧しました

概要

Web の台頭以降、CSS に関する入門書や学習教材は圧倒的なものになりました。
この記事では、特定の CSS 構文については説明しませんが、初心者の観点から、CSS にまったく触れていない、またはほとんど接触していない人でも、CSS とは何か、その使用方法をすぐに理解できることを願っています。

CSS とは

概念を理解するとき、最初に目にするのはその名前ですが、無視されがちなのもその名前です。
CSS (カスケードスタイルシート)、中国語のカスケードスタイルシートに翻訳できます。名前からわかります:

カスケード: スタイルを重ね合わせることができるため、優先順位があることを意味します
スタイルシート: CSS がスタイルを記述することを意味し、単なるテーブルであり、プログラミング言語の次にCSSが登場するようになり、CSSの構文を拡張したSassやLessなどの言語も登場してきますが、実はCSSだけを使ってWebを作ることもできます。 HTMLだけでなく、機械やブラウザの性能の向上に伴い、Webページの美しさや使いやすさに対する要求はますます高くなり、CSSの重要性が徐々に高まってきています。
CSS には 2 つの主な機能があると思います:

は Web ページのコンテンツを分離する

変数
やプログラミング言語の設定ファイル

と同様に、Web のスタイルを統一した方法で管理し、変更を容易にすることができます。コンテンツを柔軟に表示できるようにします
HTML 要素
を表示するかどうかを制御するだけであることに注意してください。

for

Layout CSS はレイアウトで最もよく使用されます。これは、CSS のおかげで、いわゆる p+css レイアウト方法が以前はテーブルレイアウトに使用されていました。

p+cssのレイアウトを予備的に理解するには、フレームモデル、位置決め、フローティングの3点を理解すれば十分だと思います。

ボックスモデル

各pはCSS用のボックスです。各ボックスは内側から外側に向かって 4 つの部分で構成され、コンテンツpadding border

margin

p とボックスの長さは、これら 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;
}

ログイン後にコピー

この例は単純ですが、次のことがわかります:

外側から内側にマージン、ボーダー、パディング、コンテンツです

ボックスモデルを理解すると、配置も非常に簡単になります。実際、それはページ上で各ボックスを配置することを意味します。
測位は

と相対測位に分けられます。

絶対位置

は、ブラウザの左上隅からの相対的な距離です

<!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です

相対配置

相対配置における各pの上端と左端は、ブラウザの左上隅に対して相対的ではなくなりました。ただし、残りの位置と比較して左上隅。

上記の例と同様に、position:Absolute を Position:relative に置き換えると、2 つの p が重ならないことがわかります。

Floating

p はデフォルトでインラインです。つまり、各 p は 1 行を占めます。

レイアウト中に、複数の 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 サイトの他の関連記事を参照してください。