WEBに関する作業を担当しております、大川です。
とにかくあれこれと時間がかかってしまうのがWEB制作です。
今回は作業やHTMLコーディングに関する時短テクニックを紹介します！
HTMLコーディングとは
マークアップ言語（HTMLやCSS）やJavascript言語を用いて、
デザイン通りの見た目になるようコードを記述し、ブラウザで表示できる状態とすること。
デザイン通りの見た目になるようコードを記述し、ブラウザで表示できる状態とすること。
つまり、今あなたが見ている「ウェブサイト」は何かしらの「言語」で書かれているのです。
Windowsでご覧の方は、【Ctrl+U】と押してみて下さい。
なにかよくわからない文章が出てきましたよね。
これが「ソースコード」です。
大雑把に言えば、ひたすらこれを書いて思い通りのページを作る作業が「HTMLコーディング」なのです。
ショートカットを活用する
とっつきにくいイメージの「ショートカット」！
基本のショートカットだけでも覚えると作業スピードが劇的に早くなりますよ！
※大川がよく使うWindowsのショートカットです。
ほとんどのソフトで共通のショートカット
| Alt+Tab | 開いているアプリを切り替える |
|---|---|
| Esc | ポップアップを閉じる（現在の作業を停止または終了する） |
| F10 | 打った文字をすべて英字にする（あああ→aaa→AAA→Aaaと切り替え） |
| Ctrl+S | 編集中のファイルを保存する |
| Ctrl+C | 選択した項目をコピーする |
| Ctrl+V | 選択した項目を貼り付ける |
| Ctrl+Z | 操作を元に戻す |
| Ctrl+X | 選択した項目を切り取る |
| アプリケーションキー、shift+F10 | 右クリックのショートカット |
参考：アプリケーションキーとは
ブラウザ閲覧時のショートカット
| F5 | 作業中のウィンドウを最新の情報に更新する |
|---|---|
| Ctrl+F5 | 作業中のウィンドウを強制的に最新の情報に更新する（スーパーリロード） |
| F6 | URLを選択する |
| F12 | デベロッパーツールの表示 |
| Tab、Shift+Tab | リンクの選択を切り替える |
| Ctrl+Tab、Ctrl+Shift+Tab | タブを切り替える |
Google日本語入力を使う
Windowsの日本語入力は、「Microsoft IME」が標準で入っていますが、大川は「Google日本語入力」が好みです。
痒いところに手が届くようなタイピングが嬉しい！特に、→や…といった記号のショートカットが重宝します。
| zh | ← |
|---|---|
| zj | ↓ |
| zk | ↑ |
| zl | → |
| z「 | 『 |
| z」 | 』 |
| zー | 〜 |
| z、 | ・・ |
| z。 | ・・・ |
参考：Google日本語入力
デスクトップアイテムを活用する
便利な無料ソフトはたくさんありますが、大川イチオシがこちらのソフト！
コーダー以外の方にもおすすめですよ！
※ご利用は各自の判断でお願いします。
nrLaunch
マウスをくるくるっと回すと、ファイルやフォルダの一覧を表示できるスグレモノ！
よく使うソフトやファイルはすべてここに入っています。
画面下にカーソルを持っていってソフトを探すストレスがゼロになりますよ！
「ランチャーソフト」「くるくるマウス」で検索すると、類似のソフトが出てきます。
参考：nrLaunch – マウスを回すだけで起動できる軽快なランチャーソフト
よく使うソフトやファイルはすべてここに入っています。
画面下にカーソルを持っていってソフトを探すストレスがゼロになりますよ！
「ランチャーソフト」「くるくるマウス」で検索すると、類似のソフトが出てきます。
参考：nrLaunch – マウスを回すだけで起動できる軽快なランチャーソフト
CatMemoNote
複数のメモを、タブとツリー構造で一元管理できるメモソフト。
私はToDoリストのような使い方をしていますが、なにより「自動保存」機能が大変重宝しています！
ただ、自動保存が故に ウッカリ全部消す→PCを落とす のコンボでメモを消してしまったことが…あります……
参考：CatMemoNote
私はToDoリストのような使い方をしていますが、なにより「自動保存」機能が大変重宝しています！
ただ、自動保存が故に ウッカリ全部消す→PCを落とす のコンボでメモを消してしまったことが…あります……
参考：CatMemoNote
辞書ツールを活用する
「辞書ツール」は活用していますか？
珍しい名詞を登録するぐらいしか使ってない、という方、もったいないです！
簡単なひらがなに、よく使うタグを登録しておくと、コーディングが楽になります。
これが何を意味するのかは……また次回。
ピンときた方は、ぜひ登録してみて下さい。
| ！ | <!– –> |
|---|---|
| ぼ | border:1px solid red; border:1px solid #EEEEEE; border:1px solid pink; |
| いめ | <imgsrc=”images/”width=””height=””alt=””class=””><imgsrc=”http://placehold.jp/300×200.png”width=””height=””alt=””class=””> |
| て | <table><tr><th><td> <dl><dt><dd> |
| り | <ul><li> |
| ぐう | :nth-child(2n) |
| と | transparent |
| す | <style></style> |
パソコンは、使い方やカスタマイズ次第で大変便利な道具になります。
無用なイライラや手間を省いて、サクッと仕事を終わらせてしまいましょう！
PC自体が重い？最新機種に買い替えましょう！