平成最後のブログ~プログラミング勉強の過程~
平成最後の今日、朝起きてこんなものを作ってみました。
<!DOCKTYPE html>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>将来やりたいことリスト(作ってみたいサービス)</title>
<h1><br>将来やりたいことリスト</h1>
<div class="oto">
<img src="img//将来.jpg" >
</div>
</head>
<body>
<br><br><br>
<ul>
<li class="sou" >様々なサービスを作ってみたい</li>
<p>(具体的に言うと)</p>
私がひきこもりだったり、友達が少ないこともあって、若者向けの交流の場を作ったり、様々なアイディアを募って、それを具現化することをやってみたいです。
<br>アイディアを募り私が作ってみたいということです。
<br><br><br><br>
<li class="sou2"><p>プログラミングを勉強しながら、勉強過程をブログに公開</p></li>
<img class="oto2" src="img/プログラミング.jpg">
<div></div>
</ul>
</body>
</html>
CSSはこちら
h1{
text-align:center;
font-size:60px;
font-family: 'Bangers', cursive;
color:;
}
.sou{font-size:30px;}
img{width:600px;
height:400px;
}
.oto{text-align: center;}
.sou2{font-size:30px;}
.oto2{width:200px;
height:150px;
text-align: right;}
何を書いてるかよくわからないと思いますが、プログラミングの初歩のコードです。
HTMLとCSSを現在勉強中なのですが(簡単に言うとプログラミングです。)勉強の仕方に何か納得が行かなかったので、アウトプットしながら勉強しようと思いました。実際にコードを受動的に覚えるよりも、アウトプットしながら分からないところは調べるという方法でこれからは勉強していきたいです。
このコードはまだ製作途中で簡単に将来やってみたいことのリストをHTMLで書いてみようと思いました。
画像が表示されていませんがコードが👇のようになります。もっと奇麗なのですが、ブログに載せることがうまくできなくてこうなりました...
将来やりたいことリスト
- 様々なサービスを作ってみたい
(具体的に言うと)
- 私がひきこもりだったり、友達が少ないこともあって、若者向けの交流の場を作ったり、様々なアイディアを募って、それを具現化することをやってみたいです。
- アイディアを募り私が作ってみたいということです。
-
プログラミングを勉強しながら、勉強過程をブログに公開
画像が見にくかったので調整しました。書いたコードは以下のようになります。