はじめに
最近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数値と入力すると、数値の数だけダミーテキストを用意してくれます。
↧