プログラミングの始め方  まずは簡単なホームページ作りから始めよう -HTML,CSS編-

プログラミングの始め方  まずは簡単なホームページ作りから始めよう -HTML,CSS編-

プログラミング学習について今回は書いていきます。

プログラミング学習を始めたいと思っても、まず何から始めたらいいのか全くわからないというのが始めの段階じゃないかなと思います。

その様な段階で、まずオススメするのが簡単なwebページを自分で1から作ってみることです。  

 

今回は簡単にwebサイトの基本的な作成方法について解説します。

 

プログラミングとは?がわかる記事 よければこちらもぜひ

  

もしすでにwebサイトを作ったことがあるという方は、こちらでwebアプリ作成の学び方のご紹介もしています。

サイトを無料で公開する方法はこちら

  

プログラミング言語とは?

プログラムを書く際に、機械が人間が出した指令を情報として処理するのに必要なものがプログラミング言語と呼ばれるものです。

C, C#, C++, perl ,ruby ,python ,php ,Javascript, etc 色々あります。

このwebサイトを構築しているwordpressphpという言語を使用して作られています。

AirbnbやTwitterは、rubyを使用して作られました。

それぞれ何が違うかというと、基本的には動作としては同じことができますが、

細かく砕いていくと専門的な話になってきますので、また別の機会にすることにします。

 

   

みなさんが普段利用しているwebページは基本的に、HTML, CSS という言語を

ベースにコードが書かれています。

HTML, CSSのという言葉自体は聞いたことがある人も多いのではないでしょうか

この二つの言語とさっきあげたプログラミング言語を組み合わせて、普段

みなさんが使ってるSNSやwebサイトが作られています。

   

ユーザー登録、ログイン機能や投稿機能など複雑な処理をするのに、プログラミング言語は必要とされるのに対して、

HTML,CSSはwebページの見た目の部分を作るものです。

簡単なwebサイトであれば、この2つの言語の書き方さえわかれば初心者でも充分に作成できます! 

プログラミングの初期段階としてまずはHTML,CSSを始めていきましょう

  

   

HTMLとCSSを使ってWEBサイトを作ってみよう

それではHTMLとCSSでどのようにして、webページを作成していくのかを

解説していきます。

   

HTMLとCSSの違い

まずHTMLとCSSの違いについて開設します。

簡単にいうとHTMLはwebページの枠組み、文章を構成するもの

建物で例えると、柱や土台、床、屋根といったベースの部分です。

CSSはHTMLで書かれた、枠組みを装飾していく言語です。

家で例えると外壁の形、デザイン、屋根の形、色など見た目の部分ですね。

html css
  

テキストエディタを準備しよう

HTML,CSSというものはわかったけど、次にどこに書いていけばいいの?

という疑問が出てくると思います。

  

そこでテキストエディタというものを使用します。

テキストエディタとは、いわゆる黒い画面にカラフルな英語の文字がズラズラと

並んでいるアレです。

無料で使える代表的なものをご紹介します。

・Visual Studio Code

https://code.visualstudio.com/

・Atom

https://atom.io/

・Sublime Text

https://www.sublimetext.com/

以上の3つです。

  

とりあえず初めはどれを使っても大差はありません。

一応オススメは、Visual Studio Code(VScode) です。

初心者が落ちいりがちなミスがしにくい設計になっています。

 

それぞれリンク先からダウンロード、インストールしましょう。

  

ベースが英語なので、初めは戸惑うのかもしれませんが、すぐに慣れます。

日本語のパッケージもあるので、慣れない人もインストールしましょう。

    

まずはフォルダを作ろう

それでは、まずファイルを格納するフォルダを作りましょう。

場所はどこでも構いません!

そして、作成したフォルダの中に

HTMLファイルとCSSファイルを作成しましょう。

htmlファイルの拡張子は .html ,CSSは .css です。

Test.html Test.css という風になります。

それではここではVScode を例に作成していきます。

まずVScodeを開くとこのような画面になると思います。

次に上のメニューバーからfileを選択します。

New Fileをクリックで開きます。

そうするとテキストエディタに新しいファイルが開かれます。

下の方に注目すると、顔のマークの横にPlain Textとなっている所をクリックして

HTMLに選択して変更しましょう。

ここは様々なプログラミング言語をより見やすく書きやすくするために、

言語によって色分けがや、入力補完などができる便利なツールです。

さあ続いて入力していきましょう!

     

Hello Worldをwebサイトに表示しよう!

急に意味わからない文字がいっぱい、と思われても仕方ないですが

この中で、基本的に編集する部分は

<p>Hello World</p>

の部分だけと初めは思ってもらって大丈夫です。

では、そのほかの

<!doctype html>

<html lang=”ja”>

<head>

<meta charset=”UTF-8″>

<title> Hello World </title>

<link rel=”stylesheet” href=”Test.css”>

</head>

この辺りは一体なんなんだ、と思う方も多いと思いますが

ここは、基本的な型としてこういうもんなんだ、と思ってもらって

いいです。

簡単に説明すると、

<!doctype html> HTMLですよ!

<html lang=”ja”> langageはjapaneseですよ!

<head> ヘッド部分(ページの概要)

<meta charset=”UTF-8″> 文字コードはUTF-8

<title> Hello World </title> webページのタイトルはHello World

<link rel=”stylesheet” href=”Test.css”> CSSはTest.cssを読み込みます。

<body>  ボディ部分(ページの具体的な内容)

<p>Hello World</p>  Hello World !!

</body>

こんな感じです。

詳しくて真面目な方からするとざっくりしすぎて怒られそうですが、

このような感じで、間違ってはないです。


初めは、というか慣れてきてもですが、

※ <body>以外はコピペでいいと思います。

では、一旦保存しましょう。

save as を選択して先ほど作成したフォルダに、名前を付けて保存しましょう。

保存ができたら、一旦フォルダを確認して、ファイルがhtmlファイルとして

保存できているか確認しましょう。

確認できたら、ブラウザで開いて見ていきましょう。

ファイルを右クリックし、このアプリケーションで開くをクリックし

ブラウザ(この場合だとchrome)を開きます。

出ました! Hello World!!

何度やっても楽しい。。

CSSを作ろう

CSSを続いて書いていきます。

先ほど説明したように、CSSは装飾するものです。

今回はこのHello World の背景の色と文字の色を変えます。

それでは、先ほどhtmlファイルを作った時と同様に、

メニューバーからnew fileを選択し、

下のバーのplain textをcssに変更します。

次に、

この様に、変更します。

p{  } で、

さっきのHTMLファイル内で書いた、

<body>  

<p>Hello World</p>  ←この<p>の部分を指定しています。

</body>

 color : gray;  は文字色をgrayにします

 background-color : lightcyan;  はバックグラウンドカラーをライトシアンに

という感じです。

そのままですね

では、保存します。

これも先程と同じ様にメニューバーからsave as..から名前を指定して同じフォルダ内に保存します。

ここで注意点が一つ。 HTMLで書いた、

<link rel=”stylesheet” href=”Test.css”> この部分 CSSはTest.cssを読み込みます。

という指定をしているので、ここの名前と一致させる必要があるので、名前を間違えると

読み込まれず、cssが適応されなくなります。

今回はTest.css としているので、Test.cssという名前で保存しましょう。

では、もう一度先程のフォルダにcssが保存されているか確認して、

htmlファイルをブラウザから開いて見ましょう

出ました!

ちゃんと色が変わっていれば成功です!

  

いかがでしたでしょうか、うまく表示されましたでしょうか?

これが基本的なhtmlとcssの使い方と流れになります。

ここまでできればもう後は色々とできる様になってきます!

 

サーバーにアップロードして世界中に公開する方法はこちらで解説しています(無料)

 

次回はもう少し応用編をやっていきたいと思います。

    

     

   

     

wordpressに興味のある方は、こちらの記事もどうぞ

   

   

ご一読ありがとうございました。

プログラミングとは?がわかる記事

sasurai

旅と写真を愛する人。 web制作の仕事をしています。 写真も撮ります。お仕事のお問い合わせはお気軽に。

シェアする

Translate »