プログラミング初心者です。
開発の備忘録として書いています。
HTML・CSSを初めて勉強する人で何から手をつけていいかわからない方向けです。
私も初心者なので、間違っている点があると思いますが、ご了承ください。
目標
メモ帳アプリを作ること。
最終的な全体のイメージ図は、まだ固まっていませんが、以下サイトを参考にする予定。
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で枠を広げました。
次回以降やりたいこと
・「忘れないうちにメモる」の枠を「タイトル」枠よりも大きくする
・入力した文字を太文字にしたり、箇条書きで入力できるようにする