HTMLを作る時に必ず記述する基本要素

レクチャー4 HTMLを作る時に必ず記述する基本要素


HTMLを書く際には、必ず記載する文句があるお話。
それがないと日本語の文字コードが正しく認識されず、文字化けを
起こしたりする。

【メモ】
HTMLを書く際には決まり文句のタグがある
<!DOCTYPE html>:何のバージョンを使っているか
HTML5を使用している場合。(今はほとんどHTML5なので
他を覚える必要はない)
この文書がHTMLであると示すために、HTMLタグを必ず書く
HTMLタグの中にはhead,bodyタグを入れる

headタグの中身:
<meta charset=”utf-8″>
文字コードを指定するもの
現在のウェブサイトでutf-8以外で作られているものは
ほとんどない。

<meta charset=”viewport” content=”width=device-width”>
どこからどこまでを見るかという設定
見ている端末に合わせるというのが一般的

title:
ウェブページのタイトルを名付けるもの
ウェブページのタブに表示される

これはもうHTMLを書く際にはセットで覚えておけばいいものですね。

c.sakyou

フロントエンジニア環境準備① Alfred

エンジニアになるまでの道を応援してくれている監督からの宿題。

色々ありますが、今回はAlfredをダウンロードしてみようかと。

これなんだろう?調べてみた。

”Macのランチャーアプリと呼べれるもので、アプリケーションの検索や起動を素早く行えたり、特に検索についてはパソコン内部のファイル・フォルダの検索やWebでの検索などを強力にサポートしてくれるとても便利なアプリケーションです。”

とりあえず何も考えずにインストールしてみた。
使い方は、option+spaceキーで検索窓が表示される。

ここで検索したいものを入力すると検索できるという感じ

例えばアプリを立ち上げられたり、フォルダを立ち上げたり、webでの検索が簡単にできたり、効率を上げるためのアプリですかね。
確かに、option+spaceキーを覚えておけば、簡単に検索窓が現れて
検索できるのは便利かも。

かっこいい。

c.sakyou

空要素と属性

レクチャー3 空要素と属性

いきなり難しい気が。
pタグでとりあえず材料を揃えていく。
メールアドレスとパスワード入力画面は
空要素と言われるinputタグで簡単にできました。
登録するボタンはボタンタグ使用。

簡単にここまで作成できた。

【メモ】
空要素というのはつまり、マークアップする必要がないもの。
終了タグが必要ないもの。
属性を使って追加の情報を与えてあげる。
(ここではメールアドレス・パスワードを入れる所だよという感じ)
勝手に入力するフォームができた。
name属性は見分けがつくように名前をつける。
見分けがつけばなんでもいいということかな。

buttonタグはマークアップする必要があるから
終了タグをつける。

その空要素とマークアップする必要があるものは
どうやって見分けたら良いのだ?
単純に覚えろという話?

疲れた頭でぼんやりとここまで。。

余談ですが、最初バーッと書いたら、ボタンタグが表示されなかった。
なんでなんで。と一言一句チェックしたら、
button が bottonになってた。



スペルミスって意外とよくあるよね。
よくやるやつ。

c.sakyou

簡単なHTMLを作成してみよう

レクチャー2 簡単なHTMLを作成してみよう

このレクチャーでは簡単なHTMLで入会申込み画面を作ろうというもの。
下記完成画面

え、できるかな?
まずは基礎のヘッダーを書くところから丁寧な説明つき。
第一弾はこれだけ書いただけ。

【メモ】
<h1>はHTMLタグ
タグを使ってこの文書のこの部分はこういう意味ですよと
教えてあげる。
<h1>のhはheadingという意味、1はlevel1
つまりはh1は大見出しという意味。
この文章は大見出しであると意味づけしていて、大見出しであれば
少し大きめにした方がいいとブラウザは解釈し少し大きめにブラウザ
に表示されたりする。
様々なタグがあって、100種類以上ある。
タグの種類を覚えて、文書に意味づけすること。
タグを二つ書くことをマークアップするという。
マークアップラングエージ。
Webページのことを、ハイパーテキストという。
HTML=Hyper Text Markup Language


なんとなくHTML触ってたけど、こんな意味までは考えたこと
なかったな。そして、こうやってメモしてくのはいいかもね。
入れてはすぐ忘れる脳みそしてるから見返したときに、
あーそうだったってなるよね、きっと。

c.sakyou

Webの開発環境を整えよう

レクチャー1 Web環境整えよう

まず第一弾がWeb環境を整えようです。
そんなところからやってくれます。基礎の基礎。
プログラミングを勉強するのにはパソコンが必要だよーというお話から
開発に必要なテキストエディタのインストールのお話。

以前に自分がプログラミングを勉強していた際には、
Atomsというテキストエディタを使用しておりましたが、
この講座に合わせて、マイクロソフト開発の”Visual Studio Code”
をダウンロードすることにしました。
なんでも形を合わせたいタイプ。いろんなエディタがあるけど、
どれがいいとか全くわかりません。使い勝手の違いなのかな?

ちなみにですが私のパソコンはMacです。
仕事ではWindowsなのですが、なんとなくかっこいいからとわざわざ
Macを買いました。使いづらくてしょうがないです。
見た目にこだわるタイプ。でも使いこなせるまでになりたいな。。

エディタをインストールした後は、英語版なので、日本語版にすることとフォントサイズや配色テーマだとか細かい設定をしてました。そこらへんは好みですね。

また、最後にWebブラウザのソフトのダウンロード。
Chromeですね。MacにはSafariというブラウザが元々入っていますが、使いやすいとは言えないらしいです。
そこらへんは詳しいことわかりません。とりあえずChromeのダウンロード。

というところですかね。
これでプログラミングする環境ができたよって感じです。

c.sakyou

Udemy 講座[HTML/CSS/javaScript]フロントエンドエンジニアになりたい人のWebプログラミング入門

これからUdemyの講座にて勉強していきます。私も知らなかったのですが、そんな高くなくプログラミング講座を動画で受けることができます。
私が選んだ講座はこれです。

安い。¥1,560で62レクチャー。

”Webの仕事に関わる人なら誰でも必要な、「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます。”

とのこと。。こういうのあるんだな。
学校に行かなくても、自分のペースでできるのはいいですね。
ちょろっと見てみたけど、かなり丁寧にレクチャーしてくれてて、
まさに初心者向け。いいです。

一つのレクチャーも5分から10分程度なので、空いた時間で少しずつ進められるかな。

c.sakyou

今日から始めます!

初めまして!プログラミング初心者の佐京です。
これからフロントエンジニアになるべく学習していこうと思います。
目標は半年後に何かしらの形でフロントエンジニアとして仕事に就くこと。

そのために、これからHTML・CSS・Java script等、フロントエンジニアに必要なスキルを0から学び、記録のためにこちらにアップしていこうと思います。

初心者なので、大事な基礎固めをしっかりやっていこうと思います!

実は少し前にプログラミング のマンツーマンレッスンを受けてましたが
その際に一回挫折してます。思ったより難しいし、自分にうまくハマらなかった。。これで食べてくってのは夢のまた夢だったのかなあと諦めかけてました。

でもたまたま出会ったフロントエンジニアさんの話を聞いて、心の隅っこで諦められていない自分に気づいたのと、学び方が自分に合ってなかったってことを実感しました。

なんでもそうだと思いますが、「継続すること」が大事だと思います。
なので時間がかかってもいいし、簡単なことでもいいから、毎日少しづつでも目標に向かって進んでいくってことを今日決めました。
諦めずに進んでいく。

ちなみにですが、現在はITとは全く関係のない仕事に就いており、仕事をしながら、プログラミングの勉強をし、半年で転職するとこまで行けるかどうかというところです。現職も暇ではないので、考えると気が遠くなりますが、自分へのチャレンジと思ってます。継続することを第一に考え、自分が楽しいと思ってできることからどんどん知識を増やしていくのがいいのかな。

c.sakyou