6/06の記録。三日坊主、脱ッ!! | 花男のブログ

花男のブログ

ほぼ日記みたいなもんです。

今日このvlogを書ききったら三日坊主を脱することができるぜ!うぇーいニヒヒ

YES、お察しの通りMidnightテンションスターです。ただ今の時刻は2:33。

安心してくだされ。我の場合、夕飯をいただいてShowerを浴びてから即就寝(18:00)で起床するのが2:00なので、8時間睡眠でほかの人よりもたくさん寝ています。ふとん1💤

 

では、本編へドウゾゲロー

 

========llllllllllllllllllll========

 

 

 暗記or慣れ?それともboth?

 

 

 

一冊ですべて身につくHTML&CSSとWebデザイン 入門講座      
1日目 6/5 2日目 6/6 3日目 6/7 4日目 6/8 5日目 6/9 6日目 6/10 7日目 6/11
ch.1 14~19pg ch.1 20~25pg ch.1 26~31pg ch.1 36~41pg ch.1 42~48pg ch.4 7 ch.5 5~8
ch.2 1~9 ch.2 10~14 ch.3 7~10 ch.3 11~14 ch.3 15~16 ch.5 1~4  
  ch.3 1~6     ch.4 1~6    
8日目 6/12 9日目 6/13 10日目 6/14 11日目 6/15 12日目 6/16 13日目 6/17 14日目 6/18
ch.5 9 ch.6 5~8 ch.7 1~3 ch.7 4~6 ch.7 7~9    
ch.6 1~4            

 

今日は2日目!基本的なコードを学んだぜ!

 

他の学校はどうだったか知らないが、我の中学校ではWEBサイト作りの基本は教わっているから今日は昨日ほどつまづかなかった。

 

でも、やはり暗記していないからかはたまた、数をこなしていないからか、進歩が感じられなくてあと数日したらやる気が一気にしぼむ予感...。

 

コードの暗記をしておいたほうが良いのかも後日調べて、伝えます!忘れていたらRemindして欲しい!

 

今日は

  1. 表を作成
  2. フォーム(お問い合わせ、会員登録の欄など)の作成
  3. 更にそれ↑↑の上位互換
  4. ブロック要素
  5. CSSファイルの作成&適用
  6. フォントのSize, Type, Thickness
  7. 行をより明瞭に設定
  8. Googleフォント等のWEBフォント使用法
そう、内容にはそれほど躓かなかった。
代わりに量が多すぎてGiveupしそうになってもうた。
 
~我のEffortとくとご覧ください~
 

 

表を作成

 

 

実際に打ったコード セル1と2を結合している。コメントアウトの仕方も知った。

 <table border="1"> <!-- CSSで学ぶが、表が見えるように加えただけ -->

            <tr>

                <th colspan="2">run go</th>

            </tr>

            <tr>

                <td>cool</td>

                <td>dog</td>

            </tr>

            <tr>

                <td>cool</td>

                <td>dog</td>

            </tr>

 </table>

 

出来た表↓↓

 

 

フォーム&上位互換

 

送信フォームに使用する要素=PHPなどのプログラムと連帯している...?

HTMLやCSSは入力部分の要素のみ作成できる

 

 

フォームにはいろいろな種類がありまして、テキスト(1行)、検索するときのテキストボックス、メールアドレス、電話番号、WebサイトのURLなどそれぞれ、のフォームのコードを見ながら作成した。

 

 

 

実際に打ったコード

<form action="example.php" method="post" name="contact-form">

            ここに部品が入ります。

        </form>

        <input type="radio" name="gender" value="男">男

        <input type="radio" name="gender" value="女">女

        <input type="radio"  name="gender" value="その他">その他

        <p> 好きな色</p>

        <input type="checkbox" name="color" value="赤" checked>赤

        <input type="checkbox" name="color" value="緑">緑

        <input type="checkbox" name="color" value="青">青

        <input type="submit" value="送信する">

        <input type="image" src="pic/123.jpg" alt="送信する">

        <p>血液型</p>

        <select name="bloodtype">

            <option value="A">A</option>

            <option value="B">B</option>

            <option value="o">O</option>

            <option value="AB">AB</option>

        </select>

        <input type="checkbox" name="travel" value="日本国内" id="japan">

        <label for="japan">日本国内</label>

        <input type="checkbox" name="travel" value="ヨーロッパ" id="europe">

        <label for="europe">ヨーロッパ</label>

 

 

プレビュー 画面

 

 

 

 

ブロック要素

 

長くなるので別の記事に書く!のちのちリンク張ります!!

 

 

 

CSSファイル

 

先日投稿したHTMLファイルの保存、作成の仕方と同様にした。そして、HTMLファイルと同じフォルダーの中に入れる。

 

 

 

基本のコードを記入し、背景の色、文字の色、フォントの大きさを実際に帰ることができた。

 

 

 

 

 

 

 

 

中途半端でごめん

 

 

 

 

 

 

 

 

 

Never give up?

oh, shut up.