スタイルシート言語はHTMLの味気ない見た目をバーーッと、まるで布を被せるよう一瞬で変える。JSJavaScriptの略。Javaは本来ジャワと読むがJSではジャバと読む。先にあったプログラミング言語Java(ジャバ)から来ている。*7プログラミング言語にはコンパイラ言語とスクリプト言語がある。コンパイラ言語はマシン語*8にコンパイル(変換)しないと動かない。Javaはコンパイラ言語。台本を書けば役者が演じてくれるように、スクリプト言語もコードを書けばすぐ動く。JavaScriptはJavaに似たスクリプト言語という意味。名前からもわかるように、3言語はそれぞれ種類が異なる。プログラミング言語はJSだけで、HTMLはマークアップ言語、CSSはスタイルシート言語だ。(すべてコンピュータ言語には含まれる)コンピュータ言語マークアップ言語(HTML)スタイルシート言語(CSS)プログラミング言語コンパイラ言語スクリプト言語(JS)コードの見方Chromeの場合Webページ*10のコードはブラウザで見ることができる。Chrome」の「デベロッパーツール」でコードを見る方法を説明する。右クリックを開き、「検証」をクリック。「デベロッパーツール」が開くので、「Sources」タブをクリック。「Sources」タブが開く。左パネルを見るとトップページは「(index)」、他のページでは「.html」の拡張子のファイルが選ばれている。ディレクトリ(フォルダ)を開くと「.css」「.js」などの拡張子のファイルがある。ファイルを選ぶと右パネルにコードが表示される。「見えるぞ!私にもコードが見える!!」*11と、なっていただけただろうか。コードの特徴コードには何やら半角英数のコンピュータ言語がたくさん書かれている。これをブラウザが処理することでプレーンテキスト*12が鮮やかなWebページに変身するわけか。特徴を拾い見してみよう。暗号かよ!ナンで3つとも書き方が違うのよ?大丈夫、みんな最初はそう思った。本連載で少しずつ丁寧に解説していくのでご安心を!コードを書きたくなったら...もし本連載がキッカケで自分でもコードを書いてみたいと思ったそこのあなた。世界は開かれている!いつやるか?今でryWebサイトを形作る言語「HTML」「CSS」「JS」は、ブラウザが処理を行なってくれるためコンパイルが不要。我々のPC*13にも環境構築は不要だ。テキストエディタにコードを書いて、サーバにアップすればすぐにWebサイトを公開できる。*14テキストエディタはPCに標準で入っているメモ帳(Windows)やテキストエディット(Mac)でも構わない。プログラミング向けの無料*15のテキストエディタもある。コードの指定など便利な機能が揃っていて、より使いやすいかと思う。*16また、テキストエディタをインストールをする前にお試し体験をしてみたい方は、オンラインテキストエディタ「CodePen」をお勧めする!*17いつやるか?今でryテキスト原稿サンプル最後に、本連載のサンプルとして下記の「テキスト原稿」を用意した。丹沢山地と相模湾の自然に囲まれて暮らしています。詳しい情報はコチラ(リンク)(※ここに写真を表示)見ての通り誰にでも読めるプレーンテキストだ。これをブラウザで表示するとこうなる。CodePen.「Result」タブが実際のブラウザでの表示だ。「HTML」タブがテキスト原稿だ。ブラウザの文字サイズは均一で、しかもテキスト原稿に入っている改行すら再現されてないじゃないか!うむ、わかった。次回はいよいよWebサイトの文書構造を司る「HTML」の書式から解説していこう。※次回:【HTMLの基本】書ける前に読む!HTML、CSS、JSの書式-2idr-zz.hatenablog.com本連載は、これからWebサイト制作を始めてみたい方を念頭に、当ブログの記事中に出てくるWeb系の単語の「出発点」になることを目指して書きました。平易な言葉で、段階的な説明を心がけたつもりです。(書きながら自分自身の復習にもなりました)もし内容に不明点、おかしい点などあれば(優しく)ご指摘いただけると幸いです。idr-zz.hatenablog.com※参考:【HTML、CSS、JSの書式】まとめqiita.com*1:ソースコード。人が書いたコンピュータへの命令のこと。*2:某胃腸薬*3:ネットワーク上のファイル置き場*4:Webサイトを表示するソフト。あ、もしかしたらブラウザ以外でこの記事を見ている方もいるかも?それでも表示している技術(Webビューという)には3言語が関係している。*5:昔は混ざり合った部分もあったが、役割を明確にすることで、修正や拡張がしやすくなった。Protocolの略。HTの部分はHTMLと共通する。ハイパーテキスト通信規約という意味。*7:ちなみに本家Javaの由来はジャワコーヒーらしい。Javaを作った人がよく行くカフェで飲んでいたらしい。*8:いわゆる膨大な1と0の塊ね*9:そしてHTML、CSSもまたコンパイル不要な言語!*10:ブラウザに表示される単一ページをWebページという。そのページが集まったサイト全体をWebサイトという。Topページをホームページという。*11:赤い彗星*12:何の文字装飾もないただのテキスト。Windowsのメモ帳、Macのテキストエディットでお馴染みの。*13:念のため脚注。パーソナルコンピュータ。今これを見ているのはPCかスマホかそれ以外か...。*14:サーバへのアップロードにはFTPソフトが必要(今回は触れない)。Protocolの略。TPの部分はHTTPと共通で、ファイルの通信規約という意味。*15:フリーソフトという*16:フリーではWindows用のTeraPad、Mac用のmi、CotEditor、などが有名。スマホやタブレットなどタッチデバイス用のテキストエディタもあるよ!*17:本連載のサンプルにもCodePenを利用している。06:20Tweet関連記事2019-04-02【indeed】Web業界(フロントエンド〜サーバサイド)技術キーワード別の求人件数(2019年4月...Web業界(フロントエンド〜サーバサイド)の記事には次々と新し...2018-11-27黒い画面だけでWebページを作成-後編:viエディタでコーディング!「前編」の続きです。前編ではフォルダ作成(mkdir)、ファイル...2018-10-18【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事)以前、「書ける前に読む!HTML、CSS、JSの書式」*1という連載記...2018-10-04【Textastic】もしかしてだけどスマホで技術ブログかけちゃうんじゃないの?前回、タブレットだけで技術ブログが書けるのか検証した結果、...2018-01-18周回遅れでもWebGLを事始める!canvas大地に立つ!!ブラウザでの3D(3次元)を表現する「WebGL」。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。