こんにちは。KOUKIです。
本記事は、以下で学んだアプリケーションの「スタイル」に関する記事です。
demoもあります。
JavaScriptの学習がメインなのですが、要素が真ん中よりにスタイリングされているのをみて、他にも応用ができそうなので、記事にしました。
HTMLのソースコード
一応、HTMLのソースコードを載せておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
</html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>Hidden Search</title> </head> <body> <div class="search"> <input type="text" class="input" placeholder="Search..."> <button class="btn"> <i class="fas fa-search"></i> </button> </div> </body> </html> |
スタイルを適用していない場合は、以下のようになっています。
要素がページの左上に配置されていることがわかりますね。これを中央に配置したいと思います。
要素をページ中央に配置する
ステップ1: display: flexで横並びにする
display: flexは、ある要素に定義するだけでその直下の要素が並列になる便利なスタイルです。
|
1 2 3 |
body { display: flex; } |
これだけだと要素に変化はありませんが、これから使うプロパティを有効にするために必須の設定です。
ステップ2: align-items: centerでページの縦軸中央に配置する
「align-items: center」を使うと要素をページの縦軸から見て中央に配置します。
|
1 2 3 4 5 |
body { display: flex; align-items: center; } |
これは、「display: flex」が設定されていないと適用されないので、注意してください。
ステップ3: justify-content: centerでページの横軸中央に配置する
「justify-content: center」を使うと要素をページの横軸から見て中央に配置します。
|
1 2 3 4 5 6 |
body { display: flex; align-items: center; justify-content: center; } |
これも「display: flex」が設定されていないと適用されないので、注意してください。
おわりに
私の感覚だと「display: flex」は、BootStrapのグリッドシステムに近いものですね。※詳しくは、以下の記事を参考にしてください。
現場でも要素を真ん中よりにしたいなぁと思うことはありますので、参考にしていただけたら幸いです。
それでは、また!
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。