2019/11/25
今日の日報
学んだこと
git入門
#04 初めてのコミットをしてみよう
わかったこと
- pwd は現在の作業ディレクトリが表示するコマンド
- cd は現在の作業ディレクトを移動するコマンド（cd 移動したい場所/）
- git init はリポジトリを新規作成するコマンド
- cat index.html と入力すると「index.html」ファイルの中身が見れる
- git add index.html でステージング環境にアップできる
- git commit でリポジトリにアップできる（エディタが経ち上がるので、変更箇所・内容などを記載して閉じる）
- git log で変更履歴が見れる
わからなくて調べたこと
- git init の前にディレクトリの指定は必須なのか
◎調べたこと・参考にしたサイト
- 現在のディレクトリまたは指定したディレクトリに「.git」というリポジトリを構成するディレクトリが作成
- 指定しなければ現在のディレクトリに作成されるので必須ではなかった - vim index.html でエディタが立ち上がったけどどういうことなのか（vimが別途立ち上がったわけじゃなくて、iTermだった画面がvimになったので）
◎考えたこと
- iTermからvimを使う（起動）することができるということなのか
◎調べたこと・参考にしたサイト
- vim index.html と入力するとVimが起動され、「index.html」ファイルが作られる - vimからiTermに戻る方法がわからない
◎考えたこと
- 最後の行に :wq とコマンドを入力している様子だが、最後の行にいけない
- 文字入力できるところにコマンドを入力してもただのテキストになってしまう
- 逆に普通のテキストが入力できないこともあるから、テキストモードとコマンドモードみたいなのがありそう（にしてもどうやって切り替えるのかわからない）
◎調べたこと・参考にしたサイト
- vimには通常時コマンドモードと入力時のインサートモードがある
- コマンドモード＝文字の編集や加筆を行う
- インサートモード＝移動や編集コマンドを実行する
- 起動時はコマンドモード
- escキーで切り替えができる（i はコマンドモードからインサートモードへ）
- :wq で「保存して閉じる」というコマンド
本日の感想
- 動画では初歩的なコマンドやVimの機能についての説明がなく、かなり手探りに調べながら進めて時間がかかってしまった
2019/11/24
今日の日報
インストールしたもの
- Git
学んだこと
git入門
#02 バージョン管理の流れを理解しよう
わかったこと
- gitにおけるバージョン管理の流れ
①ファイルを作ったり修正したりする
↓
②ある程度のまとまりになる
↓
③履歴データベースに保存する - gitでは３つの状態を用意している
- 作業エリア
- ステージングエリア（インデックス）
- リポジトリ - 「作業ディレクトリ」で①を行う
- 「ステージングエリア（インデックス）」に②（作業経過）を保存できる
- 「リポジトリ」に③で行う
- リポジトリにはローカルリポジトリとリモートリポジトリがある
- ローカルリポジトリ＝データベース、ひとりで作るときに使う（元に戻したり、別のバージョンを作ったりする）
- リモートリポジトリ＝ウェブ上・ネット上にある、人と共有するときに便利（上級者向け）
#03 gitの設定をしよう
わかったこと
- gitを使い始める前に必須な設定
- 名前（git config --global user.name "名前"）
- メールアドレス（git config --global user.email "メールアドレス"）
※gitはデータを保存するときに名前とメールアドレスを記載することになっている - gitを使い始める前に便利な設定
- メッセージの色分け（git config --color.ui true） - git config -l で設定一覧の確認ができる（git config --list でも同じ）
- git config --help でマニュアルが見れる（configの他にどんなオプションがあるか見れる）（git help config でも同じ意味）
- Gitは「git」に続けて命令を書いていく
その他
わかったこと
- git --version でバージョンの確認ができる
本日の感想
- gitとの心の距離が近くなった（実際に触れ合えたので）
- 間違った命令をしてパソコンがおかしくなっちゃわないか不安になる
2019/11/21
今日の日報
学んだこと
これまでの疑問解決を進める
現状Flexboxは要素を横並びにできるもの、という認識だったので「Flexboxで縦方向に〜」ということがわからなかった。（ display: flex; と記入すればFlexboxの持つ？プロパティが使えるということなのか？）
ー#12 align-itemsを使ってみよう
わかったこと
- FlexboxとはFlexible Box Layout Module（柔軟なレイアウトを短いコード実現できるCSSの新しいレイアウトモジュール）のこと
- HTMLの親要素に「display: flex;」を指定するだけでFlexboxを使える
- 要素内の縦横の配置が簡単にできる
git入門
#01 gitとは何か？
わかったこと
- git（ギット）はバージョン管理システム
- 昔の履歴を管理、別バージョンを同時に開発するための管理するシステム
- gitの公式サイト
- gitを使用するにあたり、Linuxのコマンドを勉強する必要がある
- テキストファイルを編集するためvim（テキストエディタ）の知識が必要
- コマンドラインとはキーボードからコマンドを入力してコンピュータに仕事を行わせるたり操作する方法のこと
わからなかったこと、疑問
本日の感想
- gitの勉強がはじまったけれど、さっぱりわからなくて泣きそう…（わからない単語、イメージできないものが一気に出てきたために…）
2019/11/20
今日の日報
学んだこと
これまでの疑問解決を進める
CSS基礎学習において「わからなかったこと・疑問」にあげていた内容について調べた（Shoota先生のコメントにて解決したものに関しては記載していない）
末尾につく「;」は閉じタグ的な存在なのかな
ー#04 フォントを設定していこう
わかったこと
- 宣言が１つの場合はセミコロンは不要
- 宣言が複数の場合は「；」で区切る必要がある
指定フォントがなかった場合というのは、環境的に持っていないということなのかな（古いPCだと持ってなかったり、ということなのかしら）
なかった場合のゴシック体も環境によって様々になるのかな…（windowsだったらMSゴシックとか、Macだったらヒラギノ角ゴとかそういうこと？）
ー#04 フォントを設定していこう
わかったこと
- 設定されたフォントが表示されるかどうかは閲覧側の環境による
- PCに指定したフォントがなければ、ブラウザのデフォルト設定になる
わからなかったこと、疑問
CSSのボックスモデルの説明（概念）が全然理解できなかった…（とりあえず進めてみて、理解できるかもしれないので一旦置いておこう…）
ー#05 CSSのボックスモデルを確認しよう
わかったこと
- HTML内に記述したタグはコンテンツを表示するための四角い領域を生成する
- これ（↑）を「ボックス」という
- 「ボックス」は４つの領域で構成されている（「content area」「padding」「border」「margin」）
- content area …実際の内容が表示される部分
- padding …要素の中に保持される余白（content areaとborderの間にある領域）
- border …要素の境界（content areaとpaddingを囲んでいる枠線）
- margin*1 …隣接する要素との余白（borderと他の要素の間にある領域）
- このような要素が展開する領域の考え方を「ボックスモデル」と呼ぶ
各要素が四角の中に入っていて、divタグに入れるとさらに大きな四角にいれるみたいな感じなのかな
ー#05 CSSのボックスモデルを確認しよう
わかったこと
- divタグは単体では意味を持たない
- divタグで囲った要素をブロック要素としてグループ化できる
shoota先生の講座を受けて
わかったこと
- Cascadingは「階段状の滝のような」「連鎖的に伝わる」という意味
- CSSは上流で定義されたものが下流へ引き継がれて文書に適用される（上書きされる）
- マークアップしただけでスタイルがかわるのは、ブラウザが標準で持っているCSSがあるため（文字色は黒とか）
-
HTML＝表示するものの構造を示すもの（書式を指定）（まとまりをつくる＝構造化）（スタイルには関与しない）
- classはあらゆるHTMLタグにつけられる
- HTMLの中にCSSをかくことはできるけど、別ドキュメントでつくる（複数ページで共通のスタイルを使うときに効率的）
- gitはバージョン管理システム
- git学習のあとは、はてなブログの記事文をHTMLで書いてみる予定（答えを見ながらやる＝見た目とタグの一致）
本日の感想
- 調べる中でそのものの意味を理解できたこともよかったけれど、それよりもわからなかった部分が明確化できたのがよかった
- Flexboxについては明日調べる
- わかっているつもりのことが言葉にできるレベルの理解に至っていないことに気づいた
- 対面（？）で教えてもらえるありがたさよ…
*1:色の指定ができない
2019/11/15
今日の日報
学んだこと
はじめてのCSS
#12 align-itemsを使ってみよう
わかったこと
-
Flexboxで縦方向に要素を中央揃えにするプロパティがある
-
Flexboxを指定したセレクターに align-items: center; と記入する
わからなかったこと・疑問
-
現状Flexboxは要素を横並びにできるもの、という認識だったので「Flexboxで縦方向に〜」ということがわからなかった。（ display: flex; と記入すればFlexboxの持つ？プロパティが使えるということなのか？）
#13 セレクタの適用範囲を限定しよう
わかったこと
-
text-align を使って要素の中のテキストの行揃えを制御できる
-
text-align: center; で中央揃えになる
-
.works > h1 不等号記号で区切るとworksの直下にあるh1という指定になる
#14 line-heightで行間を調整しよう
わかったこと
-
line-height を使って行間の調整ができる
例）line-height: 1.8; 行の高さを文字の1.8倍にする
#15 プロフィールサイトを完成させよう
わかったこと
-
とくになし
本日の感想
-
CSS基礎が終了した。未解決の疑問があるので、明日はそれらを解決していきたい。
2019/11/14
今日の日報
学んだこと
はじめてのCSS
#08 Flexboxを使ってみよう
わかったこと
- Flexboxを使って横並びにする（横並びにしたい親要素のプロパティに display: flex; と記載する）
#09 アイコン画像のスタイリングをしよう
わかったこと
- img{ border-radius: 20px; } とすると全画像が角丸になる
- .icon img{ 〜とすると「.icon」内にある画像を、という指定になる
- 正方形の画像であれば角丸を 50% とすれば正円になる
- border-wiedth 線の太さ
- border-style 線の種類（solid＝実線）（その他点線などある）
- border-color 線の色
#10 見出しのスタイルを整えよう
わかったこと
- user agent stylesheetによって設定されているものもCSSで上書きすることができる
- font-weight フォントの太さ（normal＝普通の細さ）
- font-size フォントのサイズ
#11 リストのスタイリングをしていこう
わかったこと
- あらかじめ指定されている余白をまずリセットしてから、必要なものだけつけていくとわかりやすい
- list-style-type: none; とするとリストの黒丸が無くなる
先生のお言葉
「わからなかったので調べたらこういうのがあったんだけど合ってますか？」といった質問の仕方が理想
本日の感想
- 現状は上辺をすくい取っているだけで完全理解（どういうタグでどういうときに使える など）に至っていないため、すぐ忘れてしまいそうな不安もあるけれどとにかく触れ合って行きたいという気持ち。
- 実際、突然言葉としてでてくると「あれpタグってなんのタグだっけ…」となってしまったのでその度脳にすりこんで覚えれるようにしていきたい…。
- 睡魔と戦いながら日報を書くと日本語が整わないな…。（これも日本語おかしいな…）
2019/11/12
今日の日報
学んだこと
はじめてのCSS
#03 色の表現方法を学んでいこう
わかったこと
- １つのセレクターに対して、複数のプロパティを設定した場合、後から書いた方が優先される
- rgbのカラー指定は各色を0から255の数字で指定する
- 16進数*1で指定する方法もある（#を書いた後に16進数を書く）
- red、green、blueで同じ文字が続く場合は、それぞれを一文字で表現してもOK（例 #00ff00 → #0f0）
- 透明度の設定、色相彩度、明度を指定する方法もある
- CSSでコメントを書きたい場合は /* */で囲う（HTMLと同様のショートカットが使える→command+/）
#04 フォントを設定していこう
わかったこと
- 文書全体のスタイルはbodyに書く
- font-familyを使ってフォントの指定ができる
- font-family: Verdana, sans-serif; ←Verdanaを使ってね。なかったらゴシック体フォントを使ってね、という意味になる
わからなかったこと、疑問点
- 末尾につく「;」は閉じタグ的な存在なのかな
- 指定フォントがなかった場合というのは、環境的に持っていないということなのかな（古いPCだと持ってなかったり、ということなのかしら）
- なかった場合のゴシック体も環境によって様々になるのかな…（windowsだったらMSゴシックとか、Macだったらヒラギノ角ゴとかそういうこと？）
#05 CSSのボックスモデルを確認しよう
わかったこと
- 背景色の指定は「background-color」というプロパティで指定できる
わからなかったこと、疑問点
- 「HTML で書いたそれぞれの要素がブラウザで表示されるときにはこのような四角い領域を確保してくれます」？？？どのような…？？？
- CSSのボックスモデルの説明（概念）が全然理解できなかった…（とりあえず進めてみて、理解できるかもしれないので一旦置いておこう…）
→#7を見て「このような四角い領域」というのは、各要素が四角の中にいるということなのかなと思った（四角が並んでいるという風に考えるということ？なにも設定をしていなければ）
#06 marginで外側の余白を設定しよう
わかったこと
- マージンはmarginを使って上下左右設定できる
- 上：margin-top
- 下：margin-bottom
- 右：margin-right
- 左：margin-left - 上下左右が同じ数値の場合は「margin: 0px;」でまとめて設定できる
- 0pxの場合は単位を省略することも多い
わからなかったこと、疑問点
- 0px以外は単位を省略できないのか
→別の数値で試してみたら反映されなかった
#07 divタグを使ってみよう
わかったこと
- HTMLではレイアウトのためのdivタグというものが用意されてる
- 入れたい要素をdivタグで囲う
- どのdivかを判別できるように識別子をつけてあげる（例 div class="任意のクラス名"）
- スタイリングのための識別子にはClass属性が使われる
- CSSのセレクターでは、Class属性をつけた要素を .クラス名 で表現できる
- 中央寄せにしたいときは、左右のmarginをautoに設定するテクニックがよく使われる
- margin-right: auto;
margin-left: auto;とすると余った領域を左右に均等に割り当ててくれる
わからなかったこと、疑問点
- 各要素が四角の中に入っていて、divタグに入れるとさらに大きな四角にいれるみたいな感じなのかな
先生のお言葉
CSSはhtmlよりも覚えることがおおく、基礎的な知識と実践の距離が比較的大きいので、混乱することもあるかもしれないけども、ひとつずつ経験して理解できていくから、自分がわからないことをしっかり掴んで言語化できるとよいですね
本日の感想
- HTML基礎より理解に時間がかかる。（HTML基礎は聞いてスッと理解できたけど、CSS基礎は一度噛み砕く作業が必要…）
- これはHTMLに書く、これはCSSに書く、という違いがわからなくてちょっと混乱している。
*1:16進数とは、0から9までの10個の数字と、AからFまでの6個のアルファベットを使って数値を表現する方法である。
