2017-01-09

初心者にも分かりやすいレンタルサーバー選び

　　　　　　　 f:id:sugochan:20161230060354p:plain

レンタルサーバーも種類が多すぎて初心者にはどのサーバーが良いのかサッパリな状態になっていると思います。
そんな人の為に当サイトでは正しいレンタルサーバーの選び方を説明したいと思っております。
少しでも皆様にお役に立てればと思っております。

初心者がレンタルサーバーを選ぶときのポイント

価格が安く最低限の機能が付いている
Webサーバー機能の充実度
安定性（サーバーが落ちにくい、読み込みの速さ）
電話サポート
レンタルサーバーの種類

価格が安く最低限の機能が付いている

レンタルサーバーを選ぶ上で皆さんがまず考えることはコストパフォーマンスの高さだと思います。
安くてまあまあな機能があれば納得いくサーバーと言えます。
正直サーバーにアップロードしたが読み込みが遅い、落ちやすいといったそこまで極端に不具合のあるレンタルサーバーも減ってきました。
これはレンタルサーバーというサービスが一般化されて年数も経ったので変なサーバー会社が無くなり淘汰されてきていると言えます。
あとはWordPressの使いやすさやデータベースの数、そのレンタルサーバー会社が大手か否かという比較になってきます。

Webサーバー機能の充実度

レンタルサーバーを使う＝ホームページを作って公開するという事だと思いますが、それに伴い、Web機能が気になるところです。
Web機能と言えば例えばブログ機能、アフィリエイトに特化しているWordPressを設定するための機能がついているなどです。
WordPressの設定は自分で調べてインストールして設定するにはある程度データベースの仕組みが解っていなければ初心者には少しハードルが高くなってしまいます。
WordPressの簡単クイックインストールが付いているレンタルサーバーなどあるのでそういったものを使うと楽に設定できます。

安定性（サーバーが落ちにくい、読み込みの速さ）

レンタルサーバーを決める上で値段ですが、その次に外せないのが安定性です。といってもひと昔前は酷く落ちやすいレンタルサーバーも存在していましたが今はほとんどそのようなレンタルサーバーは存在しないと言ってよいでしょう。
かなり探せばあるかもしれないがそんなことわざわざする必要ないですよね。
少なくともここで紹介するレンタルサーバーには変なのは無いですから安心してください。
変な名前の聞いたことのないサーバーではない限り安定性に関しては大丈夫でしょう。
あとは読み込みの速さはやはり価格相応になってます。この辺は割と差が出てきてしまいます。
WordPressを使う場合や機能が多いホームページを作る場合はある程度機能を重視した方が良いです。

電話サポート

設定ミスでいきなり自分のホームページにアクセス出来なくなったなどのトラブルが起こるかもしれません。
そういった時の為に電話サポートがあると安心です。
意外と簡単な理由でいきなり落ちたホームページが復活したりするものです。
初心者の場合、わからないことも多いので電話サポートを取り入れたほうが無難でしょう。

　　　　　　　　　　　　 f:id:sugochan:20161231073810p:plain

レンタルサーバーの種類

エックスサーバー

レンタルサーバーの中で抜群の人気を誇っています。
コストパフォーマンスが素晴らしく、サポート体制も充実していて初心者も安心して使用できます。
上級者も末永くご利用される場合も多いです。
最初はあれこれ考えても使ってみないとわからないので当サイトではまずはエックスサーバーをお勧めします。

プラン	エックスサーバー(X10)
初期費用	3240円
月額料金	1,200円
容量	200GB
データベース(MySQL)	50個
マルチドメイン	無制限
WP自動インストール	〇
お試し期間	10日間
サポート体制	メール・電話サポートあり

お名前.com

お名前.comの売りはWeb会社の大手GMOインターネットが運営しているレンタルサーバーということで初心者でも安心して使えるしもちろん機能も充実しているのでエックスサーバーに次いでお勧めできます。
私の中では機能性のトップにエックスサーバー、その次に大手が運営しているお名前.comだと思っています。

プラン	お名前.com(SD-11)
初期費用	無料
月額料金	900円
容量	200GB
データベース(MySQL)	50個
マルチドメイン	無制限
WP自動インストール	〇
お試し期間	なし
サポート体制	メール・電話サポートあり

ロリポップ

初心者にもわかりやすくあまり手の込んだホームページを作らない、アフィリエイトのペラサイトを作るのでといった簡単なホームページを作るのであればロリポップの低価格プランでも大丈夫でしょう。

以前はメールのみのサポートでしたがややグレードが上のプランでしたら電話サポートもされております。
メールのサポートも大体翌日には返信されているので安心といえば安心ですが、すぐに解決したい場合は電話サポートがあった方が安心です。

プラン	ロリポップ(スタンダードプラン)
初期費用	1,500円
月額料金	600円
データベース(MySQL)	30個
WP自動インストール	〇
お試し期間	10日間
サポート体制	メール・電話サポートあり

さくらインターネット

さくらインターネットの良さは価格が安いわりに電話サポートがついているという事です。
あとは老舗ということもあり長年培ってきた信用、信頼です。
あまり凝ったホームページを作らない、安く運営したいとかならさくらインターネットのレンタルサーバーはお勧めです。

プラン	さくらインターネット(スタンダードプラン)
初期費用	1,000円
月額料金	500円
容量	100GB
データベース(MySQL)	20個
WP自動インストール	〇
お試し期間	14日間
サポート体制	メール・電話サポートあり

2017-01-05

HTML①【初心者向け30代40代からOK】

HTML CSS

f:id:sugochan:20161226064906p:plain

HTMLはホームページを作ったことのある人は組んだことのあるプログラムだと思います。

HTMLは基本的には表示するのみの比較的簡単なプログラムで

簡単に言えば文字をタグというHTML特有の記号で囲みます。タグとは決して難しいものではなく開始タグ<>終了タグで成り立っていてそれがホームページを構成しています。

タグの使用例を上げると見出し（タイトル）をWeb上で表示しようとすると以下のようになります。

サンプル
<h1>タイトル</h1>

このようにタグで囲むとWeb上では

<h1></h1>
のタグは消えて単なる

タイトル

という太字のみが表示される状態になります。

段落を表示する場合は<p></p>というタグで囲みます。

サンプル
<p>これが記事です。</p>

Web上では「これが記事です。」と表示されて
<h1>で囲んだ場合と比べて小さく細い文字で表示されます。

これがHTMLの基本です。
Web上ではHTMLで表示することがホームページ制作の基本になっていて世の中の全てのホームページはHTMLで表示されていますので勉強しても損することはないですしアフィリエイトやブログをしたい人にも役立つ比較的簡単なプログラミングなので是非勉強していただきたいと思います。

CSSの基本

CSSの基本的な1例を挙げると次のような感じになります。

f:id:sugochan:20170105134737p:plain 　　 f:id:sugochan:20170105134854p:plain

CSSの書き方はセレクタに対してプロパティと値が対になって成立しています。
プロパティは英語で所有権、所有、財産、(ものの)特質、特性といった意味です。
この場合特性という意味でしょう。

#sampleの色の特性は赤（値）という感じです。青であればblueに変えれば良いです。
ちなみに色を表す値はred、blueという書き方以外に赤の場合は#ff0000、青の場合は、#0000ffという感じのカラーコードで書いても同じ意味になります。
カラーコードの方が色の表現がより細かくできるので一般的にはカラーコードを使うことが多いです。
プログラムは基本、英語なので少し馴染みにくいのですが、慣れてしまえば簡単です。

1つのセレクタに対して複数のプロパティを設定することが出来ます。

普通に書けば

#sample{background-color:blue;width:300px;height:200px;}

となりますがこれだと読み辛いのでプロパティを1つ書くごとに改行します。
こんな感じです。

 #sample{
  background-color:blue;
  width:300px;
  height:200px;
}

このように書いたほうが一つ一つのプロパティが読みやすいです。
background-colorは青、widthは幅300px、heightは高さ200pxという意味です。

基本的にはCSSはHTMLに対してこのような色、幅、高さなどに設定するためにあります。なのでHTMLが無ければCSSは書きようがありません。

先ほどの例で説明しますと、CSSの#sampleはHTMLでは<div id="sample"></div>と書かれています。
#sampleの#はHTMLではidになります。
この例とは別に.sampleという書き方もあり"."の場合はHTMLではclassになります。
<div class="sample"></div>という感じです。

classとidの違いはidはその1枚のファイルの中に一つしか設定出来ません。逆にclassはいくつも設定出来ます。

2017-01-02

floatの基本的な使い方

HTML CSS

floatの基本的な解説をします。

レイアウトを組む場合は結構頻繁に使いますので覚えておくと後が楽です。
全然HTMLをかじった事がない人は少し特殊な感じに思うかもしれませんが、慣れてしまえば簡単です。
是非覚えて普通に使えるようにしましょう。
尚、floatの参考プログラムはfloatの説明に必要な部分のみのプログラムなので実際にはもっと必要なコードがありますが、必要なコードは当サイトのHTML③のページに書いてある全体のプログラムは必要なコードも含まれています。
そちらと見比べてみてくださいね。
細かいことはそのうち慣れてきたら自然に覚えるので今はfloatに集中しましょう。

まずはfloat無しのコードです。上から順番にブロックが置いてある状態です。

表示画面はこんな感じ。※HTML③のコードにはcontainerの中にfooterが入ってますが、今回は後の説明の為にcontainerとfooterは切り離してあります。

f:id:sugochan:20170102120628p:plain

次がコードです。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html:charset=UTF-8" />
<title>float解説</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 25px;
}
#container {
  width: 700px;
  height: auto;
  margin: 0px auto;
  background:#eee;
}
#content {
  width: 400px;
  height: 200px;
  background: purple;
  color: white;
}
#side {
  width: 300px;
  height: 200px;
  background: yellowgreen;
  color: white;
}
#footer {
  margin: 0 auto;
  width: 700px;
  height: 50px;
  background: aqua;
}
</style>
</head>
<div id="container"><!--container-->
  <div id="content">
    contentです</div><!--content-->
  <div id="side">
    sideです</div><!--side-->
</div><!--container-->


<div id="footer">
    footerです
</div><!--footer-->

</html>

次にfloatを付け足してcontent、sideの順に左に回り込ませます。

下のコードのようにfloatを付け足します。

#content {
  float:left;
  width: 400px;
  height: 200px;
  background: purple;
  color: white;
}

#side {
  float:left;
  width: 300px;
  height: 200px;
  background: yellowgreen;
  color: white;
}

次の画面になります。

f:id:sugochan:20170102123320p:plain

無事にcontentとsideが回り込みました。

あれ!?
なんかおかしいですね。

footerが消えています。。

floatを解除しなければ画面には表示されないですが、上の方に埋もれてしまいます。
この状況からきちんとfooterを表示させるためにはclearを使いfloatを解除します。

footerを次のように変更します。

#footer {
  clear: both;
  margin: 0 auto;
  width: 700px;
  height: 50px;
  background: aqua;
}

f:id:sugochan:20170102125339p:plain

すると無事にfooterがきちんと下に表示されました。

基本的なfloatの解説は以上です。

次が完成コードです。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html:charset=UTF-8" />
<title>float解説</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 25px;
}
#container {
  width: 700px;
  height: auto;
  margin: 0px auto;
  background:#eee;
}
#content {
  float:left;
  width: 400px;
  height: 200px;
  background: purple;
  color: white;
}
#side {
  float:left;
  width: 300px;
  height: 200px;
  background: yellowgreen;
  color: white;
}
#footer {
  clear: both;
  margin: 0 auto;
  width: 700px;
  height: 50px;
  background: aqua;
}
</style>
</head>
<div id="container"><!-- コンテナ -->
  <div id="content"><!-- フロートで左に寄せます --> 
    contentです</div><!--content-->
  <div id="side"><!-- フロートで右に寄せます --> 
    sideです</div><!--side-->
</div><!--container-->


<div id="footer">
    footerです
</div><!--footer-->

</html>

2016-12-31

TeraPadの使い方

プログラミングの準備

TeraPadの基本

TeraPadの基本的な使い方はファイルの新規作成、ファイルの保存、上書き保存になります。慣れてしまったら全然簡単なのでしっかり覚えておこう。
基本を覚えたら今度は自分で初期設定しておきます。
きちんと設定すれば見やすいしミスも少なくなります。作業効率も上がること間違いなしです。
自分の使いやすいようにTeraPadをしっかり設定しておこう。

f:id:sugochan:20161231081118p:plain

f:id:sugochan:20161231081616p:plain

ファイルの新規作成

「ファイル」メニュー　→　「新規作成」で新しいファイルが出てきます。
Ctrl + Nで短縮できます。

ファイルの保存

ファイルの保存方法は「ファイル」メニュー　→　「ファイルの種類」を選択　→　「名前を付けて保存」　→　任意のファイル名を入力します。
Shift + Ctrl + Sで短縮できます。

上書き保存

ファイルの上書き保存は「ファイル」メニュー　→　「上書き保存」を選択します。
Ctrl + Sで短縮可能です。

f:id:sugochan:20161231081954p:plain

以上で基本的な使い方は終了ですが、ここで実際プログラミングをおこなう際に次のような設定をしておくと作業が楽です。

是非やってみてくださいね。

f:id:sugochan:20161231082137p:plain

まずTeraPadのアイコンをクリックして起動したら、「表示」　→　「オプション」を
クリック。

f:id:sugochan:20161231082251p:plain

オプション画面のままで表示のタブをクリックして全角空白（Z）のところにチェックを入れて最後にOKボタンをクリックします。
そうすると半角スペースには□は表示されないですが全角スペースでは□が表示され、つまらないミスを減らせます。
以上でTeraPadの設定は終了です。
これでプログラミングの準備は整いましたね。