初めてのHTML
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-alert-danger uk-animation-shake">
</div>
</div>
<p>こんにちは</p>
<p>ユキです。</p>
<p> </p>
<p>3月からHTMLの復習から入り、javascriptを今は復習しています。</p>
<p>勉強するのに、丁度良い目標になりそうなIoTコンテストがあり、</p>
<p>とりあえずは、それに作品を出すことを目標に、プログラムの勉強をやっていこうかなと思っています。</p>
<p>私も皆みたいに色々ツールなどを作れるようになりたいです・・・</p>
<p> </p>
<div class="uk-alert-primary">
<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> </p>
<p>これに参加する場合、obnizというIoT用コントロールボードが貰えるそうで、色々遊べる気がします。</p>
<p>しかも、プログラムがjavascriptで書けるということで、丁度いいんですよね。</p>
<p> </p>
<p>さて今回は、「はじめてのHTML」ということで、モヒカンさんの動画を元に、HTMLとCSSを書いたので、その導入のメモを書いていきたいと思います。</p>
<p> </p>
<div class="uk-alert-danger">
<h2><span style="color: #0000ff; font-size: 16pt;">1.初めてのHTML</span></h2> </div>
<div class="uk-alert-danger">
<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> </p>
<p> (2)下記動画を参考に、HTMLを書いてみる。</p>
<p> 書いたHTMLコード</p>
<pre class="language-markup"><code><!-- 2021/03/07
目的:HTMLの基礎を作成する。
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初めてのHTML学習</title>
</head>
<body>
<h1>初めてのHTML学習</h1>
<h2>初めてHTML学習を行いました。</h2>
<h3>楽しい</h3>
</body>
</html></code></pre>
<p> </p>
<div class="uk-alert-primary">
<p><span style="color: #ff0000; font-size: 16pt;">参考動画:</span></p> </div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-animation-shake"> </div>
</div>
<p>(3)実行結果</p>
<div class="uk-animation-toggle" tabindex="0"> (4)VScodeに書く:</div>
<div class="uk-animation-toggle" tabindex="0"> </div>
<p> </p>
<div class="uk-alert-danger">
<h2><span style="color: #0000ff; font-size: 16pt;">2.CSSの導入</span></h2> </div>
<p> (1)CSSファイルとUI kitをHTMLファイルで使えるようにする。</p>
<p> </p>
<p> (2)書き方:</p>
<p> HTMLソースコード</p>
<pre class="language-markup"><code><!-- 2021/03/07
目的:HTMLの基礎を作成する。
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初めてのHTML学習</title>
<link rel="stylesheet" href="style.css">
<!-- UIkit CSS -->
</head>
<body>
<h1>初めてのHTML学習</h1>
<h2>初めてHTML学習を行いました。</h2>
<h3 class="green uk-animation-fade">楽しい</h3>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-animation-fade">テスト</div>
</div>
</body>
</html></code></pre>
<div class="uk-child-width-expand@s">
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-animation-toggle" tabindex="0">
<p> </p>
<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> </p>
<p> (3)実行結果:</p>
<p> (4)VScodeに書く</p>
<p> </p>
<div class="uk-alert-primary">
<p><span style="color: #ff0000; font-size: 16pt;">関連記事:</span></p> </div>
</div>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-animation-toggle" tabindex="0"> ・<a href="/blog/57298">nemlogの装飾に使えるCSSコードサンプル集(外部ページ)</a></div>
</div>
<div class="uk-animation-toggle" tabindex="0">
</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>
<p> </p>