初めてのHTML - aw007release

初めてのHTML

<h1><span style="color: #0000ff;">はじめてのHTML</span></h1>

</div>

<p>こんにちは</p>

<p>3月からHTMLの復習から入り、javascriptを今は復習しています。</p>

<p>勉強するのに、丁度良い目標になりそうなIoTコンテストがあり、</p>

<p>とりあえずは、それに作品を出すことを目標に、プログラムの勉強をやっていこうかなと思っています。</p>

<p>私も皆みたいに色々ツールなどを作れるようになりたいです・・・</p>

<p><span style="color: #ff0000; font-size: 16pt;">参加予定のコンテスト：</span></p>

</div>

<div class="blogcardfu" style="width: auto; max-width: 9999px; border: 1px solid #E0E0E0; border-radius: 3px; margin: 10px 0; padding: 15px; line-height: 1.4; text-align: left; background: #FFFFFF;"><a style="display: block; text-decoration: none;" href="https://elchika.com/promotion/obniz2021/" target="_blank" rel="noopener"><span class="blogcardfu-image" style="float: right; width: 100px; padding: 0 0 0 10px; margin: 0 0 5px 5px;"><img style="width: 100%; height: auto; max-height: 100px; min-width: 0; border: 0 none; margin: 0;" src="https://images.weserv.nl/?w=100&url=ssl:res.cloudinary.com/elchika/image/upload/promotion/obniz2021/ogp.png" width="100" /></span><br style="display: none;" /><span class="blogcardfu-title" style="font-size: 112.5%; font-weight: bold; color: #333333; margin: 0 0 5px 0;">obniz IoT コンテスト 2021 | elchika</span><br /><span class="blogcardfu-content" style="font-size: 87.5%; font-weight: 400; color: #666666;">obniz Board(オブナイズボード)を使った、電子工作やスマートホームに関するアイデアを募集するコンテスト「obniz IoT コンテスト 2021」を、メカトロニクスの情報共有コミュニティ「elchika(エルチカ)」にて、開催いたします。</span><br /><span style="clear: both; display: block; overflow: hidden; height: 0;"> </span></a></div>

<p>これに参加する場合、obnizというIoT用コントロールボードが貰えるそうで、色々遊べる気がします。</p>

<p>しかも、プログラムがjavascriptで書けるということで、丁度いいんですよね。</p>

<p>さて今回は、「はじめてのHTML」ということで、モヒカンさんの動画を元に、HTMLとCSSを書いたので、その導入のメモを書いていきたいと思います。</p>

<h2><span style="color: #0000ff; font-size: 16pt;">1.初めてのHTML</span></h2>

</div>

<h3><span style="color: #0000ff; font-size: 14pt;">1.1 VScodeでHTMLを開始</span></h3>

</div>

<p>　(1)VScodeの用意</p>

<p>　・VScodeの用意は下記記事の時に行いました。</p>

<div class="blogcardfu" style="width: auto; max-width: 9999px; border: 1px solid #E0E0E0; border-radius: 3px; margin: 10px 0; padding: 15px; line-height: 1.4; text-align: left; background: #FFFFFF;"><a style="display: block; text-decoration: none;" href="/blog/57956" target="_blank" rel="noopener"><span class="blogcardfu-image" style="float: right; width: 100px; padding: 0 0 0 10px; margin: 0 0 5px 5px;"><img style="width: 100%; height: auto; max-height: 100px; min-width: 0; border: 0 none; margin: 0;" src="https://images.weserv.nl/?w=100&url=ssl:s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/57000/57900/57956/logo/logo.jpg?2021032715" width="100" /></span><br style="display: none;" /><span class="blogcardfu-title" style="font-size: 112.5%; font-weight: bold; color: #333333; margin: 0 0 5px 0;">初めてのHTMLの前準備と導入(VScodeの導入)</span><br /><span class="blogcardfu-content" style="font-size: 87.5%; font-weight: 400; color: #666666;">こんにちはユキです。遂に、symbolがローンチされるということで、自分もなんかsymbolかnem使って作りたいなあと思ったので、HTMLの勉強を始めました。参考にさせていただいたのは、先週紹介していただいた、モヒカンさんが以前やっていたHTML講座がありましたので、それで学習していきたいと思っています。今回は、...</span><br /><span style="clear: both; display: block; overflow: hidden; height: 0;"> </span></a></div>

<p>　(2)下記動画を参考に、HTMLを書いてみる。</p>

<p>　　書いたHTMLコード</p>

<pre class="language-markup"><code><!-- 2021/03/07

目的：HTMLの基礎を作成する。

-->

<!DOCTYPE html>

<head>

<title>初めてのHTML学習</title>

</head>

<body>

<h1>初めてのHTML学習</h1>

<h2>初めてHTML学習を行いました。</h2>

</body>

</html></code></pre>

</div>

</div>

<div class="uk-animation-toggle" tabindex="0">　(4)VScodeに書く：</div>

<h2><span style="color: #0000ff; font-size: 16pt;">2.CSSの導入</span></h2>

</div>

<p>　(1)CSSファイルとUI kitをHTMLファイルで使えるようにする。</p>

<p>　　UI kitのurl：<a href="https://getuikit.com/docs/text">https://getuikit.com/docs/text</a></p>

<p>　HTMLソースコード</p>

<pre class="language-markup"><code><!-- 2021/03/07

目的：HTMLの基礎を作成する。

-->

<!DOCTYPE html>

<head>

<title>初めてのHTML学習</title>

</head>

<body>

<h1>初めてのHTML学習</h1>

<h2>初めてHTML学習を行いました。</h2>

</div>

</body>

</html></code></pre>

<p>CSSソースコード(ファイル名style.css)</p>

<pre class="language-markup"><code>.green {

color: green;

background-color: aqua;

font: 2em;

font-weight: 800;

margin: 30px;

}

.box {

display: flex;

}

</code></pre>

<p>　(4)VScodeに書く</p>

</div>

<div class="uk-animation-toggle" tabindex="0">　・<a href="/blog/57298">nemlogの装飾に使えるCSSコードサンプル集(外部ページ)</a></div>

</div>

<div class="uk-animation-shake"><a href="https://dafu.cf/nemlog/css2.html">　・https://dafu.cf/nemlog/css2.html</a></div>

</div>

<div class="uk-animation-toggle" tabindex="0">　<a href="/blog/57956">・初めてのHTMLの前準備と導入(VScodeの導入)</a></div>

<p>　・<a href="/blog/58073">初めてのCSS(nemlogのレイアウトの幅を広げてみよう)</a></p>