CSS:外部参照と、リセットノーマライズ

レクチャー7:CSS:外部参照と、リセットノーマライズ

【メモ】
CSSはheadタグでは書かず、別のファイルで書くのが通常。

別のファイルで書くこと:外部参照
ヘッドタグの中に書くことを内部参照
タグの中にスタイル属性で中に書くこと:インラインという


CSS用に新しいファイルを作成する
リンクタグ作成。スタイルシートをリンクするということを記載。
fref属性の記載。ハイパーテキストリファレンスの訳:読み込みたいファイルのパスを記載。
<link rel=”stylesheet” href=”stylesheet.css”>
また、複数の頁になった際にもこのリンクタグをきちんと書いておけば全ての頁に適用することができる。

HTMLと分けることでよりHTMLをスッキリ綺麗に管理できるということ。

c.sakyou

フロントエンドエンジニア環境準備③ Soucetree

難しいのでてきた。

Soucetreeとは?
“Gitを簡単に使えるようにしたツール。”

Gitとは?
”「Git」は複数人でプログラムのソースコードなどの変更履歴を記録・追跡するためのバージョン管理システム。バージョン管理を行うとファイルを簡単に昔の状態に戻すことができるため、どのタイミングでバグが発生したかといった調査を行いやすいメリットがある。また特定のバージョンから複数のバージョンに分岐して、あとからまとめるといったことが可能。”

便利そうな響きだけど、どんな風に使うのか、イマイチよくわかってないな。やっぱりこの時のバージョンに戻そう〜ってのが簡単にできるということかな。
ダウンロードできた気がするけど、画面の様子が何だか違うような。。

c.sakyou

フロントエンジニア環境設定② Evernote

第二弾。Evernoteのダウンロード。

これはなんぞや。

”Evernoteは、シンプルに言うと「メモを作成する」ツールです。文字だけではなく、画像や動画、位置情報も記録できます。クラウド上でデータを管理できるため、複数のデバイスで同じ内容を確認できるのも便利なポイントです。” とのこと。

メモ帳との違う点
・データを検索できる
・複数人とEvernoteのデータを共有できる
・タスク管理がしやすい
・Googleドライブと連携できる
・パスワードをかけられる等等

簡単にまとめましたが、メモ帳アプリ版ですかね。他人とも共有できる。
画像もドラッグで簡単にアップできました。こういう便利なものがあるんだな。

c.sakyou

HTML,CSSのインデントとコメント

レクチャー6 HTML,CSSのインデントとコメント

【メモ】
親子の関係がわかりやすくするため、インデントという半角スペースを入れる。
どの要素がどこに入っているのか見やすくするため。
Visual studio codeでは、Shift+alt+Fで綺麗なインデントに揃えられる機能があるみたいです。

また、人が見た際にわかりやすくするためコメントをかくと良い。
HTMLコメント書き方:<!— 間にコメント入れる—>
CSSコメント書き方:/* コメント */

コメントの書き方はHTMLとCSSで違うんですね。知らなかった。

c.sakyou

CSSの基本と内部参照

レクチャー5 CSSの基本と内部参照

HTMLでただ羅列された材料にCSSでデザインの調整をします。

CSSにはプロパティと呼ばれるものがたくさんあり、プロパティに値を与えてあげることで、デザインの調整ができる。

ここでは、ヘッダーとパラグラフタグに文字の大きさを与えてあげたのと、
マージン(余白)はなし(0)としてあげてます。

CSSでデザインの調整は面白いので好きです。

c.sakyou

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