[WEB系もやってみよう] WEBを支える技術

WEB系もやっていこう

きっかけはフ○テレビじゃないUdemy

UdemyでWebアプリケーションエンジニアコースを受講してるんですが、その中でWebアプリケーションを作っていく流れというか何を使っていけばいいかを知ることができました。

Udemyで目覚めたもの

[JavaScript] Udemyをやっていたら気になったJavaScript

2017.03.15

Udemyの一番お得な利用方法とは

2017.02.17

今後Webアプリケーションを作ってみたいという欲望のため色々なことをここで試してみようかと。

ちなみに今気になっていて色々いじってみたいなと思っているのは・・・

  • BootStrap
    これは以前も紹介しました。Webサイトを作っていく上で便利なフレームワークです。スマホの画面サイズも検知してデザインを変えられる優れもの。
  • JavaScript
    Webサイトで動きのあるものなんかを作る言語です。ブラウザゲームなんかはこれ
  • PHP
    サーバーサイドのプログラムを作れる言語です。出版社じゃないです。Webアプリケーションを作るならこれとかRubyとかの言語が必要です。
  • Erectron
    これはWebアプリケーションとは違うけど気になったものです。詳しいことは分かりませんが、デスクトップアプリケーションが簡単に作れるらしい。Microsoft製Editorの「VisualStudio Code」はこの技術を使ってつくられたんだとか。これも気になるなあ。

この中で「Erectron」だけはWebアプリケーションってわけではないので、別カテゴリでしょうけど。

にゃんこ
メリ

以前紹介したBootStrapとJavaScript

[JavaScript] Udemyをやっていたら気になったJavaScript

2017.03.15

BootStrapって何よ!?

2017.03.02



まずはJavaScriptかなあ

手軽にできる

まずは以前から俄然気になりだした「JavaScript」をやっていきたいですね。これ初心者もやりやすい言語と言われています。最近の仕様ではオブジェクト指向的な書き方ができるなど難しくなっているみたいですけど、使わなくてもある程度はできるはず。

Google Chromeとかブラウザで動作確認できる

これが最大の魅力!?でしょうか。このJavaScript、普段使っているブラウザ(Google ChromeとかFireFoxとか)で動作確認、デバッグができるんです。他のJavaとかC#とかの言語のように仰々しくて小難しい統合開発環境をインストール、設定する必要がありません。これはデカい。まず初心者の壁は言語を覚えるよりこの開発環境のセッティングでつまずくことが多い。それがないだけでもだいぶハードルが下がりますね。

なのでやろうと思えばすぐにもでできる!とはいったもののWebサイト上で動くものなんでJavaScriptを覚える為には多少「HTML」「CSS」も覚えないと・・・。こちらはWebサイトのレイアウトやデザインを構成するための言語ですね。こっちも合わせてやっていきますかー。

スポンサーリンク



というわけでまずは基本のHTML

そういうわけでまずは基本中の基本のHTML文です。

本Blogの内容を試して、トラブルや故障の原因になったとしても責任は負えません。そんな危ないことはしていませんが、自己責任でお願いしますね。

各行の説明

・一行目

これは文書型宣言ですね。HTMLの最新であるHTML5を指定してます。これはおまじないとして覚えましょう。

文書型宣言(ぶんしょかたせんげん)、DOCTYPE宣言(DOCTYPEせんげん)は、SGMLやXML文書を、文書型定義(DTD)と結びつけるための宣言である。
Wiki

・二行目以降

でもって、HTML文書であることを示す為に全体を

で囲みます。lang=”ja”は日本語で書かれているってことです。

meta charsetは文字コードを指定。最近、文字コードは「UTF-8」が主流ですね。 もう日本語は「Shift-Jis」なんて使わないんですなあ。「title」がサイトのタイトル、「description」はサイトの説明です。Google検索で出てくる検索結果に表示される部分ですね。この「スメシドットコム」を例にすると「title」「description」は以下のように表示されます。「author」は作成者情報、これは特別要らないっぽいけど・・・。

WEB

上がtitle、下がdescription

ここまでがheaderと呼ばれる部分です。サイトの基本情報とか設定をする部分ですね。

・9行目以降

そしてサイトのコンテンツ部分を

の間に書いていきます。 みんなが検索して開いたページはこの部分を見ているということになりますね。

の囲みは段落です。 これは「Hello World!!」と文字列を表示しているだけです。

これをテキストファイルに書いてファイルの拡張子を「.html」にして保存。それをブラウザで開くと表示を確認できます。

実際の表示はこんなです。文字だけなんでまだ味気ないですね。ここから色々試していこうと思います。

HTML

これだけ…ですが…

にゃんこ
だいぶしょぼいなあ
メリ
シッ


コメントを残す

メールアドレスが公開されることはありません。