HTML入門:ゼロから始める最初の一歩

アイキャッチ画像 HTML/CSS入門

はじめに

私がプログラミングに初めて触れたのはProgate。かわいいクマのキャラクターと楽しみながら一つ一つコードの書き方を勉強していきました。ただ、先に進むのが面白くて説明文を丁寧に読むということを怠ったため、なんとなーくの理解でどんどん先に進んでいきました。結果、理解が追い付いていないまま無料プランは制覇、、、。一通りのことは学べたと転職面接で言える材料にはなりました。しかしこれで入社すると現場で困ります!!!!!!!!(断言)

この記事でできるようになること

この記事を起点に一つ一つ手を動かしながら学んでいくと、あなたは自分のウェブページを1つ作れるようになります。HTMLとCSSという2つの道具を使って、実際に手を動かしながら学んでいきましょう。

HTMLって何?まずは「骨格」を作ってみよう

HTMLはウェブページの「骨格」を作る言語です。まずは以下のコードをコピー(学習中は実際にコードを書いてみること(プログラミング学習界隈ではこれを写経と言います)をお勧めします。コピペすると理解はできるけど実際に自分のものになった実感がわきにくいので)して、メモ帳(またはテキストエディタ)に貼り付けてみてください。

はじめはメモ帳で十分です!まずは書いてみることが大事。VSCodeで初めから挑戦すると「なんだこれは」状態になって挫折してしまう危険性も。慣れるまで一歩ずつが継続のコツです。できればこのサイトを左に、メモ帳を右にのに画面構成がおすすめです!以下のコードを記述してみましょう!

<!DOCTYPE html>
<html>
  <head>
    <title>私のはじめてのページ</title>
  </head>
  <body>
    <h1>こんにちは!</h1>
    <p>これが私のはじめてのウェブページです。</p>
  </body>
</html>
見本コード(わからなかったらコピーしてOK!)
<!DOCTYPE html> <html> <head> <title>私のはじめてのページ</title> </head> <body> <h1>こんにちは!</h1> <p>これが私のはじめてのウェブページです。</p> </body> </html>
チャレンジ
一から書いてみよう!
見本を見ながらでOKです。自分の手でコードを入力してみましょう。DOCTYPE・html・head・title・body・h1・p これらのタグを使って完成させてください!
ここに入力してみよう
プレビュー(リアルタイム)

コメント

タイトルとURLをコピーしました