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自体が重い?最新機種に買い替えましょう!