こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、CSSでコンテンツボックスのスタイリング方法を学習しました。
demoは、「こちら」で確認できます。
JavaScript版
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
HTML&JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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="style.css" /> <title>Dad Jokes</title> </head> <body> <div class="container"> <h3>Don't Laugh Challenge</h3> <div id="joke" class="joke">// Joke goes here</div> <button id="jokeBtn" class="btn">Get Another Joke</button> </div> <script src="script.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// 要素を取得 const jokeEl = document.getElementById('joke') const jokeBtn = document.getElementById('jokeBtn') // クリックイベントを登録 jokeBtn.addEventListener('click', generateJoke) // ジョークを作成 generateJoke() // 非同期処理であることを示すasyncを関数宣言の前につける async function generateJoke() { const config = { headers: { Accept: 'application/json', }, } // fetchでAPIを叩く // promiseが返却されるまでまつ const res = await fetch('https://icanhazdadjoke.com', config) // resにデータが格納されるまで待つ const data = await res.json() // ページ上に取得データを表示する jokeEl.innerHTML = data.joke } |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイリング
CSSでスタイリングをします。項目に出てくるbodyやcontainerは、HTML要素です。
全体の設定
|
1 2 3 4 5 6 7 8 9 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* ボックスの大きさを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } |
body
bodyのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
body { background-color: #686de0; font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flexの交差軸中央にアイテムを配置 */ align-items: center; /* flexアイテムを中央に配置 */ justify-content: center; /* ページviewに対して100%の高さにする */ height: 100vh; /* 縦スクロールを消す */ overflow: hidden; margin: 0; padding: 0; } |
container
containerのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.container { background-color: #fff; /* 枠を丸く */ border-radius: 10px; /* ボックスに影をつける */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); /* 上下 | 左右 */ padding: 50px 20px; /* テキストを中央へ */ text-align: center; /* 最大横幅100% */ max-width: 100%; width: 800px; } |
h3
h3のスタイリングをします。
|
1 2 3 4 5 6 7 |
h3 { margin: 0; /* 要素の透過性 */ opacity: 0.5; /* 文字間のスペース */ letter-spacing: 2px; } |
joke
jokeのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 |
.joke { font-size: 30px; /* 文字間のスペース */ letter-spacing: 1px; /* 行の高さ */ line-height: 40px; margin: 50px auto; max-width: 600px; } |
btn
btnのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.btn { background-color: #9f68e0; color: #fff; border-radius: 10px; /* 影をつける */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); padding: 14px 40px; font-size: 16px; /* カーソルをポインタnする */ cursor: pointer; } /* ボタンをクリックした時 */ .btn:active { /* ボタンを小さくして、押した感を出す */ transform: scale(0.98); } /* ボタンをクリック後 */ .btn:focus { /* ボタンを押した時に出る青い線を非表示 */ outline: 0; } |
これで、完成です。
おわりに
自分で言うのもなんですが、本記事のようにCSSコードとその結果(画像)を出してくれる記事があると非常に参考になりますね^^
自分でも後で見直して、アプリ開発の参考にしてます。スタイリングを自由自在に設定できるようになりたいですね。
それでは、また！
CSSまとめ
CSSソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* ボックスの大きさを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } body { background-color: #686de0; font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flexの交差軸中央にアイテムを配置 */ align-items: center; /* flexアイテムを中央に配置 */ justify-content: center; /* ページviewに対して100%の高さにする */ height: 100vh; /* 縦スクロールを消す */ overflow: hidden; margin: 0; padding: 0; } .container { background-color: #fff; /* 枠を丸く */ border-radius: 10px; /* ボックスに影をつける */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); /* 上下 | 左右 */ padding: 50px 20px; /* テキストを中央へ */ text-align: center; /* 最大横幅100% */ max-width: 100%; width: 800px; } h3 { margin: 0; /* 要素の透過性 */ opacity: 0.5; /* 文字間のスペース */ letter-spacing: 2px; } .joke { font-size: 30px; /* 文字間のスペース */ letter-spacing: 1px; /* 行の高さ */ line-height: 40px; margin: 50px auto; max-width: 600px; } .btn { background-color: #9f68e0; color: #fff; border-radius: 10px; /* 影をつける */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); padding: 14px 40px; font-size: 16px; /* カーソルをポインタnする */ cursor: pointer; } /* ボタンをクリックした時 */ .btn:active { /* ボタンを小さくして、押した感を出す */ transform: scale(0.98); } /* ボタンをクリック後 */ .btn:focus { /* ボタンを押した時に出る青い線を非表示 */ outline: 0; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。