たねっぱ！ » ショートカット https://taneppa.net コツコツあつめるWeb作りのためのたね　たねっぱ！Web系情報ブログ　Webのお役立ちネタ配信中！ Tue, 09 May 2023 00:02:06 +0000 ja hourly 1 http://wordpress.org/?v=3.5.1 コーディングが速くなる！Emmetのアクションまとめ【Win/Mac/Atomに対応】 https://taneppa.net/emmet_action/ https://taneppa.net/emmet_action/#comments Wed, 05 Sep 2018 02:31:48 +0000 rurippa! https://taneppa.net/?p=5439

Emmetが使えるエディターなら大丈夫！
アクションを使うと、コーディングの効率がぐんと上がります！！
ほんと便利なものばかりなので、ぜひ使ってください。

注意点

Emmetと、お使いのエディターのショートカットが被っていることがあります。
その場合は、ショートカットの設定を変更してみてください。

※MacでAtomをお使いの方
ショートカットがうまく反応しない方は、 (カッコ)部分のコマンドも試してみてください。もしかしたら使えるかもしれないです…！

Emmetのアクション一覧

おすすめのアクション

アクション
（リンク先: デモ）		 コマンド
Remove Tag
開始タグと閉じタグを削除して、インデント調整もします。

【Win】ctrl + shift + ;

【Mac】⌘ + ‘
(⌘ + shift + ‘)
Wrap with Abbreviation
選択した範囲を任意のタグで囲むことができます。

【Win】ctrl + w

【Mac】ctrl + alt + w
(ctrl + w)
Balance （outward , inward）
選択範囲の拡大・縮小ができます。
⌘Dを押すと、現在のカーソル位置を基準にして、タグの中身やタグの境目を検索して選択範囲を作ります。さらに、ctrl + dを押す毎に、選択範囲が拡大します。

【Win】拡大: ctrl + shift + e
縮小: ctrl + shift + 0

【Mac】拡大: ctrl + d
縮小: alt + d
Merge Lines
選択した部分を1行に変換します。

【Win】ctrl + shift + m

【Mac】shift + ⌘ + m
Evaluate Math Expression
+ – * / を使った、簡単な四則演算の結果を表示します。

【Win】ctrl + shift + y

【Mac】shift + ⌘ + y

その他のアクション

アクション
（リンク先: デモ）		 コマンド
Expand Abbreviation
Emmetを展開します。

【Win】tab もしくは ctrl + e

【Mac】tab もしくは shift + ⌘ + e
Toggle Comment
コメントの表示・非表示ができます。

【Win】ctrl + shift + /

【Mac】⌘ + /
Go to Edit Point
タグ間、空の属性、インデント付きの改行部分ごとに、編集ポイントが移動します。

【Win】ctrl + alt + ←→

【Mac】ctrl + ←→
(alt + ←)
Select Item
HTMLではタグ・属性・属性値などを、CSSではセレクタ・プロパティ・プロパティ値などを順次選択します。

【Win】ctrl + shift + .
ctrl + shift + ,

【Mac】ctrl + shift + ←→
Go to Matching Pair
開始タグと終了タグ間を移動します。閉じタグを探すときなどに使えます！

【Win】ctrl + alt + j

【Mac】ctrl + alt + j
Split / Join Tag
タグを空タグに変換、またはその逆もできます。XMLを作るときに便利なアクションです。

【Win】ctrl + shift + `

【Mac】shift + ⌘ + j
Update Image Size
画像サイズを取得します。imgタグに、widthとheightが追加されます。

【Win】ctrl + u

【Mac】ctrl + i
Increment / Decrement Number
数値の増減が簡単にできます。（0.1・1・10づつ増減）

【Win】alt + ↑↓
ctrl + ↑↓
shift + alt + ↑↓

【Mac】ctrl + alt + ↑↓
(alt + ↑↓)
ctrl + alt + ⌘ + ↑↓
ctrl + alt + ⌘ + shift + ↑↓
(alt + shift + ↑↓)
Reflect CSS Value
ベンダープレフィックスがついたプロパティ値を、一箇所なおすだけで一括で揃えられます。

【Win】ctrl + shift + r

【Mac】shift + ⌘ + r
Encode / Decode Image to data:URL
画像をdataURLに変換します。

【Win】ctrl + ‘

【Mac】ctrl + shift + i

参考サイト

Emmet Documentation

まとめ

いかがでしたか？
本当にやらなきゃ損(笑)と思うくらいに、便利なものが揃っているので、試してみてください（^^)

]]> https://taneppa.net/emmet_action/feed/ 0 Web制作にお役立ち＆作業効率UP！ 日本語版チートシートまとめ https://taneppa.net/cheatsheet_japanese2017/ https://taneppa.net/cheatsheet_japanese2017/#comments Wed, 09 May 2018 03:04:59 +0000 rurippa! https://taneppa.net/?p=3845

ショートカットキー忘れた！あのプロパティ名が思い出せない・・・などなど
ふとした時にチートシートを見て救われたり。
こんなのがあるんだ！っていう発見もあるかも。

そんな時、日本語版の方が見やすいかな？と思ったので、
日本語版のものを集めてみました！(&英語でもわかりやすいもの）

PCに保存したり、１枚印刷して手元に置いておくと便利です。

目次

日本語版チートシートまとめ

Illustratorのショートカットキーリスト

デザイナーが良く使うショートカットをピックアップしています！
日本語で非常に見やすいので、デスクなどに置いておきたい１枚ですね。

配布元:Adobe

Photoshopのショートカットキーリスト

先ほど紹介したシートの、フォトショップ版です！
こちらも合わせて印刷しておくと便利かと思います。

配布元:Adobe

日本語版 WordPress チートシート

有名なブログ「Webクリエイターボックス」さんが配布してくださっている、WordPressのチートシートです。
例文付きで、見やすくまとまっていてオススメです。

配布元:Webクリエイターボックス

WordPress Template Hierarchy

WordPressのテンプレート構成を図にまとめています。

配布元:WORDPRESS.ORG

HTML5タグ★チートシート

HTML5のタグと概要の説明が載っています。
チートシートがあると検索する手間が省けますね。

配布元:＠IT

CSS Flexbox チートシート

最近よく見るようになったFlexbox用のチートシートです！
図付きなので、とても見やすいです。

配布元:Webクリエイターボックス

まとめ

いかがでしたか？
チートシートはみやすくまとめられているので、ぜひご活用ください。
また素敵なチートシートを見つけましたら、紹介しますね♪

]]> https://taneppa.net/cheatsheet_japanese2017/feed/ 0 ターミナルのショートカット一覧 https://taneppa.net/terminal_shortcut/ https://taneppa.net/terminal_shortcut/#comments Fri, 26 May 2017 04:34:09 +0000 rurippa! https://taneppa.net/?p=3747 黒い画面が苦手な人は多いですよね…
そんなあなたも便利ショートカットを覚えて、よりできる人に近づきましょう★

がっつりターミナルを使う方は、
ホームポジションをなるべく崩さないようにコマンドを打てるようになると、
作業効率が上がるのを実感できると思います。

他のアプリなどで使えるショートカットも多いので、
ぜひ使ってみてください。

ターミナルのショートカット

移動

ショートカットキー 処理内容
control + B 後退
control + F 前進
control + A カーソルを文頭に移動
control + E カーソルを文末に移動
option + ← or →　もしくは　Esc + B or F 単語単位でのカーソル移動

削除

ショートカットキー 処理内容
control + D カーソルの文字を削除（deleteキーの代用）
control + H 一文字前を削除（backspaceキーの代用）
control + W カーソル位置から単語の先頭まで削除
⌘ + K カーソル位置から文末までカット
⌘ + U カーソル位置から文頭までカット
⌘ + Y カットした内容を挿入

その他

ショートカットキー 処理内容
↑ or ↓ もしくは　control + P or N 過去のコマンドを表示
tab コマンドやファイル名の予測表示
control + C 実行中のコマンドを強制終了
control + L ターミナル画面のリセット
control + ↑ 現在行をウィンドウの最上部にする

まとめ

今回は使いやすそうなショートカットを厳選して紹介しましたが、いかがでしたか？
ショートカットを覚えて 黒い画面とお友達になれますように♪
少しづつ取り組んでいきましょー(^^)

]]> https://taneppa.net/terminal_shortcut/feed/ 0 Atomで使えるショートカット一覧 https://taneppa.net/atom_shortcut/ https://taneppa.net/atom_shortcut/#comments Thu, 20 Apr 2017 05:16:50 +0000 rurippa! https://taneppa.net/?p=3596 本記事では、Atomに関するショートカットを紹介します！
使えるものはどんどん覚えて、作業を楽にしていきましょ〜

ショートカット系は、実際に使って試してみるのがオススメです。
特に使って欲しいものは★をつけてます！

※筆者はMac環境のため、Winについては未確認のものが多数ありますので、あしからず…

Atomで使えるショートカット一覧

選択・マルチカーソル

操作 Win Mac
★マルチカーソルの追加
※解除はEsc		 Ctrl + クリック ⌘ + クリック
★単語の選択 Ctrl + D
（さらにDを押すと、続けて同単語を複数選択可）		 ⌘ + D
（さらにDを押すと、続けて同単語を複数選択可）
★単語のスキップ
（複数選択時）		 Ctrl + K ⌘ + K
前の単語へ戻る
（複数選択時）		 Ctrl + U ⌘ + U
行の選択 Ctrl + L
（さらにLを押すと、複数行選択可）		 ⌘ + L
（さらにLを押すと、複数行選択可）

移動

操作 Win Mac
単語単位で前へ移動 Alt + B option + B
単語単位で次へ移動 Alt + F option + F
単語の先頭へ移動 Ctrl + ← option + ←
単語の末尾へ移動 Ctrl + → option + →
行の先頭へ移動 Home ⌘ + ←
行の末尾へ移動 End ⌘ + →
行番号を指定して移動 Ctrl + G Ctrl + G
対応するカッコへ移動 Ctrl + M Ctrl + M

編集

操作 Win Mac
改行の削除 ⌘ + J
カーソル位置から末尾までカット Alt + D Ctrl + K
インデントを１つ追加 Ctrl + ] ⌘ + ]
インデントを１つ削除
(複数行もOK)		 Ctrl + [ ⌘ + [
★コメントアウト/解除 Ctrl + / ⌘ + /

編集（行）

操作 Win Mac
行の削除 Ctrl + Shift + K Ctrl + Shift + K
★下に空行を挿入 Ctrl + Enter ⌘ + return
★上に空行を挿入 Ctrl + Shift + Enter ⌘ + Shift + return
行の移動 Ctrl + ↑ or ↓ Ctrl + ⌘ + ↑ or ↓
★行の複製 Ctrl + Shift + D ⌘ + Shift + D

パネル・ファイル関連

操作 Win Mac
新規ファイルの作成 Ctrl + n ⌘ + N
★パネルの分割 Ctrl + K のあと任意の矢印キー ⌘ + K のあと任意の矢印キー
パネルを移動する Ctrl + K のあと、Ctrl + 任意の矢印キー ⌘ + K のあと、⌘ + 任意の矢印キー
アクティブなタブの変更 Ctrl + K のあと任意の矢印キー option + ⌘ + 任意の矢印キー
タブを閉じる Ctrl + W ⌘ + W
全てのタブを閉じる Ctrl + K W
（Ctrlは押し続けたまま、K Wと順番に押す）		 ⌘ + K W
（⌘は押し続けたまま、K Wと順番に押す）

ツリービュー

操作 Win Mac
★ツリービューの表示／非表示 Ctrl + ¥ Ctrl + \
ツリービュー/タブへの移動 Ctrl + 0 Ctrl + 0
ファイル追加 A A
ファイル名変更 M M
ファイルを複製 D D
フォルダ追加 Shift + A Shift + A

ブックマーク

操作 Win Mac
現在行をブックマーク/解除 Ctrl + Alt + F2 ⌘ + F2
次のブックマークへ移動 F2 F2
ブックマーク一覧を見る Ctrl + F2 Ctrl + F2
全ブックマークを解除 Ctrl + Shift + F2 ⌘ + Shift + F2

その他

操作 Win Mac
ファイルのパスをコピー Ctrl + Shift + C
(エディタ／ツリービューいずれも可)		 Ctrl + Shift + C
(エディタ／ツリービューいずれも可)
文字コードを選択 Ctrl + Shift + U Ctrl + Shift + U
言語を選択 Shift + Ctrl + L Shift + Ctrl + L
セッティング画面表示 Ctrl + , ⌘ + ,
コマンドパレット Ctrl + Shift + P ⌘ + Shift + P

まとめ

どうでしたか？
ショートカット覚えるだけで効率がぐんと上がるので、よく使うものから覚えていきましょー(^^)d

]]> https://taneppa.net/atom_shortcut/feed/ 0