プロデミア

CSS_メモ帳を作成してみよう！

07メモ帳を作成してみよう！

ここまで学んだことを使い以下の画像のようなメモ帳を作成します。

※予定の登録処理等は他の言語の研修で行います。

7-1 ファイルを作成する

Lesson3_CSSフォルダに「memo_css」というフォルダを作成しましょう。

その後以下の画像のようにファイルを作成しましょう。

7-2 HTMLを記述する

まずはHTMLのひな形を作成します。

VSCode「！＋tab」もしくは「html:5」と入力すると自動でひな形を作成してくれます。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
</html>

上記のように表示されていたらOKです。

今のままだと、lang=”en”やタイトルが「Document」になってしまっているので変更します。

以下のように書き換えてください。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>メモ帳</title>
</head>
<body>
</body>
</html>

書き換えた場所は２か所になります。

  1. lang=”en” ⇒ lang=”ja”
  2. <title>Document</title> ⇒ <title>メモ帳</title>

変更できたらindex.htmlをブラウザで開いてみましょう。

上記の画像のようにタブの名前が「メモ帳」と表示されていたらOKです。

まだなにも記述していないので、画面は真っ白になっています。

では、実際にHTMLを書いていきましょう。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>メモ帳</title>
</head>
<body>
    <div class="container">
        <div class="memo_area">
            <div class="memo_form">
                <h2>メモを追加</h2>
                <form action="">
                    <input class="memo_text" type="text" name="" id="">
                    <input type="submit" value="追加">
                </form>
            </div>
            <div class="memo_show">
                <div class="memo_item">
                    <div class="memo_title">
                        <time>2022.10.10</time>
                        <p>サッカー</p>
                    </div>
                    <div class="btn_area">
                        <div class="edit_form">
                            <form action="">
                                <input type="submit" value="編集">
                            </form>
                        </div>
                        <div class="del_area">
                            <form action="">
                                <input type="submit" value="削除">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="memo_item">
                    <div class="memo_title">
                        <time>2022.10.10</time>
                        <p>大阪旅行</p>
                    </div>
                    <div class="btn_area">
                        <div class="edit_form">
                            <form action="">
                                <input type="submit" value="編集">
                            </form>
                        </div>
                        <div class="del_area">
                            <form action="">
                                <input type="submit" value="削除">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="memo_item">
                    <div class="memo_title">
                        <time>2022.10.10</time>
                        <p>メモ内容</p>
                    </div>
                    <div class="btn_area">
                        <div class="edit_form">
                            <form action="">
                                <input type="submit" value="編集">
                            </form>
                        </div>
                        <div class="del_area">
                            <form action="">
                                <input type="submit" value="削除">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

画面を読み込んでみると以下の画像のように表示されるはずです。

このままでは見にくく使いにくいメモ帳になってしまいます。

見た目を装飾するためにここからCSSを追加していきます。

まずはCSSファイルを読み込みます。

最初にcssフォルダの中にstyle.cssを作成しました。作成済のstyle.cssを読み込ませてみましょう。

HTMLのheadタグの最後に以下のコードを追記してください。

<link rel="stylesheet" href="./css/style.css">

次から実際にCSSを記述していきます。

7-3 CSSを記述する

まずはCSSが本当に読み込まれているか確認してみましょう。

style.cssに以下のコードを記述してください。

body{
    background-color: #edf2f4;
}

記述できたら画面を再読み込みしてみましょう。

全体の背景色が薄い灰色になれば無事にCSSファイルが読み込まれています。

※他の確認方法

デベロッパーツールを開いた後「source」をクリックしてみましょう。

ここでファイル構造を確認し、cssフォルダの中にstyle.cssがあれば無事に読み込まれています。

ここから実際にCSSを記述していきます。

まずはメモを追加するフォームから作成していきます。

以下のコードをstyle.cssに追加してください。

.container{
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
}
.memo_area{
    display: flex;
    justify-content: space-between;
}
.memo_form{
    text-align: center;
    width: 40%;
}
.memo_form input[type="submit"]{
    border-radius: 5px;
    border: none;
    padding: 5px 20px;
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}
.memo_form h2{
    text-align: center;
}
.memo_text{
    display: block;
    margin: 0 auto 15px;
    border: none;
    height: 20px;
}

メモ追加エリアが出来上がりました。

CSSの解説をします。

まず以下の部分

.container{
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
}

ここでは最大横幅を設定しています。

ページの横幅はデバイスによって変わります。

画面が小さくなる場合はメディアクエリで設定できますが、大きくなり超横長画面でもデザインを崩さずに表示させる必要があります。

さらに、横幅をそろえることでサイトに統一感を出すこともできます。

.memo_area{
    display: flex;
    justify-content: space-around;
}

次に上記の部分です。

display: flex;でメモ入力部分とメモ内容表示部分を横並びにしています。

justify-content: space-around;で横並びにした要素の間隔を均等にしています。

もし忘れている場合は「フレックスボックス」の部分を見直してみましょう。これがない場合は要素が左寄りになってしまいます。

.memo_form input[type="submit"]{
    border-radius: 5px;
    border: none;
    padding: 5px 20px;
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}

続いて上記の部分についてです。

まず、セレクタのinput[type="submit"]ですが子孫セレクタに特定のインプットタグ等も指定することもできます。

ここではinputタグでtypeがsubmitである要素を指定することができます。他にもinput[name=”mail”]などのname属性を指定することが可能です。

ではCSSの中身についての解説です。

border-radius: 5px;で「追加ボタン」の四隅を丸にしています。

border: none;では「追加ボタン」の枠線を消しています。消さなくても問題ないですが初期デザインでは少し古っぽくなるので今回は削除します。

これで「追加ボタン」のCSSは完成です。最後に以下の部分です。

.memo_text{
    display: block;
    margin: 0 auto 15px;
    border: none;
    height: 20px;
}

display: block;とmargin: 0 auto 15px;でテキストエリアを真ん中にしています。

ブロック要素に対してmargin: auto;を設定することで要素を真ん中にすることができます。

注意しないといけないのは「ブロック要素」であることです。インライン要素では真ん中にはなりません。他にはdisplay: flex; と justify-content: center;を組み合わせることで要素を真ん中にそろえることができます。

続いて以下のCSSをstyle.cssに追記してください。

.memo_item{
    background-color: #fefefe;
    display: flex;
    width: 100%;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 5px;
}
.memo_title{
    width: 90%;
}
.memo_title p{
    margin: 0;
}
.memo_title time{
    font-size: 10px;
}

.memo_itemのdisplay: flex;ですが、HTMLの親要素に対して設定することで「memo_title」「btn_area」クラスを横並びにしています。

<div class="memo_item">
    <div class="memo_title">
        <time>2022.10.10</time>
        <p>サッカー</p>
    </div>
    <div class="btn_area">
        <div class="edit_form">
            <form action="">
                <input type="submit" value="編集">
            </form>
        </div>
        <div class="del_area">
            <form action="">
                <input type="submit" value="削除">
            </form>
        </div>
    </div>
</div>

display: flex;を設定する前

display: flex;を設定した後

横並びになりましたね。

display: flex;は横並びにしたい要素の親要素に対して指定します。

最後に以下のCSSをstyle.cssに追記してください。

.btn_area{
    display: flex;
    justify-content: center;
    align-items: center;
}
.edit_form{
    margin-right: 10px;
}
.edit_form input,
.del_area input {
    border-radius: 5px;
    padding: 5px 12px;
    border: none;
}
.memo_form input[type="submit"]:hover,
.edit_form input:hover,
.del_area input:hover{
    opacity: .8;
}
.edit_form input{
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}
.del_area input{
    background-color: #d64045;
    color: #fefefe;
    font-weight: bold;
}

まずは下記の部分についてです。

.btn_area{
    display: flex;
    justify-content: center;
    align-items: center;
}

display: flex;で横並びにした後、justify-content: center;とalign-items: center;で要素が縦横真ん中にくるように設定します。justify-content: center;で要素を横真ん中に、align-items: center;で要素を縦真ん中に設定しています。

最後に下記の部分ですが、「追加」「編集」「削除」ボタンがホバーされたとき（マウスが要素に乗った時）透明度を「0.8」にしています。「.8」は「0.8」という意味です。

.memo_form input[type="submit"]:hover,
.edit_form input:hover,
.del_area input:hover{
    opacity: .8;
}

これでようやくメモ帳らしくなりました！

CSSのプロパティを暗記するより、横並びにするにはどうしたらいいか？要素を真ん中にするにはどうCSSを組み合わせたらいいか？を理解するようにしましょう。

以下全体のCSSです。

body{
    background-color: #edf2f4;
}
.container{
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
}
.memo_area{
    display: flex;
    justify-content: space-between;
}
.memo_form{
    text-align: center;
    width: 40%;
}
.memo_form input[type="submit"]{
    border-radius: 5px;
    border: none;
    padding: 5px 20px;
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}
.memo_form h2{
    text-align: center;
}
.memo_text{
    display: block;
    margin: 0 auto 15px;
    border: none;
    height: 20px;
}
.memo_show{
    width: 60%;
}
.memo_item{
    background-color: #fefefe;
    display: flex;
    width: 100%;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 5px;
}
.memo_title{
    width: 90%;
}
.memo_title p{
    margin: 0;
}
.memo_title time{
    font-size: 10px;
}
.btn_area{
    display: flex;
    margin: auto;
}
.edit_form{
    margin-right: 10px;
}
.edit_form input,
.del_area input {
    border-radius: 5px;
    padding: 5px 12px;
    border: none;
}
.memo_form input[type="submit"]:hover,
.edit_form input:hover,
.del_area input:hover{
    opacity: .8;
}
.edit_form input{
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}
.del_area input{
    background-color: #d64045;
    color: #fefefe;
    font-weight: bold;
}

投稿日

カテゴリー:

投稿者:

prodemia-admin-user

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です