はてなブックマーク

Visual Studio Codeに、html & css & JavaScriptのプレビュー確認に便利なMicrosoft純正の拡張機能Live Previewが、公開されました。まだテスト公開だけど… ちょっと試してみたのですが、テスト公開とはいえ、使い勝手がかなりいいです。 ただ機能が豊富なだけに、私レベルだと迷ってしまうかも… というわけで、インストール方法に加えて、使い方・特徴を簡単にご紹介したいと思います。 ちょっと長めですが、終わる頃には、とりあえず使うことができるようになります。

「作業フォルダを選択」の話に戻ります。この説明では[ドキュメント］フォルダに［BracketsWork］フォルダを作成し、作業フォルダとして選択しますね。 作業フォルダは設定できましたか？　それでは、index.htmlを作りましょう。 htmlファイルの作成 まずはhtmlファイルを作成し、ライブプレビューを実行してみましょう。メニューバーの［ファイル］→［新規作成］を選択してください。 ↑動画が動いていない時は、画像をクリックしてください。 画面左側のサイドバーに「名称未設定-1」と表示されましたね（1という数字は、2だったり、3だったりします。1でなくても大丈夫です。）。 次に画面右下のステータスバーにあるファイルタイプを「Text」→「HTML」に変更します（Ver1.9からの機能です）。 ↑動画が動いていない時は、画像をクリックしてください。 この操作をするとhtmlタグの入力補

今日はWindowsで、Bracketsをインストールする方法について説明しますね（最新のVer1.14.2も同様です）。 出典:http://brackets.io/ © 2015 Google Inc, used with permission. Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。 Bracketsは、html・css・JavaScriptなど初心者のホームページ作成本などにもおすすめのテキストエディタとして紹介されています。 しかし簡単な紹介だけなので『Bracketsのホームページにアクセスしたものの、どうやってインストールをしたらいいのかよくわからない』という初心者さんも多いのではないかと思います。ということでBracketsのインストール方法・手順を説明しますね。 なお、アップデートする場合も、

BraketsのTabs-Custom Working拡張機能プラグインの使い方が、いっぱいありすぎて困ってしまう……というひとはいませんか？　ということでまとめました。 Tabs-Custom Working拡張機能プラグインは、機能が豊富な分、いろいろ操作方法があって整理するのが難しいですよね。初めての人はもちろん、『そいうえば、Tabs-Custom Workingのすべては、把握していないなぁ』というアナタもぜひ参考にしてください。このページをみればすべてわかる！ハズです…… とりあえず、インストール方法はこちらです。

Atomテキストエディタをインストールしたけど何からはじめたらいいの？　ホームページを作成するhtml・cssテキストエディタとしてAtomがいいよって聞いたからインストールしたのにどこから操作したらいいのか使い方がわからない……と困っていませんか？私がそうでした……ということで初心者さんがAtomテキストエディタをダウンロードしてからの流れ（インストール・初期設定・基本的な使い方）をまとめました。これだけやっておけば、とりあえずは大丈夫というものを厳選してしてあります。最初は大変かと思いますが、ブックマークなどをして毎日少しずつやってくださいネ。終わった頃には、必ずAtomテキストエディタをちゃんと使えるようになっていますから。

Bracketsでおすすめのプラグインご紹介します。今回ご紹介するのは、管理人が、htmlとcssとJavaScript(jQuery)でホームページを作っている時に実際に使っているプラグインです。管理人はホームページ作成初心者のなので、初心者のあなたにもきっとお役に立てると思います。 ということで管理人は今回ご紹介しているプラグインを利用してこちらのホームページを作成しました。

htmlのimgタグのsrc属性に記述する相対パスがなかなか理解できず苦手なんだけど……というのはあなただけではありません。とはいえ相対パスは、htmlの<img>タグはもちろん<a>タグ・<link>タグ、さらにはcssのbackground-imageプロパティ値に使用されるurl()関数などでも必要のため、『この相対パスを記述する良い方法ないの』と思っていませんか？実はAtomテキストエディタのautocomplete-pathsパッケージをインストールすると記述する相対パスを入力補完してくれるので、あなたの負担が低くなり『まぁ、これならなんとなくわかる』というレベルにまでしてくれます。ですので相対パスの記述が苦手な人はぜひautocomplete-pathsパッケージをインストールして使ってくださいね。 なお、相対パスについてわからない人は……そうですね。ちょっとこちらのサイトを見

Atomテキストエディタでhtmlコーディングの間違いチェックをしてくれるlinter-htmlhintパッケージ（＝補助プログラム）をインストールしたけど、使い方がよくわからないんだけど……と思いませんか？ということで今日は、Atomテキストエディタでhtmlのコーディング間違いチェックをするlinter-htmlhintの使用方法のうち、コーディングして保存したタイミングで間違いチェックをする方法について説明しますね。保存しないで、間違いチェックをする方法はこちらからお願いします→ファイル保存操作をしないでlinter-htmlhintによる間違いチェックをする方法 あとlinterを使いこなすのはムズカシイなぁという人はw3c-validationパッケージ便利です。

Atomテキストエディタでhtmlやcssをコーディングしているとよく間違えるんだけど何か便利な方法はないのかな……と思いませんか？　実はAtomにはhtmlタグ・構文やcssスペルミス・構文などの間違いチェックをしてくれる便利なパッケージ（＝補助プログラム）があります。今日はそのインストール方法を説明します。 なおlinterを使いこなすのはムズカシイなぁという人はw3c-validationパッケージ便利です。

改行 と 行の折り返し との違い では「改行」と「行の折り返し」との違いについて説明しておきますね。 「改行」とは、入力を次行へと移すこと（または移してあること）で、次行の行番号には数字が表示されます。 「行の折り返し」は、入力を次行へ移していないので、次行の行番号は表示されず、かわりに"・"が表示されます。 今回設定するのは、行の折り返し（＝次行の行番号に、"・"が表示されている方）です。それでは、「ソフトラップの設定」からはじめますね。 ソフトラップの設定 「ソフトラップ」とは、Atomのウィンドウ枠を超えて文字列を入力した時に、「折り返して表示するか」と「画面を横スクロールして表示するか」とのどちらにするのか？　を決める設定です。たとえばこんな感じです。 折り返して表示 画面を横スクロールして表示 当然ですが、「折り返して表示」した方がhtmlやcssを効率よく記述できますよね。なの

画面分割ショートカットキー Atomで画面分割するショートカットキーを説明しますね。2種類組み合わせて行います。 画面分割のショートカットキー まず1つ目は、画面分割のショートカットキーです。 Ctrl+kを押して、 一度手を離し、 (画面分割したい方向の)← or → or ↑ or ↓を押す 分割画面間でカーソル移動するショートカットキー 2つ目は、分割画面間でカーソル移動するショートカットキーです。今日の説明では、3画面から4画面へ分割する時に必要になります。 ショートカットキーは以下になります。 Ctrl+kを押して、 一度手を離し、 Ctrl + (移動したい分割画面方向の)← or → or ↑ or ↓を押す この2種類のショートカットキーを使って、今日は4画面分割する操作説明をしますね。 ちなみに画面分割は、ファイルを表示しなくてもできます。しかし、視覚的にわかりずらいので

Atomテキストエディタで全角・半角スペース文字の編集記号を表示したいけど、どうしたらいいの？ 実は、半角スペースの編集記号を表示する設定は簡単にできるのですが、全角スペースの編集記号を表示する設定についてはパッケージ（＝補助プログラム）をインストールしないと設定ができません。 ということで今日はAtomテキストエディタで全角スペース文字の編集記号を表示するパッケージ（＝補助プログラム）のインストールする方法を説明しますね。 あっ、半角スペースの編集記号を表示する設定方法はコチラ→「Atomテキストエディタで TABスペース・半角スペース・改行 を見えるように設定する方法」 それと日本語環境で使用するためのパッケージ「japanese-menu」をインストールしていない人は、先にインストールしておいてくださいね。→Atomテキストエディタを日本語環境で使用するためのパッケージをインストール

Atomテキストエディタのproject-managerパッケージを使用すると、プロジェクトフォルダを登録しておいて、プロジェクトフォルダをいつでも呼び出すことができます。つまり、このproject-managerパッケージを利用すると、いちいち作業を開始する前に、[ファイル］→［プロジェクトフォルダを追加］からフォルダを選択して……という面倒な作業をせずに、一覧から選択するだけでよくなるのです。 ということで今日はAtomテキストエディタのproject-managerパッケージで「登録＆呼び出す方法」を説明しますね。例としてcafeプロジェクトフォルダを登録して、呼び出す方法を説明します。 あっ、『プロジェクトフォルダってなに？』というあなたはコチラをどうぞ

Atomテキストエディタでエラーチェックをしてくれるlinterパッケージをインストールしてみたけど、ステータスバーの見方・使い方がよくわからない……と困っていませんか？今日はAtomでエラーチェックをするLinterステータスバーの見方・使い方を説明しますね。 なおlinterを使いこなすのはちょっとムズカシイなぁという人はw3c-validationパッケージ便利です。