はじめに
最近CSSを書くことが多くなったので、書きながら覚えたCSSの技をまとめていこうと思います。随時追加する予定です。
要素を中心に配置
- marginを使って中心に配置したいとき
margin: 0 auto;を使います。
 |
|---|
css
body {
margin: 0;
}
.container {
width: 500px;
margin: 0 auto;
}
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>header</header>
<div class="container">
<nav>left</nav>
<main>center</main>
<aside>right</aside>
</div>
<footer>footer</footer>
</body>
</html>
要素を横並びにする
- 要素同士を横並びにしたいとき、
display: flex;を使います。
 |
|---|
css
body {
margin: 0;
}
.container {
width: 800px;
margin: 0 auto;
display: flex;
}
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>header</header>
<div class="container">
<main>center</main>
<aside>right</aside>
</div>
<footer>footer</footer>
</body>
</html>
要素を比率で配置する
- 要素を比率で配置したい場合、
flex: 比率;を使います。
 |
|---|
css
body {
margin: 0;
}
.container {
width: 800px;
margin: 0 auto;
display: flex;
}
main {
flex: 2;
}
aside {
flex: 1;
}
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>header</header>
<div class="container">
<main>center</main>
<aside>right</aside>
</div>
<footer>footer</footer>
</body>
</html>
レスポンシブデザイン対応
- レスポンシブデザイン対応は、
@media screen and (max-width: 数値)を使います。
下記のコードの場合、横幅が1000px以下になった場合、スタイルを適用させることができます。
css
@media screen and (max-width: 1000px) {
main {
flex: 1;
}
}
ダミーテキストの生成
- Visual Studio CodeではEmmet記法が使え、その中のloremを使うとダミーテキストを生成させるものです。
- 使い方は、Visual Studio Code上で
loremと入力するだけで、サジェストに表示されるようになります。 -
lorem数値と入力すると、数値の数だけダミーテキストを用意してくれます。
