自由気まままMENUCLOSEサイトメニューWeb制作フリーランスブログネタプロフィールお問い合わせCLOSESEARCHWeb系フリーランスがWeb制作やガジェット、ブログについて綴っていきますWeb制作フリーランスブログネタプロフィールお問い合わせHOMEWeb制作コーディングにおけるフォルダ配置と画像ファイル命名規則コーディングにおけるフォルダ配置と画像ファイル命名規則2019年5月2日Web制作ツイートシェアはてブ送るPocketサイト制作を行う際に、ディレクトリの配置や画像ファイルの名前について意識しているでしょうか?Web制作会社とやりとりをしていて、細かいながらも重要な話だと思ったので記事にしてシェアします。僕は、以前お仕事させていただいたWeb制作会社の配置を元にしています。個人が適当に決めたものよりかは、ある程度信頼性があると思います。今回は、下層ページが4ページある静的コーポレートサイトを想定します。この場合、実際のフォルダ構成は以下のようになります。index.htmlはトップページのHTMLファイルです。cssとjsにはトップページのcssファイルとjsファイルに合わせて、全ページ共通のcss及びjsファイルが含まれています。下層ページのフォルダには、トップページと同じ構成物がそのまま入っています。以下、構成のポイント解説。下層ページはフォルダごとにわける下層ページはページごとにフォルダを作ってしまいます。大きな理由は、後の管理が楽だからです。後ほどaboutページだけ修正したい!となったとき、この構成ならaboutページごとzipで渡すなりサーバーにアップで済みます。これがもし以下のような構成だと、少し話が違ってきます。こちらの構成だと、aboutに手を加えようと思ったらcssフォルダの中のabout.cssを取り出して、jsフォルダの中のabout.jsを取り出して...と少し面倒です。うっかりaboutに似た名前のファイルをいじる...などといったミスも発生するかも知れません。この程度の規模感のサイトならまだマシですが、大規模サイトだと数が増えすぎて目当てのファイルが見つかりにくくなる...などといった問題が目に見えてます。後の人が困らないようなフォルダ管理を心がけましょう。common.jsなど)を作成します。jsフォルダに格納します。一つの方法として、commonというフォルダを作って、共通のcssやjsは全てそこに入れてしまうという方法もあります。この辺は各自のやりやすさや案件、相手方に合わせて変えていくといいでしょう。僕はディレクトリが増えると少し面倒に感じてしまうので、共通ファイルは全てトップページのフォルダに格納しています。画像ファイルの命名規則ファイルを命名する際は、最初に識別子を設定します。後ろに任意で名前をつけます。識別子を最初につける理由は、名前でソートした時に綺麗に揃うからです。この方法は、以下の書籍を参考にさせていただきました。“true”}]}[/kattene]具体例を見てみてましょう。icon写真など:imgこれらの識別子を用いて、画像に名前をつけると以下のようになります。具体例logo_header.jpgbnr_about_01.pngimg_contact_02.jpgこのように、識別子の後ろには画像の場所や情報を表すワードを入れてあげます。複数の画像がある場合は、01などの連番をつけてあげましょう。識別子は各々で自由に決めても問題ありませんが、誰が見てもわかりやすいものにしておきましょう。自分のルールで決めると、後から他の人が見たとき何を表しているかわからず困ってしまいます。まとめフォルダやファイル名など、こういった細かい部分は意識していないと適用にやりがちな部分です。サイトの規模感が大きくなると、こういった最初の取り決めが後の作業に響いてきます。後の人のことも考えて、わかりやすい構成や命名をできるようにしておきましょう。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。