【初心者向け】Webデザインを始める前に行ってほしい設定

Webデザイン・DTPデザイン

エンプロススタッフ

Web制作をする過程で、事前に設定をすることが必要な項目が何点かあります。下記の設定を行っておきましょう。

拡張子を表示する

Windowsではデフォルトで拡張子が表示されない設定になっています。表示されていない場合、Web制作の過程で困ることが発生しまうので、表示する設定にしておきましょう。

htmlやai、psdなどといったファイルの種類を識別するためのファイル名の末尾の文字列です。下記に簡単な説明を記載しております。本当はもっと複雑な内容ですが、まずは下記のような簡単な理解で構いません。

拡張子	読み方	説明
html	エイチティーエムエル	Webサイトを作成するためのファイルの拡張子
css	シーエスエス	Webサイトの装飾をするためのファイルの拡張子。別名スタイルシート
js	ジェイエス	JavaScriptが記述されているファイルの拡張子。Webサイトで使用される場合は主に動きなどの変化をさせるために使用されます
jpg・jpeg	ジェイペグ	写真などの色数の多い画像でよく使われる画像ファイルの拡張子
png	ピング	透過が必要な画像でよく使われる画像ファイルの拡張子
gif	ジフ	ファイルサイズが軽い画像ファイルの拡張子。透過やアニメーションも可能。ただし色数が最大256色と色数が多い画像には不向き
webp	ウェッピー	写真などの色数の多い画像かつ透過も可能で軽量な画像ファイルの拡張子。次世代画像フォーマット
pdf	ピーディーエフ	電子文書ファイルの拡張子
ai	エーアイ	Adobe Illustratorで制作されたファイルの拡張子
psd	ピーエスディー	Adobe Photoshopで制作されたファイルの拡張子
xd	エックスディー	Adobe XDで制作されたファイルの拡張子
fig	フィグ	Figmaで制作されたファイルの拡張子

主にWebデザイン・制作で使われる拡張子

エクスプローラーを開いて右上の「表示」メニュー→「表示」をクリックし、「ファイル名拡張子」をクリックしてください。チェックが入ると拡張子が表示されます。

Macの場合は「すべてのファイル名拡張子を表示」を設定してなくても問題ございません。

Windowsでは標準のブラウザがMicrosoft Edge、MacではSafariになっています。ただし、ブラウザはEdgeやSafari以外にもあり、残念なことにブラウザによって表示が異なることがございます。

この表示の違いを確認することがWeb制作の現場では必須で、開発者のパソコンには主要なブラウザがインストールされています。

その中でも特にGoogle Chromeを使われることが多いので、Chromeのインストールは最低限しておきましょう。

Google Chromeのインストールはこちらから　→　https://www.google.com/intl/ja/chrome/

必須ではありませんが、せっかくGoogle Chromeをインストールしたのであれば、標準ブラウザの設定にしておいた方がよいでしょう。

さまざまな教材などを使用してWebデザインの学習を始めるにあたって、必須といってもよい設定です。業界ではあまりに当たり前のことになっているため、教材などに記載されていないこともあります。

これらの設定をせずに、いざ勉強を始めるとhtmlファイルとして認識しないなど問題にぶち当たる場合がございますので、必ず設定を完了してから学習を始めてみてください。

また、意外と落とし穴になるのが、パソコンを買い替えたタイミングです。このタイミングで上記の設定が忘れがちになりますので、買い替えたタイミングで再度設定してみてください。

LINEをつかって友達や家族にこの記事を教える