こんにちは、
よっしーです。
この記事はWeb制作を
ゼロから学べる
内容になっています。
さて、今回の記事は
プログラミングに
興味を持っている、
やってみたいけどやり方がわからない
と悩んでいる人に届けたいという思いで作りました。
まだweb制作を始めたことない人なら
今回の記事でプログラミングの
第一歩を踏み出せるような内容に
なっていますので
どうぞ最後まで
お楽しみください
目次
- 今回のレッスンの内容
- プログラミング言語とは
- HTMLとは
- CSSとは
- 開発環境について
- まとめ
1 今回のレッスンの内容
今回のレッスンは
「プログラミング言語とは何か」
について優しく解説していきます。
これを聞いて
「一回調べたけど分からなかったんだよな」
「全く知らない自分でも理解できるのかな」
と思っている人が多いかもしれません。
安心してください ! !
現役エンジニアの私が
未経験から学んだ時に
分からなかった部分を
解説しています。
最後までみると
自分に自信がつきもっと
プログラミングを学んでみたい
と思うこと
間違えないでしょう。
逆にこのままページを
閉じてしまうと、
自分が学びたい時に
周りと差がつきまくって、
周りに追いつかず後悔の
日々を過ごすかもしれません
2 プログラミング言語とは
プログラミング言語とは
コンピュータに「やってほしいこと」を
正確に伝えるための“言葉”のことです。
あなたが今日本語を話して
たくさんの人と会話しているように
コンピュータと会話するための言葉があります。
なぜ「プログラミング」という
言葉をよく聞くのでしょうか
今では小学生の授業でも
プログラミングを学ぶ機会が
あるくらい身近なものになってきています
実はそれには理由があります。
スマホアプリ、ゲーム、SNS….など
プログラミングによって動いているものが
どんどん増えているからです。
プログラミングは、
これからの社会に欠かせない
「新しい言語」になりつつあるのです。
プログラミングは特別なものでなく
誰でも触れて、誰でも未来を作れる。
そういう時代に、私たちは生きているのです。
では今回はwebサイトを作るために
必要な言語であるHTMLとCSSのお話をしていきます。
1.HTMLとは
簡単にいうと「家の枠組みです」
サイトの型を決めていく時に使うものです。
実際のコードを見るとこんな感じ↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>first-website</title>
<link rel = "stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!!</h1>
<p>こんにちは、webサイト制作の世界へようこそ！</p>
</body>
</html>
これをブラウザで確認するとこうなります↓
「え、どういうこと・・？？」
と疑問に思った方
安心してください！
私も最初はそんな気持ちでした！
簡単に説明すると
<h1>Hello World!!</h1>
の部分がwebサイトの見出しで
<p>こんにちは、webサイト制作の世界へようこそ！</p>
の部分がwebサイトの文章になる部分です。
いいですか
ここで見るべきコードは
この2つだけです。他は一旦無視で大丈夫です。
実際この2つのコードを書けば
ほぼ同じように表示されます。
きちんとコンピュータに
正しい情報を伝えるために
HTMLの枠組みがあるから難しく感じるのです。
HTMLを理解したところで
次のCSSに入っていきましょう。
2.CSSとは
簡単にいうと「家の装飾」です。
webページの見た目を整える時に使うものです。
例えば、
見出しの「Hello World!!」を赤に
変更したい時はCSSファイルに
以下のコードを書きます。
h1 {
color: red;
}これをブラウザで確認するとこうなります↓
「なんで、こうなるの？」
と思った方は安心してください。
これはコードの
color: red;の部分を見れば
分かります。
colorは「色」
redは「赤」
ですよね
このコードでコンピュータに
文字の色を赤に変えてください
と指示を出しているのです。
HTMLとCSS のことが少しわかったところで
次は開発環境の話にはいります。
3.開発環境について
「なんか、いきなり難しそう・・・」
と不安な方
安心してください！
環境を整えるには
2つのアプリをダウンロードするだけで
コードを書くことができます。
プログラミングには、
プログラムを開発するのに
開発環境が必要です。
PCの中にあるもので
一様開発はできますが
開発の効率が悪くなる
ためお勧めしません。
今回は、２つのアプリを使います。
それは、
GoogleChrome
visual studio code
です。
Chromeは皆さん使っている人が
いるかもしれませんが、
ネットを検索したりYoutubeを見たり
している方が多いかもしれません。
実はWeb制作の開発に必要なものに
なってきます。
visual studio codeは
コードを書くためのエディタです。
無料で使えるし
現役のプログラマーも
使っている方が
多いです。
このソフトを使うと使いやすいし、
作業が捗ります。
次にこの２つのソフトをインストールを
してください。
そうすれば開発環境が整います。
4.まとめ
いかがでしたでしょうか？？
Web制作の概要に
ついてお伝えしました。
少しでもいいからWeb制作に
ついてわかってもらえたら嬉しいです。
もし、何かわからないことがあれば、
私の公式ラインの方に気楽に聞いてください。
これからどんどん
コード書いて
がんばっていきましょう！
また、次のレッスンで
待っています。
0件のコメント