エディタ

HTMLの学習の前に環境を整える(Windows版)エディタとブラウザは何を選べばよいのか?

Sponsored Link

Sponsored Link

HTMLを学習する際の環境を整える

HTMLを学習する際には環境を整えておきます。Windows対応で見ていきます。
ドットインストールのおすすめは。

ブラウザはグーグルクローム。

グーグルクロームを使うのはディべロッパーツールの機能は無料でついているから。
表示されているページのソースをすぐに開くことができますのでとても便利です。


グーグルクロームのインストールは以下から。
Google Chromeのダウンロードページ

拡張子を表示させるには

プログラムの学習をする際パソコンで拡張子が見えないと困ります。
もし拡張子が表示されていない場合。

エクスプローラーを立ち上げ。

一番上のファイルのr¥所にある表示をクリックします。
すると以下のようなドロップダウンリストが出てきますので。
ファイル名拡張子というところにチェックを入れます。

ATOMエディタ とは

エディタはATOMを使っているのですが。
ATOMは無料なのにエディタとしての基本的な機能が充実していて高機能。

それに加えて「パッケージ」と呼ばれる拡張機能を随時追加できます。
それによってユーザーが使いやすい環境を作り上げることができるのが魅力です。

ATOMは、もともとAtomはGitHubの創業者Chris Wanstrath氏が
「Web技術を用いて、Emacsのように自由にカスタマイズできる新世代のエディタを開発する」
という思いから始まったエディタです。
オープンソースという仕組みを取り入れていますから。
米国GitHub Inc.の社員を中心に、世界中の優秀なエンジニアがATOMの開発に参加して次々に改良を加えています。
今後もさらに良くなっていくことが期待できるエディターといえます。

ATOMのダウンロードサイト

 

ATOMの設定について

HTMLモードに変える

ATOMを開き。
一番下右にあるPlain Textをクリックし。

 

 

出てきた画面の検索窓にHTMLと入れてリターンを押すと

以下のような表示になります。

これでHTMLの設定ができました。

CRFLをFL設定に変える。

Atomで新規作成する場合Windows環境だと初期設定では改行コードがCRLFになります。
CRLFはCR+LFのことで。
CR(キャリッジリターン)は「先頭にカーソルを戻して!」という指示を出す制御文字。
LF(ラインフィード)は「次の行に移りなさい」という指示を出す制御文字。

これを最初から改行コードをLFに変えるにはどうしたらよいのか。

まずは[Ctrl]+[,](カンマ)キーでAtomの設定画面を呼び出します。
設定画面の「Packages」タブを開きま、検索窓に「line-ending-selector」と入れて検索します。

パッケージ一覧の「line-ending-selector」の欄にある[Settings]ボタンを押すと、パッケージの設定画面が出ます。

「Default line ending」という設定項目があり、設定できる値は
OS Default
LF
CRLF

のうちから選びます。
設定値を「LF」に変更すれば、ファイル新規作成時の改行コードがデフォルトでLFになります。

表記を日本語に変える

初期状態では英語表記になっていますので。
必要であれば英語を日本語に変えておきます。
英語のままで慣れたほうが良いという方もいらっしゃいますが。
不慣れなうちは日本語のほうが何かと助かります。

日本語変換にはまず。

メニューバー[File]をクリック。[Settings]を選択すると、Settingの画面が表示されます。

installをクリックすると、Install Packages画面が表示されます。

検索窓に「japanese-menu」と入力しすると
「japanese-menu メニューバーとコンテキストメニュー、設定画面を日本語化します」とのバーが一番上に出てきます。

バーの中にあるインストールボタンを押します。

これでほぼ日本語に変換されますが。
更に日本語化を進める方法もあります。

ただ最初はこれで十分かと思います。

フォントの導入 Ricky Diminished

Ricky Diminishedは記号などの判別がしやすいフォントで。
プログラミングをされている方体の多くが採用をしています。

まずRicky Diminishedで検索をし。
その中でもregularなどを選び。

ダウンロードボタンを押してダウンロードをします。
それをクリックすると以下のような画面が表れます。

この画面上にあるインストールボタンをクリック。
ATO Mを再起動することによってこのフォントが反映されます。

再起動したATOMを編集していきます。

エディタ→セッティング→エディタの順に開いていきます。
そしてフォントファミリーの枠の中にRicky Diminishedと書き入れます。

 

エディタ編集画面の見た目を変更

同じくエディタ→セッティング→テーマ
と入れるとエディタ編集画面の見た目を変更することができます。
明るい色にしたい場合など便利です。

ただこれも使い慣れていくうちに好みが出てくると思いますので。
随時変更をしていくと良いと思います。

まとめ

これで一応の準備ができました。

とはっても上記は最低限の基本です。
ATOMは他にもプラグインを入れることで様々活用ができます。

あとは作業を進めながら機能を拡張していきたいものです。

それにしてもATOMは難しすぎるという方もいらっしゃるんではないかと思います。
プログラミング学習はそこそこにしておきたいというのであれば
TeraPadがおすすめです。
非常にシンプルで使い勝手が良いです。
とはいえまともに使いこなそうと思えば非常に高機能ですので。
それなりの学習が必要です。

TeraPad 公式ダウンロードサイト

中程にダウンロードできるところがあります。

Sponsored Link

Sponsored Link

関連記事

  1. CSS セレクタとプロパティと値の基本まとめ
  2. HTML・CSSを実際に記事を作りながら覚えていこう
  3. CSS 擬似要素beforeとafter 使い方基本
  4. HTMLの勉強で押さえておくべきこと②HTMLリンクタグ基本
  5. ソースコードを記事中に表示させるために必要なことは?簡単にソース…
  6. CSS positionの使い方
  7. HTML CSS テーブル(表)の作り方とその装飾の仕方 基本
  8. 知っておくと便利なセレクタまとめ

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 
  2. WordPressのフォルダ構成とバックアップの仕方
  3. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし
  4. 【Basics of site construction】カテゴリーを設定はSEO対策に最重要 読者にもわかりやすい整理整頓方法とは
  5. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  6. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明
  7. Windows10 でフォルダの拡張子を表示するには?
  8. 【Basics of site construction】ワードプレスで日付を消す方法

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。<TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
Windows10でブルーライトカットの設定 コントロールパネルの使い方
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl 便利で楽しい カスタムオブジェクトの使い方
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク
AviUtlのすべてのエフェクトについての解説⑤透過・透明化エフェクト クロマキー・カラーキー・ルミナンスキー
AviUtlのすべてのエフェクトについての解説⑬アニメーション効果(3)

ソフト・アプリの使い方

PAGE TOP