矢印キーを使用しないカーソルの移動

• □が現在カーソルのある位置

コマンドの履歴を使用する

• 矢印キーの上下(↑,↓)で一つ前のコマンド、一つ後のコマンドを呼び出せる。

• 履歴を見たい場合は、historyコマンドでみることのできる

  • 履歴番号　コマンド

    1 2 3 4 5 6 7

    $ history 679 ls 680 vim ~/.zshrc 681 source ~/.zshrc 682 ZDOTDIR 683 $ZDOTDIR 684 echo $ZDOTDIR

• 行番号を指定して実行する

  • !履歴番号
  • 行番号のコマンドがコマンドラインに入力される

    1 2 3

    $ !679 $ ls

設定の「自動文字コード識別設定」をONにする

1. Settings画面を開く

Code -> Preferences -> Settingsの順でSettings画面を開く
- Cmd + ,(カンマ)でも開ける

2. 自動文字コード識別設定を探す

検索欄から、「autoGuessEncoding」を検索

3.「Files:Auto Guess Encoding」にチェックを入れる

再度ファイルを開き直せば、文字化けが解消されているはず

参考

• https://github.com/sorin-ionescu/prezto
• https://qiita.com/s_of_p/items/33c9b18f0dc47ce29024
• https://qiita.com/yasudanaoya/items/8b928cfadbf702108ba3

インストール方法

1. Zshを起動する

1

$ zsh

2. リポジトリをクローンする

• ${ZDOTDIR:-$HOME}とは？
  • $ZDOTDIR : .zshrcの保存場所を設定する環境変数
  • $HOME : ホームディレクトリ
  • :- : 左辺の値が設定されていor空文字列であれば、右辺に設定されてる値が使用される

    1	$ git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"

3. 今まで使っていた設定ファイルを移動させる

1

$ mkdir zsh_orig && mv zshmv .zlogin .zlogout .zprofile .zshenv .zshrc zsh_orig

4. 各コンフィグファイルへのシンボリックリンクを作成する

1
2
3
4

$ setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done

5. zshをデフォルトシェルに設定

• chsh : ログインシェルを変更する

  1	$ chsh -s /bin/zsh

テーマの設定

テーマ一覧を見てみる

1

$ prompt -s

テーマを設定する

1

$ prompt -s テーマ名

Macの場合

prompt -sだと、そのセッションではテーマが変更されるが、再起動ログインし直すとデフォルトのテーマになってしまうので、設定~/.zshrcに追記しておく必要がある

1
2
3
4
5
6
7

$ prompt -s powerline
Set and save not yet implemented.  Please ensure your ~/.zshrc
contains something similar to the following:

  autoload -Uz promptinit
  promptinit
  prompt powerline

powerlineを使用する場合、特殊なフォントが必要

1. 以下GitHubのリポジトリをダウンロード
   https://github.com/powerline/fonts

• 適当なディレクトリに移動後

  1	git clone https://github.com/powerline/fonts.git

2. install.shを叩く

   1 2	$ cd fonts $ ./install.sh

3. 使用しているターミナルでフォントを設定

• 文字列にPowerlineが入っていれば使えるはず

コマンドラインの構文の概要

• git : 必須
• [スイッチ] : オプション
• <コマンド> : オプション
• <引数>: オプション

  1	git [スイッチ]<コマンド><引数>

ヘルプにも同じような構文の記述がされている

1
2
3
4
5

usage: git [--version] [--help] [-C <path>] [-c <name>=<value>]
           [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
           <command> [<args>]

ダッシュ(-)1個とダッシュ(–)の使い分け

• 1つ(-) : １文字のスイッチ(省略型)
• 2つ(–) : 略さずに完全に記述する長いスイッチ

リポジトリで「管理されている」ファイルのリストを取得する

ls-filesコマンドの-cオプションを使用する

ls-filesはデフォルトで-cオプションがついている

-c, –cached

Show cached files in the output (default)

実行結果例

1
2
3
4
5
6

% git ls-files 
1
2
3
4
aaa

リポジトリで「管理されていない」ファイルのリストを取得する

ls-filesコマンドの-oオプションを使用する

-o, –others

Show other (i.e. untracked) files in the output

実行結果例

1
2
3

% git ls-files -o
5
bbb

マージンについて

• マージンとは日本語で余白
• 要素の一番外側に位置する領域を意味する
• background-colorを設定している場合、色の領域は広がらない

マージンとマージンは相殺する

margin-bottom:20pxとmargin-top:30pxが上下に並んでいる場合、2つの要素の距離は２つの値を足した50pxにはならず、重なった部分のマージンは重なったままになるので、結果は30pxのマージンが取られた状態になる

記述する値によって設定できるマージンが変わる

1. 1つの値を設定する
   • 上下左右のマージンが同じだけ設定される

     1 2	<!-- 上下左右全て100px分のマージンが設定される --> margin: 100px;

2. 2つの値を設定する
   • 上下、左右のマージンが別々に設定される

     1 2	<!-- 上下:100px,左右:50pxのマージンが設定させる --> margin: 100px 50px;

3. 3つの値を設定する
   • 上、左右、下のマージンが別々に設定される

     1 2	<!-- 上:100px,左右:50px,下200pxのマージンが設定される --> margin: 100px 50px 200px;

4. 個別に値を設定する
   • 上の３つとは少し記述の仕方が変わっる

     1 2 3 4 5

     <!-- 明示的に設定する --> margin-top: 100px; margin-right: 100px; margin-bottom: 50px; margin-left: 100px;

パディングについて

• マージンの１つ内側の余白を設定する
• background-colorを設定している場合、色の領域も広がる

width属性とpadding

-width属性はpaddingのピクセル数に対する値ではなく、画面に対する値を設定している
- なので、paddingを広げても文字は広く表示されない

記述する値によって設定できるパディングが変わる

1. 1つの値を設定する
   • 上下左右のパディングが同じだけ設定される

     1 2	<!-- 上下左右全て100px分のパディングが設定される --> padding: 100px;

2. 2つの値を設定する
   • 上下、左右のパディングが別々に設定される

     1 2	<!-- 上下:100px,左右:50pxのパディングが設定させる --> padding: 100px 50px;

3. 3つの値を設定する
   • 上、左右、下のパディングが別々に設定される

     1 2	<!-- 上:100px,左右:50px,下200pxのパディングが設定される --> padding: 100px 50px 200px;

4. 個別に値を設定する
   • 上の３つとは少し記述の仕方が変わっる

     1 2 3 4 5

     <!-- 明示的に設定する --> padding-top: 100px; padding-right: 100px; padding-bottom: 50px; padding-left: 100px;

ボーダーについて

• マージンとパディングの境界線の設定ができる

記述する値によって設定できるボーダーが変わる

1. 3つの値を設定する

   • 線の太さ、線の色、線の種類を設定する

     1 2	<!-- 線の太さ:1px,線の色:黒,線の種類:実線--> border: 1px black solid;

2. 各要素を別々にかつ、上下左右を変えて設定できる

   • 設定方法が細かくあるので、参考リンクだけを紹介する

   w3schools border-style

ブラウザのデフォルトのマージンやパディングを無効にする

1
2
3
4
5

<!-- bodyタグに対して設定する -->
bodu{
	margin: 0;
	padding: 0;
}

postion属性とは

• 要素の位置を指定するための属性

指定する方法の種類

1. relative : 相対位置への配置
   • その要素が本来配置される位置からの相対位置
2. absolute : 絶対位置への配置
   • 画面上の座標
3. fixed : 絶対位置への配置 + スクロールされても位置が固定

指定方法

1. まずは位置の指定方法を記述する

   1	position: relative;

2. どちらの方向にどれだけ動かすかを指定する

   1	top: 200px;

まとめると

1
2
3
4

.test{
	position: relative;
	top: 200px;
}

relativeとabsoluteの違い

イメージ

コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!DOCTYPE html>
<html>
	<head>
		<title>position</title>
			<style type="text/css">

				.first-section{
					background: lightgreen;
					width: 100px;
					height: 100px;
					position:relative;
					left:200px;
					top:200px;
				}
				.second-section{
					background: pink;
					width: 100px;
					height: 100px;
					position:absolute;
					left:200px;
					top:200px;
				}
				.third-section{
					background: red;
					width: 100px;
					height: 100px;
					position:fixed;
					left:400px;
					top:400px;
				}
		</style>
	</head>
	<body>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<div class="first-section">
			<p>1</p>
		</div>
		<div class="second-section">
			<p>2</p>
		</div>
		<div class="third-section">
			<p>3</p>
		</div>
	</body>
</html>

便利な属性

奥行きの指定

z-index属性を使って指定する
- 大きい値を設定したスタイルを適応した要素が上に描画される

1
2
3
4
5
6
7
8
9
10
11

.test{
	position: relative;
	top: 200px;
	z-index: 1;
}

.test2{ <!--こっちが上に表示させる-->
	position: relative;
	top: 200px;
	z-index: 2;
}

透明度の指定

• opacity属性を使って0~1までの間で指定する

  1 2 3 4 5

  .test{ position: relative; top: 200px; opasity: 0.5; <!--透明度を指定--> }

出力をクリップボードにコピーする

|(パイプ)+pbcopy

• pbとはpast boardの略

使用例

カレンとディレクトリのパスをクリップボードにコピーする

1

pwd | pbcopy

ファイルの内容をクリップボードにコピー

1

cat ファイル名 | pbcopy

追記

2021/3/6

zshには、aliasでpbcが設定されているらしく、こっちの方が短くかける

• 動作的には、aliasなのでpbcopyと同じ

  1	cat ファイル名 | pbc

1.インラインCSS : body内の各種タグの中に記述する

• 一つ一つのタグに設定する必要がある

• インラインCSSと呼ばれる書き方で、直接タグの中でstyle属性を指定する

  1	style=属性:"属性値"

• color属性で色を変える例

  1	<p style="color:blue">今回は、新しくリリースするプロダクトの紹介をします</p>

• 複数の属性指定したい場合、;を入力することで指定できる

  1	<p style="color:blue;font-size:300%">今回は、新しくリリースするプロダクトの紹介をします</p>

2.内部CSS : headタグ内に記述する

• headタグの内部に記述するCSS
• 具体的にはheadブロック内にstyleブロックを作成し、そこにスタイルを記述する

  1 2 3 4 5 6 7 8 9 10

  <html> <head> <style> <!--ここにスタイルを記述する--> </style> </head> <body> </body> </html>

スタイルの記述には２通りの方法がある

1. タグ全体に適応する
2. 指定した領域のみに適応する

1. タグ全体に適応する

• styleブロック内にタグ名のブロックを作り、そこにスタイルを記述する
• 複数のスタイルを記述する場合、;で区切る

  1 2 3 4 5 6 7

  <style> <!--pタグ内の全てのテキストにここに記述したレイアウトが適応される--> p{ color:blue; font-size:150%; } </style>

2. 指定した領域のみに適応する

1. class属性を使用する
   • 複数のタグに適応できる
2. id属性を使用する
   • １つのタグのみに適応できる
3. span属性を使用する
   • 特定の文字列適応する

1. class属性を使用する

• class属性にクラス名を指定し、styleブロックに.クラス名でスタイルを記述する
• 同一のクラス名を他のタグにも割り当てることができる

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <html> <head> <style> .A{ color:blue; font-size:150%; } </style> </head> <body> <h1 class="A">クラスでスタイルを指定しています</p> <p class="A">クラスでスタイルを指定しています</p> <p> クラス名を指定していません</p> </body> </html>

2. id属性を使用する

• id属性を定義してid名を指定して、styleブロックに#id名でスタイルを記述する
• 1つのタグにしか適応できない

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <html> <head> <style> #B{ color:blue; font-size:150%; } </style> </head> <body> <h1 id="B">クラスでスタイルを指定しています</p> <p><クラス名を指定していません/p> <p> クラス名を指定していません</p> </body> </html>

3. span属性を使用する

• spanタグ(<span></span>)を定義してclass属性にクラス名を指定して、styleブロックに.クラス名でスタイルを記述する
• class idとの違いは、タグに対するレイアウトではなく、文字列に対するレイアウトである点

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <html> <head> <style> .C{ color:blue; font-size:150%; } </style> </head> <body> <h1>クラスでスタイルを指定しています</p> <p>クラス名を<span class="C">指定</span>していません</p> <p>クラス名を指定していません</p> </body> </html>

CSSとは何か

• 正式名称 : Cascading Syle Sheets(カスケーディングスタイルシート)
• ページレイアウトを形成するためのスタイルシート
• HTML = マークアップ,CSS = レイアウト

記述方法の種類

1. インラインCSS : body内の各種タグの中に記述する
   • インラインスタイルシートと呼ぶ場合もある
2. 内部CSS : headタグの中に記述
   • 内部スタイルシートと呼ぶ場合もある
3. 外部ファイル(.css)
   • 外部スタイルシートと呼ぶ場合もある
   • コンテンツとデザインの分離ができるので、外部ファイルに記述するのが基本

1.インラインCSS : body内の各種タグの中に記述する

• 一つ一つのタグに設定する必要がある

• インラインCSSと呼ばれる書き方で、直接タグの中でstyle属性を指定する

  1	style=属性:"属性値"

• color属性で色を変える例

  1	<p style="color:blue">今回は、新しくリリースするプロダクトの紹介をします</p>

• 複数の属性指定したい場合、;を入力することで指定できる

  1	<p style="color:blue;font-size:300%">今回は、新しくリリースするプロダクトの紹介をします</p>

2.内部CSS : headタグ内に記述する

• headタグの内部に記述するCSS
• 具体的にはheadブロック内にstyleブロックを作成し、そこにスタイルを記述する

  1 2 3 4 5 6 7 8 9 10

  <html> <head> <style> <!--ここにスタイルを記述する--> </style> </head> <body> </body> </html>

スタイルの記述には２通りの方法がある

1. タグ全体に適応する
2. 指定した領域のみに適応する

1. タグ全体に適応する

• styleブロック内にタグ名のブロックを作り、そこにスタイルを記述する
• 複数のスタイルを記述する場合、;で区切る

  1 2 3 4 5 6 7

  <style> <!--pタグ内の全てのテキストにここに記述したレイアウトが適応される--> p{ color:blue; font-size:150%; } </style>

2. 指定した領域のみに適応する

1. class属性を使用する
   • 複数のタグに適応できる
2. id属性を使用する
   • １つのタグのみに適応できる
3. span属性を使用する
   • 特定の文字列適応する

1. class属性を使用する

• class属性にクラス名を指定し、styleブロックに.クラス名でスタイルを記述する
• 同一のクラス名を他のタグにも割り当てることができる

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <html> <head> <style> .A{ color:blue; font-size:150%; } </style> </head> <body> <h1 class="A">クラスでスタイルを指定しています</p> <p class="A">クラスでスタイルを指定しています</p> <p> クラス名を指定していません</p> </body> </html>

2. id属性を使用する

• id属性を定義してid名を指定して、styleブロックに#id名でスタイルを記述する
• 1つのタグにしか適応できない

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <html> <head> <style> #B{ color:blue; font-size:150%; } </style> </head> <body> <h1 id="B">クラスでスタイルを指定しています</p> <p><クラス名を指定していません/p> <p> クラス名を指定していません</p> </body> </html>

3. span属性を使用する

• spanタグ(<span></span>)を定義してclass属性にクラス名を指定して、styleブロックに.クラス名でスタイルを記述する
• class idとの違いは、タグに対するレイアウトではなく、文字列に対するレイアウトである点

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <html> <head> <style> .C{ color:blue; font-size:150%; } </style> </head> <body> <h1>クラスでスタイルを指定しています</p> <p>クラス名を<span class="C">指定</span>していません</p> <p>クラス名を指定していません</p> </body> </html>