パスについて②

前回のレクチャーでパスについて書きましたが、もう少し基礎知識についてまとめました。

【パスとは】
パスとは「Path」、つまり日本語に訳すと「経路」のこと。目的のファイルがどこのフォルダに保存されているのかを示す経路のようなもの。

【絶対パス】
URLでページを指定して、目的地(情報)がどこにあるのかを確実に伝える方法。

【相対パス】
今いる場所(階層)を基準にして、目的地(情報)がどこにあるのかを伝える方法。

前回の記事で話したのは相対パスですね。
絶対パスは誰が見てもどこに何があるかわかりやすく、相対パスは少し複雑ですが、慣れれば楽だったりするのかな。

c.sakyou

パスについて

CSSが外部ファイルとしてあり、CSSファイルがHTMLファイルと別の場所にある場合、
その場所を示してあげないと、CSSが反映されない。
<link rel=”stylesheet” href=”stylesheet.css”>
(href属性の中で指定してあげる)

書き方:ディレクトリ名とファイル名をスラッシュで区切ってあげる

【例1】
CSSというディレクトリの中にCSSファイルがある。(HTMLはTOPにいる)
CSS/style.css

【例2】
HTMLがディレクトリ内にある場合(CSSファイルがトップにある)
../style.css

【例3】
HTML、CSSどちらもディレクトリ内にある場合
../CSS/style.css

これは意外と説明が難しい。HTMLからみて、CSSがどこにいるかを考えると書き方がわかりますね。

c.sakyou

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