IT

web開発未経験者がwebの勉強をするには (HTML, CSS編)

  webアプリケーションが乱立する今の時代、一人でwebアプリを作れないと生きていけません。しかし、義務教育ではweb技術について教えてはくれないので、自らで学習する必要があります。
  そこで今回は、今までweb開発を全く経験してこなかった人が0から勉強する為には何をして、どのような技術を学べばいいのかをざっくり紹介します。

準備

・ブラウザ (Chrome等、なんでも良い)
・エディタ (メモ帳等、なんでも良い)

webアプリケーションに出てくる技術

・フロントエンド
・バックエンド
・インフラ

フロントエンド

webページの見た目に関わる部分だよ!
・HTML
・CSS
・JavaScript
・etc…

バックエンド

データベースの中身を取得して、webページに表示したりするよ!
・Ruby
・PHP
・Java
・Scala
・Go
・etc…

インフラ

webアプリケーションやデータが置いてある場所だよ!
・webサーバ
・DBサーバ
・キャッシュサーバ
・etc…

初心者は何からやれば良い?

・環境構築が楽なフロントエンドがオススメ、メモ帳とブラウザがあれば作れる
・慣れてきたら XAMPP 使ってバックエンドも勉強してみよう
・バックエンドも慣れたらインフラの勉強をして、インターネットに公開出来るようになろう

HTML、はじめの一歩

・test.html というファイルを作ろう
・メモ帳で開いて下記のコードをコピペして保存しよう
・作ったファイルを右クリックして、ブラウザから開こう
・Hello, HTML! って表示されたね!!!!!!!!
<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>ページのタイトル</title>
</head>
<body>
    <p>Hello, HTML!</p>
</body>
</html>

HTML の勉強方法

・HTML は <p> みたいなタグで構成されるからタグの勉強をしよう
・インターネットには古い記事が多い、必ず HTML5 であるか確認しよう
http://www.htmq.com/html5/ 参照
・HTML だけだと見た目がダサいので、HTML に慣れたら CSS の勉強をしよう!
・CSSはサイトのデザインを良くしてくれるよ

CSS、はじめの一歩

・さっき作った test.html に CSS を付け足して保存しよう
・ブラウザで開いたら、フォントサイズが変わってるね!!!!!!!!
<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <style>
        .text{
            font-size: 40px;
        }
    </style>
    <title>ページのタイトル</title>
</head>
<body>
    <p class=”text”>Hello, HTML!</p>
</body>
</html>

CSS の勉強方法

・CSS はどの要素に適用するか決める「セレクタ」と、どんなことをするか決める「プロパティ」で構成されるから、この2つを勉強しよう
・インターネットには古い記事が多い、必ず CSS3 であるか確認しよう
http://www.htmq.com/style/index.shtml 参照

これから先

・メモ帳で勉強するのは大変だから、専用のエディタを入れよう (むずかしくないよ!)
・オススメは https://code.visualstudio.com/ 、英語だけど怖くないよ!
・入れ方がわからなかったら「VSCode インストール」で検索!
・エディタを入れると HTML の勉強がすっごく楽しくなるよ!
・フロントエンドに慣れたら XAMPP っていうのを入れるとバックエンドの勉強もできるよ!
http://www.hp-stylelink.com/news/2013/07/20130712.php  が参考になりそう!

まとめ

・webの技術には「フロントエンド」「バックエンド」「インフラ」がある
・インフラについては触れてないけど、難しいからまた今度する
・一番始めにやるのは HTML が良くて、慣れてきたら CSS をやろう
・エディタを入れよう
・バックエンドの勉強をする時は「XAMPP」を入れよう

これ書いた人

焼きそばメロンパンです、質問やマサカリは下記のTwitterへどうぞ
 https://twitter.com/ice_arr
60か国の講師陣とマンツーマン!

Pickup post

  1. 【合格体験記】AWS 認定クラウドプラクティショナーの効率的な勉強方法
  2. 【CCENT廃止】Cisco認定試験制度変更(2020年2月24日~)

Related post

  1. IT

    【Wireless LAN Controller(WLC)】概要と設定

    Wireless LAN Controller(WLC)とは …

  2. AI人工知能

    人工知能について知る!【ディープラーニングについて学ぶ】

    人工知能という言葉がTVなどでも取り上げられるようになり、将棋や囲碁の…

  3. AWS

    【CCENT廃止】Cisco認定試験制度変更(2020年2月24日~)

    Cisco認定試験(CCENT,CCNA,CCNP,CCIE)が20…

  4. Cisco Nexusシリーズ

    【vPC(virtual PortChannel)】設定

    vPCの設定方法下図を例にvPCの設定をしていきます。…

  5. AI人工知能

    人工知能について知る!【パーセプトロンについて学ぶ】

    上記のサイトで、人工知能について学ぶ際に実…

  6. IT

    【LPIC廃止!?】新設されたLinuC試験について

    最新情報はこちらの記事を参考https://infocloudin…

Comment

  1. No comments yet.

  1. No trackbacks yet.

おすすめ記事

  1. AWS Practitioner
価格満足度No1
  1. 最新ニュース

    タバコの値段がまた上がる?今後のタバコ事情を紹介
  2. AI人工知能

    人工知能について知る!【ディープラーニングについて学ぶ】
  3. AWS Practitioner

    AWS

    【合格体験記】AWS 認定クラウドプラクティショナーの効率的な勉強方法
  4. 基本情報技術者試験

    基本情報技術者試験に合格したい方必見!効率的な勉強方法
  5. 英会話

    英語を勉強するならDMM英会話!効率的な勉強法をご紹介
PAGE TOP