4/2のGoogle Developers Live Japan #3の資料です。Read less

Webサイトの制作で、動作確認を行う場合、実際の表示状態とそれを表示させている、HTMLやCSSのコードを参照したいということがあります。 Google Chromeで、上記の確認を行う場合は、「デベロッパーツール」を利用します。 デベロッパーツールを起動すると、初期設定では、表示画面の下部に表示されます。 Webサイトの制作を仕事としている方の中には、高解像度の横長ディスプレイを使っている方もいらっしゃると思います。 私もその1人ですが、Chromeの下部の表示では、コードの一部しか表示されず、非常に使いづらいです。 この表示位置を下部ではなく、右横に変更することができます。 方法は簡単だった。。。ボタン長押しでメニューが出てきたデベロッパーツールのウィンドウの下部に、アイコンメニューが表示されます。 このアイコンメニューの一番左を　“長押し”　すると、右側表示のアイコンが表示されるので

偶然見つけたので書いておきます！ 拡大 縮小 画面 ⌘+ ⌘- console ⌘^ ⌘- 縮小のショートカットキーが同じなので、最初に拡大のショートカットキーを押すことでモードを切り替えます。 みつけた時は画面拡大とconsole縮小の組み合わせで固定されてしまって画面はどんどん拡大されるし console はどんどんちっちゃくなっていくし焦った…（バグ？）

こんにちは、もりさんです。 すでにもう有名ですが、Sublime Textについて書きます。 少し前にたまたまcssが3000行くらいになった時、DreamWeaverが遅い、と思ってしまいました。 というわけで、いろいろ検索して調べたり、良さそうなエディタをピックアップし、Sublime Textに決定しました。 Sublime Textの良いところ Sublime Textの良いところをいくつか上げてみます。 とにかく軽い 他にも軽いエディタがありますが、これもかなりの軽さです。 クロスプラットフォーム WindowsとMac、さらにLinuxにもあります。 自宅や会社でPCが変わっても違和感はでません。 プラグインが多い 実は、そのまま使うと、あまり良さが出ません。 自分にあったプラグインを見つけて、入れましょう。 カスタマイズ テーマが豊富で、各種設定が細かくできます。 前の状態で

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Sublimeで改行コードを置換したかったが日本語の情報が見つからなかったのでメモ 二通りの方法がある 1. Regular Expressionにチェックを入れて\nを入力 2. Command+Enterで改行を直接入力 あとは置換後の文字列を入れてReplaceするだけ

ようこそ、サル先生のGit入門へ。 Gitをつかってバージョン管理ができるようになるために一緒に勉強していきましょう！ コースは4つ。Git初心者の方は「入門編」からどうぞ。Gitを使った事がある方は「発展編」がおすすめです。さらに「プルリクエスト編」では、コードレビューする文化をチームに根付かせましょう。 「あれ？何だっけ…？」という時は「逆引きGit」で調べて見てくださいね。

Gitを触り始めて間もないのですが参考書もためになりますがネットにもたくさんの情報が掲載されています。 まずはGitとはどういうものかを紹介しているサイトから具体的な流れなどを紹介しているサイトをご紹介します。 ニッチなことなどは自分も勉強不足なところもあるので初心者の方にも馴染めるようなサイトを紹介したいと思います。 ひと通りの流れを勉強するのに最適 サルでもわかるGit入門 まずはここは読んでいて損はないところかと思います。ボリュームもあるので一気読みはおすすめしませんが入門編から読んでみると理解しやすいかと思います。イラストも可愛く読みやすい作りです。 GitHubに関する記事 他にも様々なブログでGitHubに関して書かれていたりしていますのでググったりしてみてはいかがでしょうか？ Windowsにgitをインストールしてgithubにpushするまで Git/GitHub初心者の

コードエディターにはHTML・CSSを効率良く編集する方法でも書いたように、コードの自動補完などの機能が備わっています。これらの機能を使うことで効率良くコードを記述することができるのですが、ここではさらに効率アップできるEmmetを使ってみます。 Emmetを使うとHTMLタグを記述する際に必要な< >などを省略したり、長いHTMK構造をたった数行で書くことができるようになります。慣れるとこれ以外で書くのがめんどくさくなるというデメリットがありますが、とにかく効率良く記述できるのでまだ使ってない人は是非使ってみて下さい。 EmmetにはHTMLとCSSがありますが、ここではHTMLの記述方法を紹介します。 CSS編はこちら -> CSSを効率良く書く！Emmetの書き方・使い方まとめ Emmetのインストール方法 コードエディターにEmmetをインストールする Emmetはコードエディター