目標

メモ帳アプリを作ること。

最終的な全体のイメージ図は、まだ固まっていませんが、以下サイトを参考にする予定。
https://mimemo.io/m/new

第1回目の完成度

htmlのコードは下記です。

memo.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>memo</title>
    <link rel="stylesheet" href="style01.css">
</head>
<body>
    <h1>memo</h1>
    <input type="text" placeholder="タイトル">
    <input type="text" placeholder="忘れないうちにメモる">
</body>
</html>

cssのコードは下記です。

style01.css

@charset "UTF-8";

h1{
    font-size: 50px;
    color: coral;
}

input{
    font-size: 3em;
}

学んだこと

文字が入力できる枠を作る

 <input type="text">

文字入力の枠内にグレーの文字を表示させる

placeholderタグを使用します。
placeholderタグの後には、表示させたい文字を入れます。

<input type="text" placeholder="タイトル">

別ファイルのcssを読み込む

css用のファイルを作成。
拡張子を.cssで保存することでcssのファイルを作ることができます。

htmlファイル内に、

<link rel="stylesheet" href="style01.css">

と入力。

私の場合であれば、memo.html内に入力します。

hrefの後は、作成したcssファイル名を指定します。

文字入力inputの枠を広げる

cssに

input{
    font-size: 3em;
}

と入力。

inputの場所は、変更したい場所を指定しています。

{}のカッコで囲って、font-sizeで枠を広げました。

次回以降やりたいこと

・「忘れないうちにメモる」の枠を「タイトル」枠よりも大きくする
・入力した文字を太文字にしたり、箇条書きで入力できるようにする