読者です 読者をやめる 読者になる 読者になる

おとなんつづり

心穏やかな暮らしを目指しながら、日々の出会いや思う事を綴っています

【初心者向け】HTMLやCSSを使う前に準備するもの

初心者WEB

 

ようやくブログの土台が出来てきたオトナンです。

先輩方のお陰で何とかここまで来ました。

「コピペOK」とか 「こんな風に書けば簡単」とか助かります!

ただ・・・そのCSSやHTML。どうやって何に書いてどう保存するの? 

 

 

 

 

f:id:otonann:20161208172019j:plain

 

既にブログを書かれている方にとっては、当たり前すぎる内容なんですが・・・

最初よくわからなかったんです。

 

私みたいな人は少ない・・・

いや、居ないかもしれませんが一応ご紹介です~。

 

とても助かっている本「草野 あけみ/HTML&CSS標準デザイン講座 【HTML5&CSS3対応】」を参考に書かせて頂きます。

テキストエディタのインストール

HTMLやCSSの記述をそのまま「メモ帳(テキストファイル)」に貼ると、場合によっては文字化けしたり文字間が繋がったり。

文字コードに制限があったりするからなんですね。

 

だからテキストエディタを使って書いたり保存したりするんです。

これを知らないとアタフタします。

 

 

テキストエディタはWeb開発専用と一般の2種類。

Web開発専用は入力補完機能などの便利な機能を利用できて効率的だそうです。

今の私のチカラでは使いこなせません・・・。

ここでは一般テキストエディタをご紹介します。

 

一般テキストエディタ

 

無料でも十分事足りてます。私はサクラエディタを使っていますよ。

検索するとダウンロードサイトが出てきます。

Windows標準のメモ帳とイメージが似てるので使いやすいです。

 

 

そしてメニューバーが可愛いんです~

ね?初心者が入りやすそうでしょ!?

 

<サクラエディタ画面>

f:id:otonann:20161208171936j:plain

 

 

 

可愛いだけじゃなく、設定メニューも充実しています。

 

<サクラエディタ 設定メニュー抜粋>

f:id:otonann:20161208171950j:plain

 

  

読み書きしたいファイルをサクラエディタにドラッグ(又はファイルを開く)するとちゃんと修正出来るようになります。

当たり前ですけど、ね。知ったとき感動しました。(^-^;

 

ブラウザのインストール

記事を表示させる画面の種類みたいなもの。

人によって使っているブラウザが違うので、見え方も違う時があるんです。

より多くのブラウザで確認できれば安心ですよね。

 

確認用ブラウザ

以下2つが主流のようです。

  • Google Chrome WindowsとMacの両方対応していて、世界的にシェアが大きい。確認用にはベスト。
  • Internet Explorer Windows9までの標準ブラウザ。Windows10以降はEdge。 Edgeの場合、メニューバー右端の「詳細」メニュー「Internet Explorerで開く」で別ウィンドウが立ち上がり確認できます。

IE11より以前の旧バージョンで表示を確認したい場合は「開発者ツール」(IEを起動させてF12で開く)か、「IE Tester」などのフリーソフトで確認できるようです。

 

拡張子の表示

アイコンだけでは何のファイルか判断がつきませんよね。

なので、拡張子(.txt や .htmlなどファイルの末尾に記す識別子)の表示が必要です。

  • Windows7/Vistaの場合 コントロールパネル>デスクトップのカスタマイズ>フォルダーオプション>表示>「登録されている拡張子は表示しない」のチェックを外す
  • Windows10/8の場合 目的のフォルダを開いて「表示」タブ>「表示/非表示」欄の「ファイル拡張子」にチェックを入れる
  • Macの場合 Finder>環境設定>詳細>「すべてのファイル名拡張子を表示」にチェックを入れる

ブログサービスの選び方

初心者が、HTMLやCSSを使って最初から作るととんでもなく時間かかります。

そんなの想像するだけでぞーっとします。。。

今は魅力的なテンプレートが用意されている無料のブログサービスがあるんですよ。

 

代表的なのは芸能人がよく利用してる「アメーバ」でしょうかね。

個人的には「はてなブログ」がシンプルで好きです。

独自ドメインも取れるのでしっかり書きたい人にも良いサービスだと思ってます。

 

 

基本的に無料ブログは、Webサーバを借りたりFTPソフトをインストールしたりする必要は無いです。

はじめは無料ブログで色々試してみるのがいいと思いますよ。

 

私は、無料ブログとWordpressの両方使っています。

比較してみると無料ブログは楽しい!

記事を書く励みというか、モチベーションが保てるんです。

 

 

Wordpressで新ドメインでブログを書き始めると最初はアクセス無いです。

無人島にお店を出してるみたいな感じなんですよ。

叫んでも誰も気が付かない・・・。

気が付いてもらうのに時間がかかるんですよね。

でも自由だから好きなように作り込めます。

 

その点、無料ブログは縛りがあるけどすぐ誰か気が付いてくれる。

人工の多い街に場所を借りてお店を出してるような感じです。

 

新規ドメインで ブログを書く時はWebサーバとFTPソフトが必要になってきますよ

WebサーバとFTPソフト

無料ブログサービスを使うなら必要ないです。

独自に立ち上げる時に必要になってきますよ。

自分のパソコン内で書いてネットに繋げるんじゃ容量やスピードに限度がありますから。

 

読み書きしたHTMLやCSSファイルを、そのレンタルwebサーバに転送するのに使うのがFTPソフトになります。

 

以下は一例。

ネットで検索すると比較やオススメ情報が沢山出てきます。

  • Webサーバ エックスサーバー FC2 TOYPARK ロリポップ さくらインターネット
  • FTPソフト <Windows用> FFFTP FilleZilla WinSCP <Mac用> Cyberduck FileZilla Fetch Transmit

 

私はFFFTPを使っています。

イメージはこんな感じ。ドラッグで簡単に転送できます。

 

f:id:otonann:20161208172008j:plain

 

最後に

まずは無料ブログで始めるのが良いと思いますよ。

私、CSSってなぁに?って状態でWordpressで独自ドメイン取ってブログを作り始めたから大変でした。

ネット上で先輩方がノウハウを教えてくれるので何とかなってますけどねぇ。

無駄じゃないけど、かなりの遠回り。

 

 

無料ブログの場合は、レンタルサーバーを借りる必要が無く比較的楽しくブログ書けます。

やっぱり誰かに気付いてもらえるって嬉しいですしね!

 

 

ここまで読んでくださってありがとう。

まだまだ覚えることが沢山。ボチボチやります~

ではまた (╭ರᴥ•́)。