【11日目】詳細CSS基礎文法編#15まで来た。RGBが登場してデザインっぽくなってきた
おはようございます。
本日は、詳細CSS基礎文法編#15まで来ました。
入力をして覚える事柄以外に、概念として知識として覚えておく内容を1レッスンで紹介してくれている場合も多く。33レッスンとボリュームがありますが、キーボードを叩かないレッスンも頻繁にあるイメージ。
本日は、line-heightやvertical-align、RGBなどを学習しました。
進むのはうれしいんだけど、やったことを簡単に忘れる。
復習しながら、ゆっくりと進もう。
h1{
color: red;
font-size: 48px;
text-align: center;
font-weight: normal;
text-decoration: line-through;
}
p{
font-weight: bold;
text-decoration: underline;
}
a{
text-decoration: none;
}
/* 10 */
P{
font-size: 16px;
line-height: 48px;
background-color: pink
;
}
/* 11 */
main{
font-size: 32px;
/* line-height: 2em; */
line-height: 2;
}
section{
font-size: 16px;
}
/* 12 */
p{
line-height: 5;
background-color: pink;
}
img{
vertical-align: bottom;
}
5月10日にバージョンアップした自分に会いに行きます
会社やらライティングやらもあるので、今のところドットインストールに当てる時間は一日30分と決めている。
これを見てもわかるように、この講座全部が終わるには100レッスンぐらいある。
毎日３～５レッスンづつ進んでいるので、毎日順調に進んだとしてひと月後、バージョンアップしたオヤジになれる、ということだろうか。
5月10日にはhtml/cssをひと通り学習した自分に会いに行くぞ。
【9日目】「詳細HTMLフォーム部品編」復習からつまづく
昨日から始まった「詳細HTMLフォーム部品編」
毎日前日の復習をしてから、新しい講座に進むのですが、本日の30分は昨日の復習で終わってしまいました。
入力フォームで選択をする際に、はじめから数行表示させるためにsizeを使いますが、それがなくてもmultipleを入力しておくと4行表示されているのはなぜでしょう？
今日はここに悩み、質問をしてみました。
やったこともすぐ忘れるから、基礎文法編も一度、復習しないとだな。
<label for="color">好きな色</label>
<select id="color" multiple>
<option>色1</option>
<option>色2</option>
<option>色3</option>
<option>色4</option>
<option>色5</option>
<option>色6</option>
<option>色7</option>
</select>
【8日目】「詳細HTML」フォーム部品編、はじまる
さて、今日からのドットインストールは、「詳細HTMLフォーム部品編」です。
今日はさまざまな入力フォームを作成しました。
毎日、新しいことができるようになるドットインストール、スゴイ！
#1-#3まで
- 一行テキスト
- パスワード入力
- 複数行テキスト
- 一行テキストに名前ラベルをつける
- ドロップダウンリストをつくる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="disciption" content="ドットインストール">
<title>ドットインストール</title>
</head>
<body>
<input type="text" placeholder="otokatsu">
<br>
<input type="password">
<br>
<textarea></textarea>
<textarea>hello</textarea>
<br><br>
<!-- <label for="name">名前</label>
<input type="text" id="name"> -->
<label>名前<input type="text"></label>
<br><br>
<label for="color">好きな色</label>
<!-- <select id="color" size="4" multiple> -->
<select id="color">
<option>色1</option>
<option>色2</option>
<option>色3</option>
<option selected>色4</option>
<option>色5</option>
<option>色6</option>
</select>
</body>
</html>
【7日目】「詳細HTML」基礎文法編おわり
今日はドットインストールを見ずに、この基礎文法編で習ったことを、記憶だけで書いてみた。
毎日同じコードを書いているので、記憶していることも多かったが、head部分など記憶が曖昧な部分は、またあしたも書いてみる。
今日でいったん、「詳細HTML基礎文法編」おわり。
明日からは、「詳細HTMLフォーム部品編」に入る。
楽しみだ。
【6日目】詳細HTML基礎文法編#15-#19文章の構造をマークアップしてみよう
今朝は、「詳細HTML基礎文法編」を#1から復習。
やはり、表の作り方がスラスラ行かなかったので、自分で表を作ってみた。
#15-#19は、リンク（外部、内部）と文章の構造マークアップ
とくに悩むところはなかった。
ショートカットキーは使い慣れるしかないのだけど、Visual Studio Codeで行をいっぺんに右左に動かすショートカットキーに悩む。Shift+tabで左に動くんだね。
この講座は#22までなので、もう少しだ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="discription" content="プログラミング学習サービスのドットインストールです">
<title>ドットインストール</title>
</head>
<body>
<header>
</header>
<main>
<h1>ドットインストール</h1>
<p>プログラミングサービスの<a href="http://shukatsu-blog.online" target="_blak">ドットインストール</a>です。『<a href="members.html">メンバー紹介</a>』と『<a href="lessons/index.html">レッスン一覧</a>』もご覧ください。</p>
<nav>
<ul>
<li><a href="#about">このサービスについて</a></li>
<li><a href="#tokucho">主な特徴</a></li>
<li><a href="#use">使い方</a></li>
<li><a href="#question">よく聞かれる質問</a></li>
</ul>
</nav>
<section>
<h1 id="abount">このサービスについて</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</section>
<section>
<h1 id="tokucho">主な特徴</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<ul>
<li>すごい</li>
<li>つよい</li>
<li>やばい</li>
</ul>
<ol>
<li>動画を見る</li>
<li>コードを書く</li>
<li>コードを改造する</li>
</ol>
<dl>
<dt>質問A</dt>
<dd>回答A</dd>
</dl>
<table>
<thead>
<tr>
<th>年</th>
<th>出来事</th>
</tr>
</thead>
<tbody>
<tr>
<td>1964</td>
<td>生まれる</td>
</tr>
<tr>
<td>1999</td>
<td>鹿児島</td>
</tr> <tr>
<td>2018</td>
<td>成田</td>
</tr>
</tbody>
</table>
</section>
<section>
<h1 id="use">使い方</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</section>
<section>
<h1 id="question">よく聞かれる質問</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</section>
</main>
<aside>
<h2>広告です</h2>
<p>広告です広告です広告です広告です広告です広告です広告です広告です広告です</p>
</aside>
<footer>
<p><a href="#">先頭に戻る</a></p>
</footer>
</body>
</html>
