2014-07-08

vimコマンド一覧

vimは便利なエディタなんですが、コマンドが多くて、忘れたときにいちいちvimtutorで探すのが大変なので、tutorで紹介されたコマンドを纏めてみました。

カーソルの移動:

h、j、k、l = 左、下、上、右

内容を保存せずに終了:

:q!(ENTER)

内容を保存して終了:

:wq(ENTER)

vimを起動する:

vim ファイル名(ENTER) / vimtutor(tutorを開く場合)

テキストの削除:

ノーマルモードにてカーソルの下の文字を削除x

テキストの挿入:

i を押して追加したい文書を入力する

単語を削除:

消したい単語の先頭にカーソルを移動して、dwで単語を消す。
カーソルの位置から行の末尾までを削除: カーソルを消したいところ移動して、d$で行の末尾までを消す。

オペレータとモーション

d -削除コマンド
モーション　-何に対して働きかけるか

例:   
w - カーソル位置から空白を含む単語の末尾まで  
e - カーソル位置から空白を含まない単語の末尾まで  
$  - カーシオル位置から行末まで

また、コマンドとモーションの前に数字を入れると、数を指定することができる。

例: 
2dw - 単語を2つを削除する
3e - 三つ目の単語に移動する

など

行ごとを消す:

カーソルを消したい行の先頭に移動し、dd で消します。

やり直しコマンド:

最後のコマンドを取り消すにはuを押す。
行全体を取り消すには大文字Uを押す。

貼付けコマンド:

カーソルを切り取りたい行に移動し、ddで切り取り、移動させたい行にpで貼付ける。

変更コマンド(単語):

カーソルを間違いの単語の「間違っている部分」の先頭に移動し、cwを入力し、正しい文を入れる。最後にESCを押す。

変更コマンド(カーソル位置から行末まで)

カーソルを変更したい部分に移動し、c&を入力し、行末まで編集することができる。最後にESCを押す。

検索コマンド(単語):

ノーマルモードで　/検索したいキーワードで検索できる。同じ語をもう一度検索するときはnを押す。

検索コマンド(対応する括弧):

検索したい対応する括弧にカーソルを移動し、%を入力すると対応する括弧に移動する。

外部コマンドを呼び込む:

:を入力し、画面の最下部にカーソルを移動させる。 ! 外部コマンド (ENTER)を押すと、外部コマンドを呼び込むことができる。

例:
:!ls(ENTER)を入力すると、ターミナルのようにディレクトリの一覧表示ができる。

ファイルへ書き込み:

ファイルへ変更を保存するには、 :w ファイル名とタイプすると、新しいファイルに保存することができる。

選択した部分を新しいファイルに保存:

保存したい文書の先頭にカーソルを移動し、vを押す。
保存したい文書の末尾にカーソルを移動し、:を押す。
画面の最下部に:'<,'>が現れる。ここで w ファイル名を入力する
これで選択した部分を新しいファイルに保存することができる。

フィアルの取り込みと合併:

挿入したいところにカーソルを移動し、:r ファイル名を入力すれば、他ファイルを取り込むことができる。

行の挿入:

o: 下に行を挿入 O: 上に行を挿入

置き換え:

置き換えたい文書や単語の先頭にカーソルを移動し、Rを押して、そのまま上書きすることができる。

コピーとペースト

まずコピーしたい文章の先頭にカーソルを移動する。vを押して範囲を選択し、yでコピーする。
貼付けたいところにカーソルを移動し、pを押して貼付ける。

2014-07-04

CSSについてのメモ

CSSについて覚えることが多いので、ここでメモしておきたいと思います。

１. セレクタの指定ついて

*　　　　：すべてのセレクタ
a, b 　 ：二つのセレクタを一気に選択する
a b　　　：aの階層の下にある全てのbの要素
a > b   ：aの階層の直下にある全てのbの要素
a + b   ：aと同じ階層の直後にあるb
ab      ：aでありかつbであるものを指定

２. border-styleスタイルについて

solid：実線
dashed：破線
dotted：点線
double：二重線
inset、outset：立体的に見せられる線

また、書き方としては
border-color
border-width
border-style
の三つを別々に書いてもいいですが、borderでは一行で書くこともできます。

border: 「color」 「width」 「style」

という感じの書き方です。

３. paddingとmarginについて
paddingとは、内文とborderの間の余白のことです。
marginとは、border外の余白のことです。(書き方は基本paddingと同じ) 基本の書き方

padding(margin): 「上の余白の値」　「右の余白の値」　「下の余白の値」　「左の余白の値」

しかし必ず四つの値を全て指定しなければならないわけでもありません。値が
1つの場合：上下左右全て同じ値にする
2つの場合：「上下」　＆　「左右」
3つの場合：「上」　＆　「左右」　＆　「下」
4つの場合：上から時計回り順にすること
になります。

４. 擬似クラスについてリンク・元素に対するオプション

link：未訪問時のオプション
visited：訪問したことがあるリンクのオプション
hover：マウスが乗っかったときにオプション（リンク以外の要素でもOK）
active：リンクを押してから離すときのオプション

CSSの部分でメモしておきたい部分は以上です。次はCSS3について書きたいと思います。

2014-07-03

HTMLのinputタグのメモ

ウェブサービスでは必要不可欠な部分ーー＞入力フォームについてメモしておきたいと思います。

<!-- フォームの基本の書き方 -->
<form action="```アプリ名``` "method="```メソッド名```">
<p>```フォーム内容```</P>
<p>```フォーム内容```</p>
</form>

以上はフォームの基本的な構造です。

フォーム内容について  

テキスト型(sizeなどオプションが使えます)  
名前：<input type="text" name="```アプリに渡す時の変数名```">  

内容を表示しない  
パスワード：<input type="password" name="```アプリに渡す時の変数名```">  

カレンダー型  
日付：<input type="date" name="```アプリに渡す時の変数名```">  

URL入力(不正入力を自動検知)  
URL：<input type="url" name="```アプリに渡す時の変数名```">  

email入力(不正入力を自動検知)  
email：<input type="email" name="```アプリに渡す時の変数名```">  

送信ボタン<送信アクションが自動に設定される>  
<input type="submit" value="```表示させたい文言```">

以上です

2014-07-02

初日研修レポート

要旨

本日の研修内容とその気付きをここで書き留めたいと思います。

学んだ内容

PC性能の見方を知る
ターミナル(黒い画面)の基本
- 学習サイト: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 Part.01 « 合同会社フィヨルド
- 記事でまとめた: 「黒い画面入門」を読んで実践してみた - 日本語学習ブログ
Mac OS X開発環境を作った
- エディタをインストール
- skitch
- Gyazo
- Screem Capture
HTMLの基本を理解する
- 参考サイト: HTML入門 (全16回) - プログラミングならドットインストール

気付き

　プログラミングの研修が正式に始まりました。プログラムについて全く知らない初心者ですが、研修先の合同会社フィヨルドさんが用意してくださった学習プランがとても詳しくてわかりやすいです。
　ブログには、わからない内容があって、ネットで調べてもなかなか出てこなかった問題などを記載する予定ですが、教材があまりにも詳しすぎて、あまりそういうことがありませんでした。基礎から勉強していくことで、少し安心しました。明日も一日頑張ります。

明日の予定

HTMLの基礎
CSSの基礎
viの基本
を勉強します。