★超初心者用★フワッとプログラミング理解【HTML CSS】
Last Updated on 2024年2月27日 by ピントゥリッキオ
このブログでは初めてプログラミングを学ぶ人にフワッと簡単にイメージを持ってもらうことを目的とします。
細かい知識は後回しとして、まずは、何もわからない状態でいいので、ひとつ成果物を作ってみるところから始めたいと思います。
フワッとしたわかりやすさ優先なので余計なことは書かず即WEBページを作る前提で行きます。
プログラミングかじっている方は有益な情報はいっっっさいありません！笑
●学べること●
★なんとなくプログラミング仕組みがわかる
★超々簡単なホームページが作れる
＝ 目 次 ＝
１ プログラミングとは？
プログラミングとは、、チャットGPTで調べると次のように解説されています。
プログラミングとは、コンピュータに対して特定の動作や処理を命令するための手段です。コンピュータは自分自身で判断や行動することができないため、プログラミングを通じてコンピュータにどう振る舞うかを指示する必要があります。
具体的には、プログラミング言語と呼ばれる言語を使って、コンピュータに処理を行わせるための命令文やアルゴリズムを書きます。プログラムを書いた後は、そのプログラムをコンピュータが理解できる形式に変換するために、コンパイラやインタプリタといったツールを使います。
プログラミングの目的は、様々な問題を解決するためにコンピュータを利用することです。例えば、ウェブサイトの作成、ゲームの開発、データの解析、自動化したタスクの実行など、様々な用途に使用されます。
プログラミングを学ぶことで、自分のアイデアや問題解決の方法をコンピュータに伝えることができます。ただし、プログラミングはコンピュータとの対話手段であるため、正確さや論理性が重要です。
うん、難しいですね笑
語弊をおそれず一番簡単にいうと「コンピュータが解読できる言語を使って、動作などの指示をだすこと」と最初は考えてよいのではないでしょうか。
２ プログラミング言語の種類
コンピュータに指示するための言語、いわゆるプログラミング言語には様々な種類があります。言語により特徴が異なり、向いている指示や向いていない指示などがあります。最初は深く考えずいろいろあるなぁ。。くらいの間隔で見てもらえればいいと思います。
プログラミング言語には様々な種類がありますが、代表的なものをいくつか挙げると次のようになります。
- C言語: 低レベルの制御が可能で、効率的なプログラムを作成できる汎用のプログラミング言語。
- Java: オブジェクト指向プログラミングをサポートし、プラットフォームに依存しないプログラムを作成できる言語。
- Python: シンプルで読みやすい文法を持ち、さまざまな用途に利用されるスクリプト言語。
- JavaScript: ウェブブラウザ上で動作するクライアントサイドのスクリプト言語。
- Ruby: シンプルで可読性が高く、オブジェクト指向プログラミングをサポートする言語。
- C++: C言語の拡張版であり、オブジェクト指向プログラミングをサポートする言語。
- Swift: iOSおよびmacOSアプリケーションの開発に使用される、安全で高速なプログラミング言語。
- Go: Googleによって開発された、シンプルかつ効率的なプログラミング言語。
- PHP: サーバーサイドで動作するウェブアプリケーションを開発するために使用されるスクリプト言語。
- Rust: システムプログラミング言語として設計され、メモリセーフなコードを書くことができる言語。
- HTML、CSS：ウェブサイトを作成したり装飾したりするための言語。簡単でわかりやすいのでまず最初に覚えるとよい！
３ 今回、学ぶこと
（１）今回の目標
今回はこれからプログラミングを学ぶ人にまずやっていただきたいことを説明します。
いきなりですが以下のサンプルサイトを作成します。
上記サンプルサイトは、検索エンジンをまとめたサイトで、各検索エンジンへリンクするものができるものです。
※細かい体裁は気にしてません！！
何もわからなくてもいいので自分で作ってみてからの方がいろいろ分かりやすいです！
（２）必要な環境
ここで、作成のために必要な環境を以下に示しますので準備願います。
準備するものは非常に少ないです！
《必要な環境》
・PC ※OSはWindowsでの説明となります。
・インターネット環境 ※可能であれば
・メモ帳
（３）使用する言語
プログラミングの超入門に適しているHTMLとCSSを使用します。
この言語は主にHPなどWEBサイトを作成するために使用します。
とりあえず、言語のことは気にしなくて大丈夫です。
４ 実際にサイトを作ってみる
それでは実際にサイトを作ってみましょう。
以下の手順に沿うだけで先程のサイトが自分で作れます。
【手順１】メモ帳(テキストデータ)を２つ用意する
【手順２】テキストデータの名前を変更する。※今回は以下のとおりとする。
１つ目の名前：site.txt
2つ目の名前：stylesheet.css
※２つのデータは同じフォルダ等に保存してください。
※拡張子(ドット以下の文字列)を変えると以下のとおりアイコンがかわります。
【手順３】site.txtを開き以下のコード(文字列)をコピペします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PR</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<code>
<body>
<div class="sample1">
<h1>ピントリの検索エンジンサイト</h1>
<h2>
<p>このサイトでは様々な検索エンジンを紹介しています。</p>
<p>以下の検索エンジンからお好みのエンジンを使用してみてください。</p>
</h2>
<h3>
<ul>
<li><span>検索</span></li>
<li><a href="https://www.google.co.jp/#spf=1600836852868">Google</a></li>
<li><a href="https://www.yahoo.co.jp/">yahoo!</a></li>
<li><a href="https://search.goo.ne.jp/">goo</a></li>
<li><a href="http://www.bing.com/?cc=jp">Bing</a></li>
</ul>
</h3>
<h4>
<a href="https://www.google.co.jp/#spf=1600836852868"><img src="googlelogo.jpg"></a>
<p>≪ここをクリック☝≫</p>
</h4>
</body>
</code>
</html>
【手順4】コピペした「site.txt」を「site.html」として名前を付けて保存する。
以下のようなアイコンになります。
【手順５】stylesheet.cssに以下のコード(文字列)をコピペします。
body{
background-color:#FFEEFF;
}
h1{
color:#FFFFFF;
background-color:lime;
width:1000px;
height:50px;
text-align:center;
margin-left:auto;
margin-right:auto;
background-color:#43FF6B;
}
h2{
color:black;
padding: 0.5em 0.5em;
margin-left:auto;
margin-right:auto;
font-weight: bold;
border: solid 1px #000000;
font-size:15px;
width:650px;
background-color:white;
}
ul{
list-style: none;
color:black;
padding: 0.5em 0.5em;
margin-left:auto;
margin-right:auto;
font-weight: bold;
border: solid 1px #000000;
font-size:15px;
width:500px;
height:30px;
background-color:#CCFFFF;
}
li{
float:left;
padding-left:30px;
}
h4{
color:black;
padding: 0.5em 1em;
margin-left:auto;
margin-right:auto;
font-weight: bold;
font-size:15px;
width:150px;
}
span{
font-size:20px;
}
【手順６】site.htmlをダブルクリックで開きます。
すると以下のサイトが開かれます。
以上で簡単なサイトが作れちゃいます！
５ フワッと解説
あまりいっぱい書いても頭に入らないと思うので、具体的な言語の記述方法などについては改めてブログで解説していくこととします。それでは本日やったことのフワッとした解説は以下です。
・まずテキストにコードを記述します
・次にテキストの拡張子を変換することで簡単なサイトが作れちゃいます。
・HTMLとはウェブページの構造やコンテンツを記述するための言語です(文書、リンク、画像挿入など)
・CSSとは上記のHTMLを装飾する言語です(文字、背景の色、サイズ、大きさなど)
・言語の書き方や構文は、また今後、ブログで解説していきますのでそちらをご確認願います！
・取り急ぎイメージが出来た人は無料のアプリ「プロゲート」で勉強するとわかりやすいと思います。
Follow me!
