Atomで改行や字下げ記号を表示させるには下記設定を行う必要があります。 ●設定手順 ①［File］－［Settings］をクリック ②［Eitor］－［Show Invisibles］にチェックを入れます。 ●設定後のイメージ 下記画像のように改行や字下げ記号が表示されるようになり…

AtomでRicty Diminishedフォントを設定する方法は下記となります。 ●フォントの設定方法 ①［File］－［Settings］をクリック ②［Editor］－［Font Family］欄に Ricty Diminished と入力します。 ［Font Size］欄は １３ とします。 ●フォント導入後のイメー…

Atomではデフォルトの設定だと自動折り返しがされないため、横スクロールしないいけません。自動で折り返しされるようにするにはSoft Wrapを有効にしてください。 ●変更手順 ①［File］－［Settings］をクリック ②［Editor］－［Soft Wrap］にチェックを入れ…

Atomは、GitHub社が無料で提供する、オープンソースのテキストエディタです。 Atomを使用するにはあたり下記３点が必要となります。 １．Atomのインストール ２．プログラミング用フォントのインストール ３．拡張子を表示する設定に変更する。 それぞれの手…

Consoleについては以下のことを行うことが可能です。 ●JavaScriptの実行 javaScriptを記述し、Enterを押すと処理を実行することができます。[Shift]+[Enter]キーで改行することができますので複数行の記述も可能です。 ●コマンドラインAPI Consoleパネルでは…

Sourcesパネルでは下記のことを行うことができます。 ●CSSやJavascriptの編集 SourcesパネルでCSSやJavascriptを編集することができます。ただし、大元のファイルを編集しているわけではなく、あくまでブラウザ上での変更となります。更新すると編集個所は元…

NetWorkパネルではどのファイルがどのタイミングで読み込まれたか確認することができます。Webサイトで読み込みが遅い際にヒントになります。 ●各カラムの説明 NAME：ファイル名。ファイル名をクリックするとソースなど詳細を確認することができ、Previewで…

Stylesタブでは主に下記を確認することができます。 ●スタイルの確認 ・要素をクリックすることで文字・背景色などを確認することが可能です。 ・ブラウザがデフォルトで持っているスタイルを確認することが可能です。ブラウザがデフォルトで持っているスタ…

Elementsパネルでは主に下記のことができます。 ①タグやスタイルの確認 Elementsパネルで要素をクリックどするとどのようなタグで構成されているか、確認することが出来ます。右側のstyleタブを開くとどのようなstyleで構成されているか、確認することができ…

Chrome DevTools は、Google Chrome に組み込まれたウェブ作成およびデバッグツールのセットです。 DevTools を使用してサイトの反復処理、デバッグ、プロファイリングを行います。 ●公式サイト URL：https://developer.chrome.com/home developers.google.c…