プログラミング

ブログで記録を残しておくと、後々自分の理解度のスピード確認にもなるので、まとめていこうと思います。

1日目tech academyの動画をyoutubeで見ながら、ひたすらHTMLコードを模写
2日目tech academyの動画をyoutubeで見ながら、ひたすらHTMLコードを模写
3日目tech academyの動画模写に疑問を感じる→progateに変更
4日目progate HTML CSS 初級編 2/3終了
5日目progate 初級編終了。中級編1/3終了

 

1日目

今日からHTMLの理解のため、youtubeを見ながら、理解度を進めていきます。

動画をみて、表示されるコードを「sublime text」と呼ばれる無料ツールダウンロードして、実際に超簡単なコードを作成していきます。

恐らく、内容的には小学生でも出来るレベルです。

  • 30歳のおっさんが何してんだ…
  • 今までの営業経験がここに生きるのか?

と超絶不安になりますが、まずはトライです!

学習時間2時間
累計時間2時間

HTMLとはなんぞや? からスタート

素人なので、動画を見ながら、実際にHTMLの世界を勉強していきます。

HTMLの動画だけで24本

CSSの動画で34本です

1本辺り、5分程の内容ですので、

5分x58本=290分 (5時間ぐらい)

2倍速の早送りだと更に時間を短縮させられますが、それだと頭に何も残らないので、動画の内容を実際に手を動かしながら確認していきますので、1本あたり最低でも10分はかかってます…

頭の回転が早い人は羨ましいです…

1日で学んだ事は限られますが、input outputは同時に行なっていきます

今日観て、実際にコードを打ってみた動画は以下の通りです。

HTMLとは何か?

HTMLとは?

Webブラウザに文字を表示させるための言語

その文章がどの様に書かれているのか伝える役割

HTMLはCSSなど、他のプログラミングと合わせて利用される

Web上では、単独で利用される事は少ない

HTMLファイルを作るためのルール

  • HTMLで書く
  • ファイル名の最後に[.html]をつける
  • テキストエディタで書く(動画では「sublime text」を推奨)

HTMLファイルの作り方

hello,world

マークアップ

youtu.be

HTMLとは?

HYper Text Markup Languageの略

  • 「どこから」「どこまで」「何があるのか」を伝える
  • 「ここから」「ここまで」という情報
  • 「ここには」「何がある」という情報

HTMLの書き方

  • タグ <> 半角英数字
  • 見出し(一番大きいもの)<h1>~</h1>
  • 段落 <p>~</p>

<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, duo in oratio saperet invidunt, nam ex appareat splendide. Eos eu animal fabulas expetendis, pro recteque voluptatibus id. Possit dictas nec ei. Hinc invenire sea in, odio adversarium sit id. Ad usu iudicabit molestiae.
</p>
<p>
Dolorum facilisis at per, ei alia ridens labores his. Te utroque intellegebat mediocritatem vel, ne pri mentitum expetendis, vel possit instructior ex. Vel ea ipsum philosophia, ne duo suscipit lobortis electram. Cu pri expetendis vituperata. Tollit soluta per ei, at natum urbanitas mea. Quo ea oratio officiis, pri eu nominavi eloquentiam.
</p>

HTMLの基礎構造

youtu.be

HTMLに必要なタグ

  • doctype このHTMLファイルがどの様なHTMLで書かれているかを伝える
  • html このタグの内側がHTMLの本文(内容)である事を伝える
  • head このHTMLファイルを解釈する上で必要な情報を書く場所
  • body このHTMLファイルの文書の内容

言語情報:lang="ja" 日本語で書かれている事を示す

よく使われるタグ

youtu.be

  • meta 文章の情報を伝える
  • tittle この文章のタイトルを伝える
  • div 一つの塊を示す
  • span 文章の一部を示す

<!doctype html>

<html lang="ja">

<head>

<meta charset="UFT-8">

<title>mypage</title>

</head>

<body>

<div>これは<div>dive</div>です</div>

<span>これはspanです</span>

</body>

</html>

 見出し・段落

youtu.be

  • P パラグラフの意味。段落
  • h1~h6 ヘッドラインの意味。見出し。合計6段階用意されている

Lorem Ipsum:意味がない文字の羅列。単語はどの言語も意味を持たない。デザインをチェックする際に利用する。Lipsumと呼ばれることがある

<!doctype html>

<html>

<head>

<meta charset="UFT-8">

<title>HTMLの練習</title>

</head>

<body>

<h1>これはh1です</h1>

<h2>これはh2です</h2>

<h3>これはh3です</h3>

<h4>これはh4です</h4>

<h5>これはh5です</h5>

<h6>これはh6です</h6>
<p>
Lorem ipsum dolor sit amet, duo in oratio saperet invidunt, nam ex appareat splendide. Eos eu animal fabulas expetendis, pro recteque voluptatibus id. Possit dictas nec ei. Hinc invenire sea in, odio adversarium sit id. Ad usu iudicabit molestiae.

</P>

<p>
Lorem ipsum dolor sit amet, duo in oratio saperet invidunt, nam ex appareat splendide. Eos eu animal fabulas expetendis, pro recteque voluptatibus id. Possit dictas nec ei. Hinc invenire sea in, odio adversarium sit id. Ad usu iudicabit molestiae.

</P>

<p>
Lorem ipsum dolor sit amet, duo in oratio saperet invidunt, nam ex appareat splendide. Eos eu animal fabulas expetendis, pro recteque voluptatibus id. Possit dictas nec ei. Hinc invenire sea in, odio adversarium sit id. Ad usu iudicabit molestiae.

</P>

</body>

</html>

 強調・重要性・区切り

youtu.be

  • em 強調を示す 斜体で表示される(強調された結果、斜体で表示される)
  • strong 重要性を示(重要だから太文字。太文字にしたいからStrongタグを使わないこと)
  • hr 区切り 単独で利用可能

<!doctype html>

<html>

<head>

<meta charset="UFT-8">

<title>HTMLの練習</title>

</head>

<body>

<h1>これはh1です</h1>

<h2>これはh2です</h2>

<h3>これはh3です</h3>

<h4>これはh4です</h4>

<h5>これはh5です</h5>

<h6>これはh6です</h6>
<p>
<em>Lorem ipsum</em>dolor sit amet, duo in oratio saperet invidunt, nam ex appareat splendide. Eos eu animal fabulas expetendis, pro recteque voluptatibus id. Possit dictas nec ei. Hinc invenire sea in, odio adversarium sit id. Ad usu iudicabit molestiae.

</P>

<hr>

<p>
<strong>Lorem ipsum</strong> dolor sit amet, duo in oratio saperet invidunt, nam ex appareat splendide. Eos eu animal fabulas expetendis, pro recteque voluptatibus id. Possit dictas nec ei. Hinc invenire sea in, odio adversarium sit id. Ad usu iudicabit molestiae.

</P>

<p>
Lorem ipsum dolor sit amet, duo in oratio saperet invidunt, nam ex appareat splendide. Eos eu animal fabulas expetendis, pro recteque voluptatibus id. Possit dictas nec ei. Hinc invenire sea in, odio adversarium sit id. Ad usu iudicabit molestiae.

</P>

</body>

</html>

引用

youtu.be

  • blockquote まとめて引用
  • q 一部を引用する
  • cite 引用元を表記する

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<tittle>HTMLの練習</tittle>
</head>
<body>
<blockquote cite="hrttps://www.example.com/story.html">
<p>
The quick brown fox jumped over the lazy dog. Then, the dog chased after the fox.
</p>
</blockquote>
<p>
ある人は言った <q cite-"https://www.example.com/philosophy.html">我思う故我あり</q>
</p>
</html>

2日目

学習時間1時間30分
累計学習時間3時間30分

略語・名前の特記・住所表現

  • abbr:略語である
  • title:略語の元の言葉を伝える
  • cite:名前を特記する
  • address:住所などの表現
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF=8">
  <title>HTMLの練習</title>
 </head>
 <body>
  <p>
    <abbr title="Hypertext Markup langauge">html</abbr>は勉強し続けるとわかるし、便利なものだ。
  </p>
  <p>
  私の好きな映画は<cite>ターミネーターです。</cite>
  </p>
  <p>
  何かあればこっちまで。<br>
   <address>
    東京都渋谷区○○一丁目2番3号<br>
    ○○ビル 5F
   </address>
  </p>
 </body>
</html>

HTMLの基礎構造

  • code:コンピューター用語であるという意味
  • br:改行 line breakの意味。単独利用可能
  • pre:入力した通りに表示させる
<!doctpye html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on. 
    </p>
    <p>
      思った通りに改行されないと、非常に読みづらくなります。<br>
      特に長い文章や、ニュース、ブログの記事だと、なお読みづらくなるでしょう。
    </p> 
    <pre>
      思った通りに改行されないと、非常に読みづらくなります。
      特に長い文章や、ニュース、ブログの記事だと、なお読みづらくなるでしょう。
    </pre>   
  </body>
 </body>
</html>

リスト項目

  • ol:順番の関わるリスト
  • ul:順番の関わらないリスト
  • il:リストの項目
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>HTMLの練習</title>
 <body>
  <ol>
    <li>1つ目</li>
    <li>2つ目</li>
    <li>3つ目</li>
     <ul>
      <li>1つ目</li>
      <li>2つ目</li>
      <li>3つ目</li>
      <li>4つ目</li>
      <li>5つ目</li>
     </ul>
    <li>4つ目</li>
    <li>5つ目</li>
  </ol>
 </body> 
</html>

定義リスト

  • dl:情報がセットになったリスト全体を示す
  • dt:情報の項目名
  • dd:情報の内容
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>HTMLの練習</title>
 </head>
 <body>
   <dl>
    <dt>質問1</dt>
    <dd>回答1</dd>
   </dl>
    <dl>
    <dt>質問2</dt>
    <dd>回答2</dd>
   </dl>
    <dl>
    <dt>質問3</dt>
    <dd>回答3</dd>
   </dl>
 </body>
</html>

アンカータグ

アンカータグとは、錨の意味。リンクの飛び先を指定する。

  • href:リンクの飛び先を指定するための属性
  • id:ページの中にあるある特定の部分について名前をつける
<!DOCTYPE html>
<html>
 <head>
   <meta charset="UFT-8">
   <title>HTMLの練習</title>
 </head>
 <body>
  <a href="https://www.google.co.jp">mylink</a>  
  <br><br><br><br><br><br><br><br>
  <a href="#index">mylink</a>  
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <p id="index">ここはindexというidがついた場所です</p>
 </body>
</html>

相対パスと絶対パス(HTMLのリンク)

パス

Path:道・通り道

相対パス:今いる場所を基準にして相手がどこにいるかを伝える書き方

今いる場所にある他のファイル:ファイル名

今いる場所のフォルダ:フォルダ名/ファイル名

今いる場所の1階層上にあるファイル:../ファイル名

1階層上:../ファイル名

2階層上:../../ファイル名

絶対パス

相手がどこにいるかを確実に耐える書き方=URL

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>HTMLの練習 sub</title>
 </head>
 <body>
   <p>このページはsubです。</p>
   <a href="../index.html">index</a>
   <a href="../test.html">test</a>
 </body> 
</html>

3日目

前回までの学習3時間30分
今回の学習時間1時間
累計の学習時間4時間30分

画像

  • img:画像を貼り付けるタグ 単独で使われるタグ

「ここからここまで」のスタイルではない

  • alt:画像がどんな物なのかを伝える

読み上げブラウザでは、画像の代わりに読み上げられる文章

  • title属性
  • 画像のタイトルを伝える
  • 画像の上でマウスカーソルをしばらく置くと表示される

動画通りに、HTMLをタイプしていきます。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>HTMLの練習</title>
 </head>
 <body>
  <p>写真</p>
  <img src="入道雲.png" alt="入道雲の写真" title="入道雲">
 </body>
</html>

うん、ここまではOKです。

ファイルを読み込むためのリンクとスクリプトタグ

#Linkタグ

スタイルシートを読み込む時に使う (ページの表示方法を決める)

Faviconを読み込む時に使う

favorite + icon

#scriptタグ

JavaZScriptを読み込む時に使う

JavaScriptを書く時に使う

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>HTMLの練習</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="shortcut icon" type="image/png" href="icon.png">
  <script type="text/javascript" src="javascript.js"></script>
  <script type="text/javascript">
    ここにJacascriptを記述
  </script>
 </head>
 <body>
 </body>
</html>
感想
リッチテキストを書けるようになります!と動画で紹介されていますが、これが、実際に今後どう役立つのか?全然イメージができません^^;現状、ただ、動画を見ながらHTMLをタイピングしている状態です。恐らく、あとで、ここで学んだ意味を理解できるんでしょうね…パズルのピースも、一個じゃ意味をなさないけど、複数あると大きな絵が完成する!的な

Iframe

#iframe

#iframeタグ

iframe:インラインフレーム

特定のファイルを、ページの一部に表示させる

-src属性:表示させるファイルの場所を指定する

-width属性:インラインフレームの幅を指定する

-hight属性:インラインフレームの高さを指定する

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>HTMLの練習</title>
 </head>
 <body>
   <p>
    これはidex.htmlの内容です。<br>
    この下にiframeを利用して別ページの内容を表示させます。
   </p>
   <iframe src="iframe.html" width="200" hight="100">
    このページはifrmae対応ブラウザでご覧ください。
   </iframe>
 </body>
</html>
感想
iframeの使い方でした。ただコピーしているだけなので、これを暗記して、自分で使えるようになると、後でパズルを組み合わせる時に便利になるのでしょうね! 何も見ないでIframeのサンプルを作ってみました。出来た時、お〜なるほど!と納得。次の講義に進みます! iframeで何が出来るんだ?と疑問でしたが、実際手を動かしてみると、??だった部分が解消され、案外スムーズにいけました

コメント

##コメントとは

プログラミングなどで、読み替えする時に内容を分かりやすくする

プログラムではない表記=実行・反映されない部分

-コメントアウト

プログラムの一部をコメントアウトすることによって、その動作をスキップさせることが出来る

-デバッグで使用されるコメントの利用法

htmlに置けるコメントの書き方

<!--ここにコメント-->

んー、ここでふと疑問。

これ、身についてない。

単に写経しているだけで、最初のやつ忘れてる…。動画見るだけじゃダメだ。

もうちょい実践的に自分でタイピングする勉強法を考えます。

4日目

 

前回までの学習4時間30分
今回の学習時間1時間30
累計の学習時間6時間

Prograte

昨日今日で、初級編の2/3が終了しました。

先日までは、Youtubeで動画を見るだけだったのですが、実際に手を動かしてみたい!という欲求が強かったので、Progateに変更。

ゲーム感覚で勉強できています。

ここまで余裕でしたが、一気に本格的になり手こずり始めました。

これからは、覚えたタグをどこでどんな風に使うのか、頭で考えながら前に進む感じですね!

う〜、頭から煙が出ていますw

明日も頑張ります。

5日目

本格的にサイトデザインに入っています。

課題に沿っているだけなので、なんとか行けますが、自由にやって下さい!と言われた時に、どの程度対応できるのか…不安しかないです。

前回までの学習6時間
今回の学習時間2時間
累計の学習時間8時間

やっとスタートラインに立てた

今日でprogateの初級編を完了させました。

  • 正直、コードを丸暗記している感じで、なんのために使うんだ?
  • この勉強方法じゃダメだろう

このまま初級編→中級編→上級編と進んでも時間の無駄な感じが凄かったで、再度ググりました。

で、見つけたのが、30日の勉強方法がある程度確立されている無料プログラム。(正式には5,000円ほど教材費でかかりますが)

https://www.engineer-step.com/entry/site-seisaku-matome

これなら、丁度いい流れで勉強できそうです。

あー5日目にしてようやく形になってきた感じがします。

  1. マナブさんのブログ見て、コーディング始めようと思った
  2. 紹介されているyoutube動画を見て、そのまま模写(なんか違和感)
  3. progateにたどり着いて、ひたすら模写(これも、少し違和感)
  4. しょーへーさんのに辿り着いて、これだ!!とハイテンション。

ここにたどり着くまで5日も掛かり、遠回りしたかな?と反省する反面、基本的なHTMLの構造は勉強できたので良かったです。

明日からは、のday3から始める予定です。

この勉強法が自分に合っているかは、まだ分かりませんが、出会えるまで1ヶ月は本気で動く予定です^^

30歳妻子持ちコーディング未経験の文系男子、さて、どこまで行けるか? 自分でも楽しみです。

メモ

    僕が引っかかった箇所をまと目ています。

    <h3>タイトル</h3>

    この中にclassを設定しようって課題ですが、

    <h3 class="section-title">学べるレッスン</h3>が正解。

    これなに? > しかないぞ?

    【<></>】このイメージなので混乱中。お勉強します。

    はい、解決。

    頭の中:<h3>class="section-title">学べるレッスン</h3>と思ってました。

    実際:<h3class="section-title">学べるレッスン</h3>

     

    関連広告

    Twitterでフォローしよう