HTMLやCSSやJavaScript
はじめに
本日はタイトルの3つををまとめていこうと思います。
webアプリ(フロントエンド領域)の画面を制作する上では必要なスキルになります。
またwebサイトを作成する上でも必要なスキルになるので、是非理解していきましょう。
3つの説明
まずは下記の画像をご覧ください。
ざっくり3つの説明です。
1.HTML⇒文章の構文を記述
2.CSS⇒テキストのスタイルや色を適応
3.JavaScript⇒オブジェクトなどに関数を埋め込んで処理する
それでは各項目で詳しく話していきます。
1.HTMLとは
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML、CSS、Javascriptのサンプル</title>
<link rel="stylesheet" href="test2.css">
<script type="text/javascript" src="test3.js"></script>
</head>
<body>
<section class="wrapper">
<div class="container">
<div class="content">
<h2 class="heading">MESSAGE</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
<form><input type="button" value="日時表示" onClick="message()"></form>
<span id="view_time"></span>
</div>
</div>
</section>
</body>
HTMLは全体の構成を作成します。
HTMLでは<>で囲い、<div~>や<from~>などで文の構成を作成しています。
中身のデザインはCSS、関数の処理はjavascriptが担当してます。
HTMLは簡単そうで奥が深かったりします。webアプリを勉強していくとReactやvueという技術を学ぶことになると思います。そこでコンポーネント[1]という考え方が出てくるのですが、、、ここで説明するとまた脱線しそうなので話しませんが、とりあえず簡単に言うと、「すんごい細かく別けて」画面の構成を考えないといけないのでしんどくなります。ですのでしっかりと画面の構成を理解するのが大事になります。
2.CSSとは
/* container */
.wrapper{
width:100%;
}
.wrapper .container{
max-width:1000px;
margin:0px auto;
padding:80px 0px;
}
/* content */
.wrapper .content {
padding:50px;
text-align:center;
}
.wrapper .content .heading{
margin:0px 0px 40px 0px;
font-size: 24px;
font-weight: normal;
text-align: center;
}
<link rel="stylesheet" href="test2.css"> <!--CSSファイルを指定-->
...
<body>
<section class="wrapper"> <!--ラップされてる部分に"wrapper"のCSSクラスを適応-->
...
</section>
</body>
CSSはHTMLで構成したテキストやオブジェクトをデザインしていきます。
主に色やサイズ、位置、書式の変更をします。
CSSではクラスを作成してmarginやfont-sizeなどでデザインのコードを記述し、HTMLでCSSの内容を適応させます。CSSは書き方やスタイルの種類が複数あるので、色々試して自分の好きなデザインを見つけましょう。デザインが好きな人や芸術的な人は得意な分野になるとは思いますが、僕はデザイン力が皆無でしたので見よう見まねで試しても中々上手くいかないです笑。
後は色んなデザインパターンをマスターすると、様々な案件に対応することができると思います。
3.JavaScriptとは
function message() {
document.getElementById("view_time").innerHTML = getNow();
}
function getNow() {
var now = new Date();
var year = now.getFullYear();
var mon = now.getMonth()+1; //１を足すこと
var day = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
//出力用
var s = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒";
return s;
}
<script type="text/javascript" src="test3.js"></script> <!--jsファイルを指定-->
...
<body>
...
<form><input type="button" value="日時表示" onClick="message()"></form>
<span id="view_time"></span>
<!--onClickに作成した関数を指定し、ボタンを押すとspanに表示される-->
...
</body>
JavaScript(以下js)はHTMLで構成したテキストやオブジェクトに、関数を埋め込んで処理させることが可能になります。
jsはHTMLやCSSと違って様々なことができます。
HTMLやCSSはコードを記述しますが、実際にはプログラミング言語ではありません。
ですがjsはプログラミング言語になります。しかもただのプログラミング言語ではありません...。web上で動く唯一のプログラミング言語になります！ [2]
ですが、これがメリットだったりデメリットだったりするんですけどねー。
動的なアプリを作成できたり、他のサーバと通信したりできます。
しかしwebの画面を作成するうえでjsにはかなり苦しむと思うので、しっかりと基礎を理解してから応用に行くようにしてください。SPAを知ってるからと言い最初からreactやvueを学習すると獄沼にはまると思うので...笑 またこの言語を世間がどう思ってるのか分かりませんが、少し勉強した僕からすると「かーなりしんどい」です。「jsはCO2だ」という言葉をどこかの記事で見たことがありますが本当にそう思います。このCO2とどう向き合っていくかが今後の鍵になると思うので、くじけず一緒に頑張りましょう！
※javaとJavaScriptは違います
これはよくある間違いになります。
javaはサーバサイドのプログラミング言語ですので、全く別の言語になります。
JavaScriptのことを略してjavaと呼んでいるわけではないので注意しましょう。
なんでこんな似た名前なのかと言うと
javaが注目されていた時代に、javaの人気にあやかってjavascriptという名前を付けたので、javaとjavascriptは名前が似たプログラミング言語になっています。
らしいです...。
これで通るのなら、「進撃の刃」でもいけるか🙄
まとめ
以上3つをまとめました。
どれも画面を作成するうえで大事になってきますので、しっかりと基礎を抑えましょう。
それと「どんな風に作ったらいいか分からない！」という人も、とにかく色んな人のコードを真似してみてコードを書いてください。デザイン力も大事ですがまずはコードを書きまくることが大事だと思います。書くのと書かないとでは成長できる速度が違うので、とにかく書きまくりましょう！
Discussion