Archives for 4月 2020

AWSを理解するうえでかかせない「リージョン」と「アベイラビリティーゾーン」を徹底解説！

2020-04-20 By プログラミング入門ナビ編集部

AWSを利用する際に、リージョンとアベイラビリティーゾーンという概念を理解することはとても重要です！0にはできない障害に対して、AWSがどのような対策をとっているか理解しましょう！

（参考）グローバルインフラストラクチャ
https://aws.amazon.com/jp/about-aws/global-infrastructure/

動画収録時点では、AWSは22 の地理的リージョンと、 69 のアベイラビリティーゾーンで運用されています。

リージョンとアベイラビリティーゾーンの基本を解説

リージョン（Region）とは？

リージョンとは、AWSサービスが運営されている拠点（国や地域）です。つまり、物理サーバがある地域のことです。東京、香港、オレゴン、北カルフォルニアなど世界に22リージョンがあります（動画収録時点）。

さらに、各リージョン内に、バーチャルな概念のデータセンターが複数あります。

アベイラビリティーゾーン（Availability Zone）とは？

アベイラビリティーゾーンは「AZ.」、略してエーゼット、エジーと呼ばれます。1つのAZは、複数のデータセンターから構成されています。バーチャルな概念のデータセンターのイメージです。物理的な構成は、AWSのユーザーからはわかりません。

東京リージョンでは、ap-northeast-1a から ap-northeast-1dまでの、4つのアベイラビリティーゾーンがあります。

AWSアカウントによっては、使えないアベイラビリティーゾーンがあります。公式には発表されていないようですが、アカウントを作った時期に依存するようです。

AZ間では、地理、電源、ネットワークが分離されていています。
セキュリティの観点から、AZを構成するデータセンターの住所は正式には公開されていませんが、それぞれ数十キロ程度離れているようです。
もし、地震や火災、停電、AWSのシステム障害、局所的な障害で一つのAZが使用不能になっても、サービスを継続できる設計が可能です。

各AZ間は、高速なネットワークで接続されています。ネットワークレイテンシは、（保証はされていませんが）通常は2msec以下です。

マルチAZ

複数のAZを利用して、システムを冗長化させて構築することを、マルチ AZと呼びます。

停止させることなく稼働し続けること、つまり可用性を高める手段として、AWS EC2といった仮想サーバや、AWS RDSといったデータベースサービスをマルチAZの構成にすることは、基本的な手段となります。

AWSを使ったサービス設計において、障害発生は前提条件です。アーキテクトは、仮に障害が発生しても、可用性を高める設計でコストを考慮しながら行います。

例えば、関東で大規模震災が起きてもサービスを絶対に止められないミッションクリティカルなサービス（金融関連、社会インフラ、グローバル公開しているサービス）の場合は、マルチリージョンにする方法も考えられます。

ユーザーが快適にコンテンツを利用するためのエッジロケーション

主に、CDNを提供するためのデータセンターとしてエッジロケーションというものがあり、世界で180か所に点在しています（動画収録時点）。

（参考）Amazon CloudFront の主な特徴
https://aws.amazon.com/jp/cloudfront/features/

CDNとは、コンテンツデリバリーネットワークの略でウェブコンテンツをインターネット経由で配信するために最適化されたネットワークです。
ユーザーが、地理的に近いエッジロケーションからコンテンツを利用することで、低レイテンシで効率よくコンテンツを利用できます。

動画制作時点で、Amazon CloudFrontは、 33 か国 73 都市にある 191 とあります。
ユーザーが、地理的に近いエッジロケーションからコンテンツを利用することで、低レイテンシで効率よくコンテンツを利用できます。

リージョン間の通信はどれぐらいの速度があるの？

リージョン間は、高速回線で結ばれています。

（参考）グローバルネットワーク

https://aws.amazon.com/jp/about-aws/global-infrastructure/global_network/?p=ngi&loc=3

ネットワークレイテンシは、距離に依存（光の速さより早くならない）しているため、注意が必要です。

例えば、アメリカのバージニアリージョンに配置したWebサーバから、東京リージョンにあるデータベースにアクセスする。片道で200msecかかり、往復で400msecだとすると体感でも遅延するのがわかるレベルなので、ユーザーが我慢できなくなってしまう感じです。

AZ間のネットワークレイテンシは、問題にならないことが多いですが、リージョン間の通信は、ネットワークレイテンシが問題になることがあるので注意してください。

通常リージョン以外の特別なリージョンを解説！

大阪ローカルリージョン

大阪にもローカルリージョンというものがあります。
大阪ローカルリージョンは、東京リージョンで大規模震災などが起きた際、大阪に切り替えて使うといったバックアップに用意された場所だと考えてください。

使えるサービスにも制限があり、AWSに申請して許可をもらわないと使えません。そのため、このコースの学習で使うリージョンには使いません。

（参考）大阪のローカルリージョンが 2021 年初頭までに 3つのアベイラビリティーゾーンを持つ完全な AWS リージョンに拡大されることが発表されました。

「AWS 大阪ローカルリージョンをフルリージョンへ拡張中」

AWS GovCloud (米国西部) リージョン

アメリカ政府専用のリージョンです。

北京(Beijing)、寧夏(Ningxia) リージョン

中国にあるAWSリージョンです。現地の法規制に従う関係で、特別に申請が必要となります。

また、リージョンによってコストが違うのも特徴の一つです。
電気代、土地代等の物価に差異があるため、リージョンによってコスト内容が異なります。
日本は比較的高額な部類のリージョンに入るようです。用途によっては、価格が安いリージョンを使う方法もあります。

（参考）リージョン、アベイラビリティーゾーン、およびローカルゾーン
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/using-regions-availability-zones.html

まとめ

「リージョン」と「アベイラビリティーゾーン」について、特に重要なポイントは、

国や地域ごとにリージョンがある。
リージョン内には複数のアベイラビリティーゾーン（AZ）がある
AZ間は物理的に離れている。
マルチAZ構成により可用性が高まる。

です。

それぞれの特徴を理解し、AWSをマスターしましょう！

【SAA-C03】AWS認定ソリューションアーキテクトアソシエイト試験入門完全攻略コース中村祐太 Yuta Nakamura, Proglus （プログラス）効率的にAWSの確かな知識を身につけたい方へ。ハンズオンで学び専門知識を獲得しキャリアアップ。 IAM, S3, LAMP, Linux, MySQL, EC2, ELB, RDS等を幅広く学ぶ。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

独学でプログラミングを学ぶのにおすすめのサイト10選！初心者でもスキルが身につく！

2020-04-20 By プログラミング入門ナビ編集部

はじめに

プログラミングを始めたいけど、わざわざ教室に通う暇もない…

それに、今の仕事と両立しながら自分のペースで進めていきたい…

そんな時は独学で学べるプログラミング学習サイトを活用しましょう！

多くのサイトの中から、学びやすく続けやすいおすすめのサイトを厳選しました。

（各サイトのプランや料金は執筆時点のものであり、変更の可能性があります）

Progate | プロゲート

Progate（プロゲート）は豊富なイラストやスライド教材を使って直感的に学べることで定評のある学習サイトです。

無料会員と有料会員のプランがあり、無料会員では各コースの入門編が学べます。

有料会員は月額980円で様々なコースの応用編にアクセス可能です。

コースは下記の通り、Web系言語を中心としたラインナップになっています。

HTML
CSS
JavaScript
jQurery
Ruby
Ruby on Rails
PHP
Java
Python
SQL
基本ツール(コマンドライン/Git)
Sass
React
GO
Node.js

Udemy | ユーデミー

Udemy（ユーデミー）では、現役のエンジニアによるオリジナル講義を学ぶことができます。

価格は講座により異なり、通常は1〜2万円台が中心ですがキャンペーンも頻繁に開催されているので、予算に合わせて選べるのがいいですね。

わからないことがあれば講師に質問することも可能です。

10万以上の講座があり、内容はビジネススキルからデザインなど多岐に渡ります。

プログラミングのカテゴリでは主に下記の分野が人気です。

Web開発（HTML/CSS/JavaScript)
人工知能（ TensorFlow/Keras/Python）
データサイエンス（Python/R言語）
開発ツール（Docker/Git）

CODEPREP | コードプレップ

CODEPREP（コードプレップ）は全てのコースが「ブック」形式となっており、一冊10分から手軽に学ぶことができます。

また、実際にブックの中で実際にプログラムを動かしながら学習することが可能です。環境構築を省いて挙動を確認できるのがメリットですね。

利用可能なブックは下記の通りです。サポートは終了していますが、全て無料で使用できます。

フォーム実装（HTML）
オブジェクト指向（Java）
position（CSS）
コマンドラインアプリ（Python）
配列操作（JavaScript）

Proglus | プログラス

Ploglus（プログラス）は、動画で詳しく学べるのが特長の学習サイトです。

テキストや画像だけではわかりにくい操作まで動画で丁寧に解説されているので初心者でも安心ですね。

無料プランでは入門編や概要編などのコースを無料で学習できます。レギュラープランでは月額980円で全てのコースを学習できるほか、講師へのQ&Aコーナーの利用が可能です。

「ウェブサイト制作」や「サーバ構築運用」等の目的に応じてコースの内容が体系立てられています。

ウェブサイト制作（HTML/CSS/Bootstrap）
サーバーサイド（JavaScript/Vue.js/Nuxt JS/Ruby/Ruby on Rails/SQL/MySQL）
サーバー構築運用（Linux/AWS）
開発ツール（Git/GitHub）

Schoo | スクー

Schoo（スクー）はプログラミングに限らず、語学や政治、ヘルスケアといった様々なカテゴリについての生放送授業を無料で受講できる学習サイトです。

一部、有料のプレミアム会員（月額980円〜）ではプレミアム枠の放送を視聴したり、録画動画を見ることができます。

放送予定についてはカレンダーで確認できるので、事前に計画を立てられて便利ですね。

プログラミングカテゴリーの中で比較的放送枠の多い内容は下記の通りです。

JavaScript
PHP
Java
Ruby
Androidアプリ
iOSアプリ
Ruby on Rails

Paizaラーニング

Paizaラーニングは、エンジニア転職サービスであるPaizaが運営するプログラミング学習サイトです。

ブラウザ上でプログラミングできるので、初心者がつまずきやすい環境構築不要で始められます。

1動画あたり3分と短いので、毎日少しずつでも続けられそうですね。

ほぼ全ての講座が一部無料で、全てを学習するには月額600円〜の有料プランへ入会が必要という料金体制になっています。

講座の内容は下記の通りです。

アルゴリズム入門
IT業界の構造とエンジニアのキャリアについて
Ruby入門
Webアプリ開発入門
PHP入門
HTML入門
JavaScript入門
SQL入門
AWS入門

dotinstall | ドットインストール

Dotinstall（ドットインストール）は多くの言語に対応したプログラミング学習サイトです。

メジャーなWeb系の言語から、比較的マニアックなCOBOL・Haskell等の言語まで取り揃えています。

一部無料で学習可能ですが、月額1080円のプレミアム会員では全てのコースが受講でき、高速再生や講師への質問も可能です。

利用可能なコースの一部は下記の通りです。

ウェブサイトを作れるようになろう
JavScriptで始めるお手軽プログラミング
サーバー環境を作れるようになろう
PHPでウェブサービスを作れるようになろう
Rubyでウェブサービスを作れるようになろう
Pythonに触れてみよう
Unityでゲームを作ってみよう

Aidemy | アイデミー

Aidemy（アイデミー）は、最新技術トレンドの一つである人工知能に特化したプログラミング学習サイトです。

環境構築が不要で、アルゴリズムの習得に集中することができます。完全な初心者がプログラミングを学ぶのには適さないかもしれませんが、

プログラミングスキルが身についたら人工知能に関する案件に関わりたい、という方は多いです。

そんな方は他のプログラミング学習サイトでの学習の傍ら、こちらのサイトで概要編から学ぶことをおすすめします。

一部有料の講義（980円〜）がありますが、基本的に無料で受講可能です。

はじめてのAI
Python入門
機械学習概論
ディープラーニング基礎
ブロックチェーン基礎

TechAcademy | テックアカデミー

TechAcademy（テックアカデミー）は、受講生一人一人にメンターがついてマンツーマン指導を受けられるプログラミング学習サイトです。

目的を設定し集中して学べるうえ、週2回マンツーマンでのビデオチャットにて質問やペアプログラミングなどのサポートが受けられます。

下記のようなコースがあり、料金は４ヶ月149,000円〜の体制が主体です。

Webアプリケーションコース
PHP/Laravelコース
Javaコース
フロントエンドコース
WordPressコース
iPhoneアプリコース
Androidアプリコース
Unityコース

シラバス

シラバスのコースは、Githubで公開されているソースコードを参考に組み立てられているのが特長です。

実際のコードのマネをしながら本格的なコーディングを学ぶことができますね。

全て無料で学習することが可能で、言語も様々な種類が用意されています。

C言語
Ruby
Sass
JavaScript
jQuery

まとめ

独学でプログラミングを学ぶのにおすすめの学習サイト10選を紹介しました。

内容や料金、サポート体制の観点から、プログラミング初心者へ特におすすめなのはProgate・Proglus・ドットインストールです。

用途に合わせてお気に入りのサイトを選んで、早速プログラミング学習を始めてみましょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

MySQL8のrootパスワードを忘れたらどうすればいい？macOSでのリセット方法を紹介！

2020-04-18 By プログラミング入門ナビ編集部

はじめに

MySQLのrootパスワードを忘れて困ってしまったことはありませんか？

重要なデーベースが入っているのに、もうアクセスできないのでは…と、とても焦りますよね。

ご安心ください、rootパスワードはリセットが可能です。

ここでは、macOS環境でMySQL8のrootパスワードをリセットする方法を紹介します。

MySQLの停止とパスワード無効化

まずは動いているMySQLプロセスがあれば停止してください。

$ mysql.server stop

次に、パスワード無効化のためにMySQLをセーフモードかつ権限スキップオプションで起動します。

$ mysqld_safe --skip-grant-tables &

MySQLにログインし、rootパスワードをnullにして無効化しましょう。その後、いったんログアウトします。

$ mysql -u root
mysql> update mysql.user set authentication_string=null where User='root';
mysql> exit;

次に通常モードでMySQLを再起動しログインしてください。パスワードは無効化したため不要です。

$ mysql.server restart
$ mysql -u root

下記のコマンドでrootパスワードを新しく設定できます。hogehogeの部分に指定したいパスワードを入力してください。

ログアウトし、新パスワードでログインできることを確認しておきましょう。

※ここでエラーが出た場合は次項を参照してください。

mysql> alter user 'root'@'localhost' identified by 'hogehoge';

エラーが出た時は

新しいパスワードを設定しようとした場合に、下記のエラーが出ることがあります。

入力された新パスワードはポリシーを満たしていないから却下する、という内容ですね。

mysql> alter user 'root'@'localhost' identified by 'hogehoge';
ERROR 1819 (HY000): Your password does not satisfy the current policy requirement

「MySQL8.0をmacOSにインストールする方法」の手順のように、最初の設定でパスワードポリシーを「LOW」にしていてもパスワードリセットにより変更されることがあります。

下記コマンドで確認してみましょう。validate_passowrd.policyが「MEDIUM」になっていますね。制約がより厳しくなっており、入力したパスワードが却下されたわけです。

mysql> show variables like 'validate_password%';
+--------------------------------------+--------+
| Variable_name                        | Value  |
+--------------------------------------+--------+
| validate_password.check_user_name    | ON     |
| validate_password.dictionary_file    |        |
| validate_password.length             | 8      |
| validate_password.mixed_case_count   | 1      |
| validate_password.number_count       | 1      |
| validate_password.policy             | MEDIUM |
| validate_password.special_char_count | 1      |
+--------------------------------------+--------+

これをLOWに書き換えます。

mysql> set global validate_password.policy=LOW;

再度、新しいパスワードの設定を行います。

mysql> alter user 'root'@'localhost' identified by 'hogehoge';
Query OK, 0 rows affected (0.02 sec)

今度は無事変更されました。

まとめ

macOS環境でMySQL8のrootパスワードをリセットする方法を紹介しました。

自分一人で使用するデータベースではなく、数人で使用している時は必ずリセットしていいかどうかを周りに確認してから行いましょう。

パスワードを忘れてしまうと慌ててしまいますが、焦らずゆっくり試してみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

ITエンジニアの業種別に仕事内容や年収を徹底解説！自分に合った業種を見つけよう

2020-04-18 By プログラミング入門ナビ編集部

はじめに

これからITエンジニアを目指そうという方は、どの業種を選ぶかお悩みではないでしょうか。

ITエンジニアにも様々な業種があり、業務の内容や年収も微妙に異なります。

どの業種を目指すかによって習得すべきスキルも変わってくるので、プログラミングの学習と併せてあらかじめ知っておきたいですね。

この記事では、ITエンジニアの代表的な業種について業務内容や必要なスキル、年収を解説します。

※年収は下記サイトより引用しました。

平均年収ランキング最新版【職種別】

システムエンジニア

システムエンジニアの業務内容

システムエンジニアは、システムの提案から開発、実際のリリースまでを一貫して行う業種です。

システムと一言でいっても、例えば物流や金融といった社会のインフラを支える大規模な管理システムから、中小企業の勤怠管理システムなど、様々な規模感のものがあります。

規模により関係者の数は増減しますが、クライアントの要求に沿ったものを要件定義、設計しチーム内で連携して開発やテストを行っていくのが主要な業務です。

そのため、開発スキルだけでなく、コミュニケーション力や、提案書・仕様書をまとめる文章力が要求されます。

システムエンジニアの年収

システムエンジニアの平均年収は422万円です。

先述の通り案件ごとの規模差や報酬差が大きいため「システムエンジニア」と一括りにしても年収には差があると想定されます。

年代別では下記の通りです。

20代：366万円
30代：486万円
40代：548万円

Webエンジニア

Webエンジニアの業務内容

Webエンジニアは、WebサービスやWebアプリケーションの開発を行うエンジニアのことです。

開発のみならず運用・保守を含むこともありますが、近年のWebサービスの大規模化・複雑化により、「開発」「運用・保守」を別の職種と見なすのが主流です。

開発工程は「フロントエンド」と「バックエンド」に分かれており、前者はユーザーからの見え方の制御部分、後者はサーバーサイドでの処理を担当します。

技術革新の早い業界であり、様々な言語に関する知識や、ネットワークおよびセキュリティに関する幅広い知見が必要です。

また、開発を効率化するためのツールも日進月歩の勢いで進んでいるため、そうした新しい技術をキャッチアップしていくのが好きな人に向いています。

Webエンジニアの年収

Webエンジニアの平均年収は429万円です。

30代ではシステムエンジニアとほぼ同水準ですが、全体としてはWebエンジニアの方が上回っています。

20代：372万円
30代：485万円
40代：568万円

サーバーエンジニア

サーバーエンジニアの業務内容

システムを動かすうえで無くてはならないハードウェア（サーバー）を構築し運用・保守するのがサーバーエンジニアです。

システムの規模や用途を鑑みてネットワーク回線・電力等のリソースを適切に見積もり、サーバーの構成を行います。

実際の物理的な構築作業や、OS・必要なソフトウェアのインストールもサーバーエンジニアの仕事です。また、システムの不具合があった際にサーバー側でのトラブルがあれば即座に究明・対処しなければなりません。

そのため、OS・ネットワーク・セキュリティに関する知識はもちろんのこと、機材を設置したり緊急対応を行うための体力も必要です。

サーバーエンジニアの年収

サーバーエンジニアの平均年収は467万円です。ITエンジニアの中では比較的高水準となっています。

年代別では下記の通りです。

20代：385万円
30代：537万円
40代：613万円

ネットワークエンジニア

ネットワークエンジニアの業務内容

サーバーエンジニアがサーバー機器の構築や運用を行うのに対して、ネットワークエンジニアはネットワーク機器で同様のことを行う業種です。

ルーターやスイッチを実際のシステム要件に沿うよう構成し、実際の構築作業からトラブル対応等の保守・運用までを担当します。

ネットワーク機器やプロトコルに関する専門知識が必要とされます。また、ネットワークの業界では不正アクセス対策やIPv6対応等、常に新しい課題が出てくるため、これに根気強く向き合う姿勢や知見も重要です。

ネットワークエンジニアの年収

ネットワークエンジニアの平均年収は457万円です。こちらもサーバーエンジニアとほぼ同様に高水準となっていますね。

年代別では下記の通りです。

20代：373万円
30代：518万円
40代：602万円

データベースエンジニア

データベースエンジニアの業務内容

近年はIoTやAI技術の筆頭により、システムが取り扱うべきデータの量が膨大になってきました。この膨大なデータを適切に処理するために欠かせないのがデータベースエンジニアです。

どんなに優れたサーバーやネットワーク機器を使っても、データベースの設計が悪いとデータの処理に余計な時間がかかってしまいます。

このような事態を避けるため、OracleやMicrosoftが提供するデータベースソフトウェアを使いこなして最適な設計・開発を行うのが主要業務です。

また、大切なデータベースを守るためにデータベースサーバーの管理やバックアップを行うこともあります。

データベースエンジニアの年収

データベースエンジニアの平均年収は414万円です。

比較的新しい業種のため40代以降はデータ無しとなっています。

20代：362万円
30代：467万円
40代：-万円(データ無し)

まとめ

ITエンジニアの主要な業種について、仕事の内容や必要とされるスキル、年収を紹介しました。

ご自身の能力が発揮できそうな業種はありましたか？方針検討の参考になれば幸いです。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Windowsで2つのファイルの差分を確認するには？WinMergeの使い方を紹介！

2020-04-18 By プログラミング入門ナビ編集部

はじめに

プログラミング学習をしていると、バグの原因究明に四苦八苦すること、ありますよね。

サンプルコードの通りに記述しているのに、なぜか想定通りに動かない。

実行時にエラー文が出るタイプのバグならまだ確認しやすいですが、特にHTML等で想定と違う挙動をしている場合は何のエラー文も出てこず悩むことも多いですね。

そんな時は、サンプルコードと自分の書いたコードでどの部分が違っているのか、差分（diff）を確認してみましょう。

この記事では、Windows環境でのファイル差分確認方法を紹介します。

ファイルの差分（diff）とは？

2つのファイル間で異なる部分のことを差分といい、「違い」を意味する英単語「difference」から「diff」（読み：ディフ）とも呼びます。

特にプログラミングの業界ではファイル間の違いを見るために「これとこれのdiff取ってみて」などと指示されることも多いです。

冒頭で取り上げたバグの原因究明のケース以外にも、ソースコードの更新をした際に更新前後でどの部分が変わったのか把握する目的でも行われます。

WinMergeのインストール方法

Windows環境で使用できる差分確認ツールとしては、WinMergeがポピュラーです。無料で使用でき、UIも優れていて差分がとても見やすいことから大変人気があります。

インストーラをダウンロード

まず、WinMergeのサイトからインストーラをダウンロードします。

いくつかのインストーラが用意されていますが、一番上の「WinMerge-X.X.X-Setup.exe」を選ぶと良いでしょう。X.X.Xには最新バージョンの数字が入ります。

クリックすると実行するか保存するかを聞かれますが、念のため保存しておきましょう。

インストーラを実行

インストーラをダウンロードできたらダブルクリックします。

インストール場所やコンポーネントの選択がありますが、特にこだわりがなければ全てデフォルト通りのまま「次へ」をクリックしていき、最後の「インストール」を押せば完了です。

WinMergeの使用方法

ここからは、実際のバグ取り例に沿ってWinMergeの使用方法を見ていきましょう。

HTML+CSSでのケース例

ここでは、オンライン講座「Web開発入門完全攻略コース」のサポート記事を例として取り上げます。

「Web開発入門完全攻略コース」サポートサイト

HTMLとCSSをサンプルコードの通りにコーディングすると、本来は下記のような実行結果となるはずです。

実行結果が想定と違う場合は差分を取ってみよう

ところが、このようにナビゲーション部分が横に広がらず縦に並んでしまったとしましょう。

様々な原因が考えられますが、例えば該当箇所でのfloatがうまくできていない可能性が思い浮かびますね。

しかし、base.cssのソースコードを見てみてもそこはきちんとfloat: leftの指定ができているようです。

これならばnav要素は全て左から順に横並びになると想定されます。

header nav ul li {
  float: left;
  width: 155px;
  margin-right: 2px;
  text-align: center;
}

このように原因の予想が外れてしまうと、どこに間違いがあるのかソースコードを頭から一通り睨むことになり一苦労ですね。こんな時こそ差分ツールの出番です。

まずはHTMLファイルを比較してみましょう。WinMergeを起動し、フォルダのアイコンをクリックします。

比較したいファイルを3つまで入力することが可能です。ここでは、まず比較したい2つのHTMLファイル（サンプルコード・自分のコード）を選択してください。

「検証」をクリックすると、2ファイル間で差分がない場合はこのような画面になります。どうやらHTMLファイルには問題ないようですね。

次にCSSファイルを比較してみましょう。先ほどと同様に比較したい2つのCSSファイルを指定し検証をクリックするとこのような画面となりました。

差分がある場合は、左側の「ロケーションペイン」の部分に差分の箇所がオレンジ色で提示されます。その部分までソースコードをスクロールすると、「header nav ul」要素でのwidth指定値に差分があることがわかりました。

サンプルコードは940pxなのに対し、今回書いたコードでは94pxになってしまっていますね。floatが効いていなかったのでなく、幅が足りなかったために縦並びになっていたようです。

このように、素早く簡単に問題の箇所を見つけることができました！

まとめ

Windows環境でファイルの差分を確認する方法を紹介しました。特にHTMLでは想定通りの実行結果にならなかった時、何が問題なのか見つけにくいことが多いです。

この方法を使えばどこが間違っているのかスムーズに確認することができますね。

バグ取り以外にも便利な使い道がたくさんあるので、ぜひ使ってみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する