へっぽこびんぼう野郎のnewbie日記

けろけーろ(´・ω・`)! #vZkt8fc6J

Chromeのあまり知られていないけど便利なUI(っていうかショートカットキー)紹介する。

コピー → 貼り付け(Ctrl + v )で

フォント、言語、エンコードを変更する - Chrome ヘルプ

 のように

なんか<a></a>タグとか無駄なものもクリップボードに保管されてしまう問題の解決

Ctrl + Shift + v で、プレーンテキストとしてコピーできる。

いちいちメモ帳にコピーして、メモ帳から更にコピーしてた人には朗報

 

【具体例】

フォント、言語、エンコードを変更する - Chrome ヘルプ

 

Ctrl + eCtrl + k

検索できる。いちいちGoogleのホームページまで行く必要がない。

?の表示のあとに打ち込む。?を消す必要はない

アドレスバーでAlt + Enter で新しいタブで表示してくれる。

Ctrl + t (新しいタブを開く)のあとでアドレス打ち込むのと多少手間は変わらないけど。

 

Ctrl + Alt + b(昔のバージョンはCtrl + b

ブックマークバーの表示と非表示

ブックマークバーで右クリックして、Show Bookmarks Bar のチェックをON OFFするのと同じ動作。

 

Ctrl + 1からCtrl + 8

1番目〜8番目のタブに移動できる。

Ctrl + 9 は9番目ではなくて最後のタブ。

 

Ctrl + Alt + t

で、閉じたタブを復活。

(このショートカットを知らないと、タブまでマウスカーソルを移動して右クリックして選択する羽目になる。)

 

Shift + マウススクロール で、スクロールバーを水平方向に移動する。

レイアウトに対して画面が小さすぎるときに有効

 

ーーーーーーーーー

 

test + test2

のようになるタグは

次のようなpythonプログラムを書いて生成した。

 

import sys 

p = []

while 1:

    test = raw_input()

    spantag_p = '''<span class="kbd" style="vertical-align: baseline; font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; outline: 0px; padding: 0px 3px 1px; margin: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border: 1px solid #aaaaaa; background-color: #fafafa; line-height: 1.8em; white-space: nowrap;color: #444444;">'''

    spantag_f = '''</span>'''

    if test == '+':

        p.append("+" )

    elif test == "":

        break

    else:

        p.append("%s%s%s" % (spantag_p, test, spantag_f))

 

#sys.stdout.write("%s" % text) -> create the case "not space"

#sys.stdout.write("%s " % text) == print "%s" % text, -> create the case "using space"

#sys.stdout.write'"%s\n" % text) == print "%s" % text -> create the case "using return"

 

for text in p:

    sys.stdout.write("%s " % text)

 

print("\n")

 

 使い方

【入力】

あいうえお

かきくここ

+

さしすせそ

 

【出力】

<span class="kbd" style="vertical-align: baseline; font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; outline: 0px; padding: 0px 3px 1px; margin: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border: 1px solid #aaaaaa; background-color: #fafafa; line-height: 1.8em; white-space: nowrap;color: #444444;">あいうえお</span> <span class="kbd" style="vertical-align: baseline; font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; outline: 0px; padding: 0px 3px 1px; margin: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border: 1px solid #aaaaaa; background-color: #fafafa; line-height: 1.8em; white-space: nowrap;color: #444444;">かきくけこ</span> + <span class="kbd" style="vertical-align: baseline; font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; outline: 0px; padding: 0px 3px 1px; margin: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border: 1px solid #aaaaaa; background-color: #fafafa; line-height: 1.8em; white-space: nowrap;color: #444444;">さしすせそ</span> 

 

【出力をHTMLで書いてみると】

あいうえお かきくけこ + さしすせそ

 

CSSとかHTMLがよくわからないのでなんとなくタグが冗長になった気がする

pyhonのついでにHTMLやCSSも多少考えてみるとUIを綺麗に表現できそうだなって思った。