【プログラミング】文系が独学でHTMLとCSSを覚えてみた

【プログラミング】文系が独学でHTMLとCSSを覚えてみた

プログラミング　フリーイラストに対する画像結果

センター試験は国英7.5割数学5割と、見ての通り「THE文系」です(笑)

本当にプログラミングとかITと言われてもわからないくらいの初心者ですが、

今回はHTMLとCSSを覚えてみたという記事で書いていきたいと思います。

まず取り組み始めたこと
プログラミング初心者でもHTMLとCSSは簡単

まず取り組み始めたこと

結果的に言ってしまえば7から8月の間にHTMLとCSSを使えるようになりました。

数三から逃げた文系がまず何から始めたかを紹介していこうと思います。

参考書を読みながら実際に打ってみた

まず何から始めようかと思って行動したのが「参考書を買うこと」でした。

蔦屋書店に行ったんですけど、ホームページの作り方とか、HTMLとCSSの活用の仕方が載っている本とかいろいろありました。

そこで当時の自分は何を思ったのかわかんないんですけど「HTMLとCSSとJABAも覚えれんじゃん」となり、このホームページ辞典を購入しました(笑)

でもこの辞典、なにがいいかっていうと、一つ一つの物事を分かりやすく解説してくれる。

例えば「文書情報を表したい」という題名があり、

そのプログラムを「Brackets」というソフトで実際に打ちこんでいってプレビューを表示し、「あーこんなんなるんだ」と覚えながら打ち込んでいきました。

それで辞典の前ページで学んだプログラムも駆使しながらだんだんと知識を増やしていったという感じです。

これ全部で五百ページ以上あるんですけど、本当にボリューミーです。

おかげさまで、プログラミング初心者だったのに「俺こんなにできるんだ」とできる気になって過信していました(笑)

Progateを使ってWEBページを作ってみた

上の著書を読破した後、友人からの紹介で「Progate」というサイトを使って勉強させていただきました。↓

prog-8.com

このサイトは無料でプログラミングを学べるサイトで、今まで暗中模索でやってきたことが一つの糸でつながった感じがしました。

もし文系の人でプログラミングをやってみたいという人がいれば、私のようにやみくもに参考書を買って知識で土台を作ってからやってみるのではなく、

間違いなく最初からこのサイトを使ったほうがいいです。

それから辞典なり参考書なりで知識の増強をしたほうがいいです。

Progateは「HTML＆CSS初級編」という取り組みを受けれるのですが、その取り組みを最後まで行えば簡単にWEBサイトができます。

自分は膨大な参考書で知識をつけてからProgateをやってしまったので、「こんな簡単にできるんだったら、あんなに無心でやんなくてもよかったなぁ」と若干苦笑いしました。

Progateの形式を応用してWEBページを作ってみた

「HTML＆CSS初級編」というタスクをクリア＆参考書の知識をそろえた状態で、実際にwebページを作ってみました。

別にこのサイトを改良してサーバーに乗っけようという気はないので、ここにHTMLコードとCSSコードを載せようと思います。

気になる方はコピペして読者さんのソフトで見てみてください。

※それぞれ1ページ分のHOME部分だけ載せるので、文章を押してもページ移動できないので注意してください( ´∀｀ )

　【HTMLコード】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Youtuberを探そう</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="next" href="sogo.html">
</head>
<body>
<div class="header">
<div class="header-logo"><a href="Youtuberを探そう.html">Youtuberを探そう</a></div>
<div class="header-list">
<ul>
<li><a href="総合急上昇.html" target="_blank" rel="noopener noreferrer">総合急上昇</a></li>
<li><a href="音楽.html" target="_blank" rel="noopener">音楽</a></li>
<li><a href="ゲーム実況.html" target="_blank" rel="noopener">ゲーム実況</a></li>
<li><a href="スポーツ系.html" target="_blank" rel="noopener">スポーツ系</a></li>
<li><a href="エンターテインメント.html" target="_blank" rel="noopener">エンタメ</a></li>
<li><a href="新生Youtuber.html" target="_blank" rel="noopener">新生Youtuber</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="copy-container">
<h1><center>Youtuberを探そう</center></h1>
<h2><center>あなたのお気に入りのYoutuberを見つけよう</center></h2>
</div>
</div>
<div class="footer">
<div class="menu-all">
<div id="footer-menu">
<ul>
<li><a href="このサイトについて.html">このサイトについて</a></li>
<p><li><a href="新生Youtuber向け">新生Youtuber向け</a></li></p>
</ul>
</div>
</div>
<div class="contact-all">
<h3 class="contact-form"> お問い合わせ</h3>
<div class="contact-list">
<ul>
<P><label for="mail">メールアドレス（必須）</label></P>
<input id="mail" type="email" name="mail" placeholder="○○＠△△.com(例)">
<p><label for="comment">お問い合わせ内容（必須）</label></p>
<textarea id="comment" name="comment" placeholder="ここにお書きください"></textarea>
<p>必須項目は必ずご入力ください</p>
<input class="contact-submit" type="submit" value="送信" value="kurotsume1010@gmail.com">
</ul>
</div>
</div>
</div>
</body>
</html>

　【CSSコード】

body {
font-family: "Avenir Next";
}

.header {
background-color: #f8f8ff;
height: 90px;
}

.header-logo {
font-family: Impact, sans-serif;
text-shadow: darkgray 5px 1px;
float: left;
font-size: 36px;
padding: 20px 40px;
text-decoration: none;
color: #ff0000;
}

.header-logo a:visited{
color: #ff0000;
}

.header-list li{
text-decoration: none;
list-style: none;
}

.header-list a{
float: left;
color: black;
padding: 33px 10px;
text-decoration: none;
}

.header-list a:hover {
color: #ff0000;
}

.main {
padding:100px 80px;
}

.copy-container h1{
font-size: 100px;
}

.footer {
background-color: #000;
height: 300px;
}

#contact-all{
float: left;
}

.contact-form {
color: #fff;
margin: 5px; 10px;
}

input, textarea {
width: 200px;
margin-top: 0;
margin-bottom: 5px;
padding: 0, 5px;
font-size: 9px;
border: 1px solid #dee7ec;
}

.contact-submit{
background-color: #000;
color: #fff;
}

.contact-list ul{
margin: 0;
padding: 0px, 1px;
list-style: none;
}

.contact-list p {
color: #fff;
display: list-item;
list-style-type: none;
}

#menu-all{
position: absolute; top: 0%; right: 0%;
}

#footer-menu ul{
margin: 0;
padding: 0;
list-style: none;
float: right;
}

#footer-menu li{
display: inline;
padding: 0;
margin: 0;
}

#footer-menu li a{
display: block;
border-left: 8px solid #C97556;
background-color: #000;
padding: 3px 10px;
text-decoration: none;
color: #fff;
width: 150px;
margin: 1px 0px;
text-align: left;
font-size: 14px;
}

#footer-menu li a:hover{
border-left: 8px solid #990033;
background-color: #474655;
}