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

Webデザイン・DTPデザイン

  • 公開日
  • 最終更新日

エンプロススタッフ

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

  • 拡張子を表示する
  • Google Chromeをインストールする

拡張子を表示する

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デザイン・制作で使われる拡張子

拡張子の表示方法

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をつかって友達や家族にこの記事を教える

シェアボタン

お問い合わせ

エンプロスの職業訓練についてご不明な方は、まずは学科・コース入校から就職までよくある質問をご覧ください。

  • 職業訓練のエンプロスについて、ご質問ご不明点などございましたら、下記のお問い合わせフォームからお問い合わせください。お問い合わせについては、2営業日以内にご返答いたします。

    お問い合わせフォーム
  • 営業時間
    8:50〜18:00
    定休日
    土日祝
    TEL
    079-287-1000