\n実際に手を動かして勉強しよう！\n
\n\nプログラミングを学習する方法を紹介していきたいと思います。
\n前回では、調べ方を紹介しました。\n今回は実践編です。まずは習うより慣れろです。\n
\n現役プログラマー。この道 15 年ですが、まだまだ現役を続けたいと思っています。\nバックエンドを担当していますが、たまにフロントを少しだけお手伝いします。\n
\n\nCodepenは無料でHTML/CSS/Javascript編集、実行できるWebサイトです。\n
\n\n初心者の方が最初につまづくものとして、環境のセットアップがあります。しかし、Codepanを使えば煩わしいセットアップはありません。\nとりあえずプログラミングを体感するのが目的な場合はCodepenが最適だと思います。\n
\n\n注意点として、Codepenで一生懸命コードを書いてもそのままWebサイトができるわけでありません。\nWebサイトを立ち上げる場合はプログラミング以外に色々とやらなけれいけません。Codepenでは、あくまでプログラミングを体感する、コードの動作を確かめたい場合に利用して下さい。\n
\n\n\n画面右上にあるSign Upからアカウントを作成して下さい。\n
\n\nまずはログインしてから画面左のメニューのPenをクリックして下さい。\n
\n\nすると以下の画面が表示されます。\n
\n\n下の画面にHello Worldと表示されたと思います。\n
\n\nHTMLとはHyperText Markup Languageの意味です。厳密にいうとHTMLはプログラミング言語ではありません。\n
\n\nHTMLとはコンピュータが理解できるように、文章にタグをつけて意味をもたせる、というものです。\nこれだけだと意味が分からないと思います。\n
\n\nコンピュータは人間と違って、人間の言葉が理解できません。\nそこで、どの文章がタイトルで、どの文章がリストで、などを記述してあげる必要があります。そして、コンピュータはそのタグを元に表示を変えたりします。ちなみに、SEOにとっても重要になってきますが、それは別の記事で紹介します。\n
\n\n例えば先程の例では以下のように入力しました。\n
\n<h1>Hello World</h1>\nさて、h1というのは見出しです。h1〜h6まであります。1が一番大きく、6が一番小さい見出しです。\n新聞だと一面にデカデカと記載される見出しが、htmlで言うところのh1です。\n
\n\nタグはたくさん種類があります。例えば、\n
\n\nなどです。他にも大変多くのタグが存在しますが、一度に全部覚える必要はありません。一つずつ覚えていきましょう。\n
\n\nでは、以下の文章を先程のCodepenの画面に打ち込んで見て下さい。\n
\n今日は若干冷えますね。
\nええ、すっかり冬になりました。
明日は雪のようです。
明日これを仕入れたいのですが。在庫はありますか？
\nええ、ありますとも。
`, `71982181258223510000`)\"\n >\n<h1>Hello World</h1>\n<p>今日は若干冷えますね。</p>\n<p>ええ、すっかり冬になりました。<br/>明日は雪のようです。</p>\n<p>明日これを仕入れたいのですが。<strong>在庫はありますか？</strong></p>\n<ul>\n <li>醤油</li>\n <li>みりん</li>\n</ul>\n<p>ええ、ありますとも。</p>| タグ | \n説明 | \n
|---|---|
| p | \nパラグラフを意味します。つまり段落です。意味のある塊を表現したい場合に使います。 | \n
| br | \n改行を意味します。pタグの中で意図的に改行する時はbrタグを使用します。 | \n
| strong | \n強調したい文字がある時に使用します。 | \n
| ul/li | \nリストを表現したい時に使用します。 | \n
\nこのように、コンピュータに分かるように、文章に意味を持たせることができます。\n近年は、SEO対策でこれらのタグを使い分ける、という意味の方が大きいかもしれません。\n
\n\nというのも、単純に見た目だけをきれいにするのであれば、CSSを利用することで可能だからです。\nCSSについては次回紹介します。\n
","frontmatter":{"title":"独学でプログラミングを勉強する方法。HTML編。(第三回)","date":"February 02, 2021","description":"Codepenを使ってHTMLを学習しよう。","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAG05oMFh//EABoQAQACAwEAAAAAAAAAAAAAAAEAAhESEzH/2gAIAQEAAQUC2KxRq+7s6Mzmf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABgQAAMBAQAAAAAAAAAAAAAAAAAQQREx/9oACAEBAAY/AuGqEX//xAAdEAADAAEFAQAAAAAAAAAAAAAAAREhMUFRgZHw/9oACAEBAAE/IWorSfAlopdKJcnD7ISdvBebnSP/2gAMAwEAAgADAAAAEJDP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAHBABAAIDAAMAAAAAAAAAAAAAAQARITFRYZGx/9oACAEBAAE/EGdgcQMGrB6hJQuVLjIq7AFG28l+y21HwBP/2Q==","aspectRatio":1.5037593984962405,"src":"/static/49f154176b9df441f788ce7741824803/0f3a1/top.jpg","srcSet":"/static/49f154176b9df441f788ce7741824803/f836f/top.jpg 200w,\n/static/49f154176b9df441f788ce7741824803/2244e/top.jpg 400w,\n/static/49f154176b9df441f788ce7741824803/0f3a1/top.jpg 500w","sizes":"(max-width: 500px) 100vw, 500px"}}}}}},"pageContext":{"next":{"fields":{"slug":"/aleph-setup/"},"frontmatter":{"title":"Aleph.jsとは。Denoで動くReactフレームワークです。"}},"previous":{"fields":{"slug":"/learning-programming-language-2/"},"frontmatter":{"title":"独学でプログラミングを勉強する方法。(第二回)"}},"slug":"/learning-programming-language-3/"}},"staticQueryHashes":["205017786","63159454"]}