2019年9月30日パスについて2前回のレクチャーでパスについて書きましたが、もう少し基礎知識についてまとめました。【パスとは】パスとは「Path」、つまり日本語に訳すと「経路」のこと。目的のファイルがどこのフォルダに保存されているのかを示す経路のようなもの。【絶対パス】URLでページを指定して、目的地(情報)がどこにあるのかを確実に伝える方法。今いる場所(階層)を基準にして、目的地(情報)がどこにあるのかを伝える方法。前回の記事で話したのは相対パスですね。絶対パスは誰が見てもどこに何があるかわかりやすく、相対パスは少し複雑ですが、慣れれば楽だったりするのかな。2019年9月26日パスについてCSSが外部ファイルとしてあり、CSSファイルがHTMLファイルと別の場所にある場合、その場所を示してあげないと、CSSが反映されない。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がどこにいるかを考えると書き方がわかりますね。2019年9月24日CSS:外部参照と、リセットノーマライズレクチャー7:CSS:外部参照と、リセットノーマライズ【メモ】CSSはheadタグでは書かず、別のファイルで書くのが通常。別のファイルで書くこと:外部参照ヘッドタグの中に書くことを内部参照タグの中にスタイル属性で中に書くこと:インラインというCSS用に新しいファイルを作成するリンクタグ作成。スタイルシートをリンクするということを記載。ハイパーテキストリファレンスの訳:読み込みたいファイルのパスを記載。href=”stylesheet.css”>また、複数の頁になった際にもこのリンクタグをきちんと書いておけば全ての頁に適用することができる。HTMLと分けることでよりHTMLをスッキリ綺麗に管理できるということ。Soucetree難しいのでてきた。Soucetreeとは?“Gitを簡単に使えるようにしたツール。”Gitとは?”「Git」は複数人でプログラムのソースコードなどの変更履歴を記録・追跡するためのバージョン管理システム。バージョン管理を行うとファイルを簡単に昔の状態に戻すことができるため、どのタイミングでバグが発生したかといった調査を行いやすいメリットがある。特定のバージョンから複数のバージョンに分岐して、あとからまとめるといったことが可能。”便利そうな響きだけど、どんな風に使うのか、イマイチよくわかってないな。この時のバージョンに戻そう〜ってのが簡単にできるということかな。ダウンロードできた気がするけど、画面の様子が何だか違うような。Evernote第二弾。Evernoteのダウンロード。”Evernoteは、シンプルに言うと「メモを作成する」ツールです。文字だけではなく、画像や動画、位置情報も記録できます。クラウド上でデータを管理できるため、複数のデバイスで同じ内容を確認できるのも便利なポイントです。簡単にまとめましたが、メモ帳アプリ版ですかね。画像もドラッグで簡単にアップできました。いう便利なものがあるんだな。親子の関係がわかりやすくするため、インデントという半角スペースを入れる。どの要素がどこに入っているのか見やすくするため。codeでは、Shift+alt+Fで綺麗なインデントに揃えられる機能があるみたいです。人が見た際にわかりやすくするためコメントをかくと良い。*/コメントの書き方はHTMLとCSSで違うんですね。CSSの基本と内部参照HTMLでただ羅列された材料にCSSでデザインの調整をします。CSSにはプロパティと呼ばれるものがたくさんあり、プロパティに値を与えてあげることで、デザインの調整ができる。ここでは、ヘッダーとパラグラフタグに文字の大きさを与えてあげたのと、マージン(余白)はなし(0)としてあげてます。CSSでデザインの調整は面白いので好きです。HTMLを作る時に必ず記述する基本要素HTMLを書く際には、必ず記載する文句があるお話。それがないと日本語の文字コードが正しく認識されず、文字化けを起こしたりする。html>:何のバージョンを使っているかHTML5を使用している場合。charset=”utf-8′′>文字コードを指定するもの現在のウェブサイトでutf-8以外で作られているものはほとんどない。見ている端末に合わせるというのが一般的title:ウェブページのタイトルを名付けるものウェブページのタブに表示されるこれはもうHTMLを書く際にはセットで覚えておけばいいものですね。Alfredエンジニアになるまでの道を応援してくれている監督からの宿題。ありますが、今回はAlfredをダウンロードしてみようかと。これなんだろう?調べてみた。”Macのランチャーアプリと呼べれるもので、アプリケーションの検索や起動を素早く行えたり、特に検索についてはパソコン内部のファイル・フォルダの検索やWebでの検索などを強力にサポートしてくれるとても便利なアプリケーションです。”とりあえず何も考えずにインストールしてみた。使い方は、option+spaceキーで検索窓が表示される。ここで検索したいものを入力すると検索できるという感じ例えばアプリを立ち上げられたり、フォルダを立ち上げたり、webでの検索が簡単にできたり、効率を上げるためのアプリですかね。確かに、option+spaceキーを覚えておけば、簡単に検索窓が現れて検索できるのは便利かも。空要素と属性いきなり難しい気が。pタグでとりあえず材料を揃えていく。メールアドレスとパスワード入力画面は空要素と言われるinputタグで簡単にできました。登録するボタンはボタンタグ使用。簡単にここまで作成できた。空要素というのはつまり、マークアップする必要がないもの。終了タグが必要ないもの。属性を使って追加の情報を与えてあげる。(ここではメールアドレス・パスワードを入れる所だよという感じ)勝手に入力するフォームができた。name属性は見分けがつくように名前をつける。見分けがつけばなんでもいいということかな。buttonタグはマークアップする必要があるから終了タグをつける。その空要素とマークアップする必要があるものはどうやって見分けたら良いのだ?単純に覚えろという話?疲れた頭でぼんやりとここまで。余談ですが、最初バーッと書いたら、ボタンタグが表示されなかった。bottonになってた。スペルミスって意外とよくあるよね。