WEBエンジニアになろう！
WEBエンジニアになろう！- 第2回 「はじめは何すればいいの？作業環境と簡単なコーディング 」
Updated:
: Posted on
: Posted on
「WEBエンジニアになろう！」シリーズの目次
- 作りたいもの、必要なソフトウェア
- はじめは何すればいいの？作業環境と簡単なコーディング
- 一つのブロックと2列の組み方
- マークアップとスタイル 2
- マークアップとスタイル 3
- マークアップとスタイル 4…いつまで続く
- プロならここまでやります見せます
動画
こちらでYoutube配信もしてます！是非イイねとチャンネル登録お願いします
土台(開発環境)
前回「作りたいもの、必要なソフトウェア」では”HTML/CSS/Javascriptで作れます”と言いましたが、今どきそのままHTML/CSSを書いてる人なんていません。
PUG(パグ)で書いてHTMLを作ったり、SASS(サス)で書いてCSSを作ったりしてます
初心者には難しいですよね。
エンジニアによっては「は？PUGから教えるの？HTMLをシッカリ勉強してｋ…」みたいな意見もあると思いますが、自分はHTMLの本質は”何が書いてあるか“だと思いますので、何が書いてあるかわかりやすいPUG・SASSをいきなり教えます。
開発環境を理解していないと実際の現場で全然活躍できない場合があるので実はHTML/CSSより、開発環境を理解するほうが大事だったりします。(HTML/CSSはなんとかなります)
今回の目標
今回はスマートフォンは考慮しないです。
構成は
- タイトル
- サブタイトル
- 文章
この順番の単純な構成で、色、大きさのなどの決め方を学びたいと思います。
必要なもの
- node.js(ノードジェイエス)
- gulp(ガルプ)
とりあえず、２つをインストールしましょう
Windowsの方はこちらが参考になると思います。
macはこちら
(わからなかったら、ググってください。エンジニアはググる事を10分に1回はしてます。)
作業環境作る
インストールが完了したら下記のzipをダウンロードして適当な所に解凍
ちょっと言葉や画像ではわかりにくいので、動画をチェックしてください
- フォルダごとVSCodeにドラッグ・アンド・ドロップ！
- [email protected]を押してコマンドを出す
- npm i
“npm install”でもOKです - 待つ
作業を開始する
- npm run dev
- エラー無くブラウザが開いたらOKです
この環境は下記の事をしてくれる環境です
- PUG->HTMLを自動で行う
- SCSS->CSSを自動で行う
- ローカル(PC内)にサーバーを設置
Pug(HTML)を作る
実際に書いていきましょう。
<!DOCTYPE html>
html(lang="ja")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title lecture 2
link(rel="stylesheet", href="style.css")
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
body
h1.title Solutions
h2.solution_title 猫を吸う力を鍛える
p.solution_text.
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。
弱虫やーい。と囃したからである。
小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。ここまでかけたらブラウザをチェック！！HTMLだけでもけっこうきれいに表示してくれます。
エラーがなければ次はSass(CSS)です！
SASS(CSS)を作る
body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
color: #343434;
}
.title {
font-size: 70px;
color: #AC2727;
font-weight: 300;
letter-spacing: 0.2em;
}
.solution_title {
font-size: 32px;
font-weight: 600;
letter-spacing: 0.15em;
}
.solution_text {
line-height: 2;
}いい感じにコーディングできたらOK、色々いじって楽しみましょう！
続きは次回！
