webcordingカテゴリーの共通アイキャッチ画像

コーディングの準備

フォルダの作成

フォルダ名やファイル名の命名ルール

半角英数小文字のみ使用します。
記号を使用する場合は(-)ハイフンと(_)アンダーバーのみ使用可とします

  • projectフォルダ名:例1)241015 例2)part1 例3)portfolio  例4)recurrent_hiroshima など
  • プロジェクトフォルダの中にworkフォルダとhtmlフォルダを作成します。
  • workフォルダの中にはページを作成するために使用した素材などを全て保存します。まとめて保存する事で修正や更新時に素材を探す手間を省きます。
  • htmlフォルダは作業フォルダになります。htmlファイル、ページ内で使用する画像、cssファイルなどを作成して保存します。

エディタソフト準備

Dreamweaver

Dreamweaverは、Adobeが開発したウェブサイト作成ソフトウェアです。シンタックスハイライトやコード補完機能の他に、コードの挿入やエラーチェック機能も充実しており、HTML初心者でも使いやすいエディタです。

デザインだけでなく、サイトの管理やアップロードもサポートしており、多機能で使いやすさが重視されています。現在のシェア率は約20%とされていますが、CMSとの連携機能も備えており、初心者からプロフェッショナルまで幅広いユーザーに利用されています。

Visual Studio Code

Visual Studio Code (VS Code)は、Microsoftが開発した軽量で高機能なフリーのコードエディタで、多様な言語に対応しており、シンタックスハイライトやコード補完機能により、効率的にコーディングができます。豊富な拡張機能を利用できることが特徴です。

VS Codeには、WordPressやDrupalなどのCMS向けの拡張機能が多数あります。拡張機能を利用する事でCMSのファイルを直接編集したり、特定の機能を簡単に利用したりできます。現在のシェア率は約40%以上とされており、フロントエンドに限らず多くのユーザーに支持されています。

PAGE TOP