【初心者向け】Webデザインを始める前に行ってほしい設定
Webデザイン・DTPデザイン
-
- 公開日
-
- 最終更新日
エンプロススタッフ
Web制作をする過程で、事前に設定をすることが必要な項目が何点かあります。下記の設定を行っておきましょう。
- 拡張子を表示する
- Google Chromeをインストールする
拡張子を表示する
Windowsではデフォルトで拡張子が表示されない設定になっています。表示されていない場合、Web制作の過程で困ることが発生しまうので、表示する設定にしておきましょう。
拡張子とは
htmlやai、psdなどといったファイルの種類を識別するためのファイル名の末尾の文字列です。下記に簡単な説明を記載しております。本当はもっと複雑な内容ですが、まずは下記のような簡単な理解で構いません。
拡張子 | 読み方 | 説明 |
---|---|---|
html | エイチティーエムエル | Webサイトを作成するためのファイルの拡張子 |
css | シーエスエス | Webサイトの装飾をするためのファイルの拡張子。別名スタイルシート |
js | ジェイエス | JavaScriptが記述されているファイルの拡張子。Webサイトで使用される場合は主に動きなどの変化をさせるために使用されます |
jpg・jpeg | ジェイペグ | 写真などの色数の多い画像でよく使われる画像ファイルの拡張子 |
png | ピング | 透過が必要な画像でよく使われる画像ファイルの拡張子 |
gif | ジフ | ファイルサイズが軽い画像ファイルの拡張子。透過やアニメーションも可能。ただし色数が最大256色と色数が多い画像には不向き |
webp | ウェッピー | 写真などの色数の多い画像かつ透過も可能で軽量な画像ファイルの拡張子。次世代画像フォーマット |
ピーディーエフ | 電子文書ファイルの拡張子 | |
ai | エーアイ | Adobe Illustratorで制作されたファイルの拡張子 |
psd | ピーエスディー | Adobe Photoshopで制作されたファイルの拡張子 |
xd | エックスディー | Adobe XDで制作されたファイルの拡張子 |
fig | フィグ | Figmaで制作されたファイルの拡張子 |
拡張子の表示方法
Windowsの場合
エクスプローラーを開いて右上の「表示」メニュー→「表示」をクリックし、「ファイル名拡張子」をクリックしてください。チェックが入ると拡張子が表示されます。
Macの場合
Macの場合は「すべてのファイル名拡張子を表示」を設定してなくても問題ございません。
Google Chromeをインストールする
Windowsでは標準のブラウザがMicrosoft Edge、MacではSafariになっています。ただし、ブラウザはEdgeやSafari以外にもあり、残念なことにブラウザによって表示が異なることがございます。
この表示の違いを確認することがWeb制作の現場では必須で、開発者のパソコンには主要なブラウザがインストールされています。
その中でも特にGoogle Chromeを使われることが多いので、Chromeのインストールは最低限しておきましょう。
Google Chromeのインストールはこちらから → https://www.google.com/intl/ja/chrome/
Google Chromeを標準ブラウザに設定する
必須ではありませんが、せっかくGoogle Chromeをインストールしたのであれば、標準ブラウザの設定にしておいた方がよいでしょう。
まとめ
さまざまな教材などを使用してWebデザインの学習を始めるにあたって、必須といってもよい設定です。業界ではあまりに当たり前のことになっているため、教材などに記載されていないこともあります。
これらの設定をせずに、いざ勉強を始めるとhtmlファイルとして認識しないなど問題にぶち当たる場合がございますので、必ず設定を完了してから学習を始めてみてください。
また、意外と落とし穴になるのが、パソコンを買い替えたタイミングです。このタイミングで上記の設定が忘れがちになりますので、買い替えたタイミングで再度設定してみてください。
LINEをつかって友達や家族にこの記事を教える
シェアボタン