に投稿 コメントを残す

ホームページの階層構造〜ディレクトリでファイルを整理

ホームページの階層構造〜ディレクトリでファイルを整理

ディレクトリ=フォルダです

こんにちは、ホームページ制作のオイゾウです!
HTMLとCSSについての理解が深まってきたところで、ここからはパソコン内で作ったそれらのファイルをインターネット上に公開するための方法を説明していきたいと思いますが、その前にオイゾウのホームページ講座で学んでいる篠田さんとジョージさんを招き、「ホームページの構造」についてお話ししたいと思います。

篠田さんプロフィール

川越市内の某お土産屋さん、68歳。
趣味の家庭菜園をテーマにしたホームページを立ち上げるため勉強中。
Apple製品に目覚め、携帯電話はiPhone、PCはMacBook Airを愛用。

ジョージさんプロフィール

川越市内で理容室を営む52歳。
理容師として30年以上の経験を世の中に伝えるため、店舗ホームページを作りつつブログで情報発信する予定。

no name
HTMLとCSSについては理解できてきましたか?
no name
だいぶ分かるようにはなったけど、あとは実際にやってみて覚えていければいいかな。
no name
あ、そうそうアマゾンで本を買ったよ!

no name
篠田さん、前向きにがんばってますね!
どれどれ、アマゾンで検索と・・・
ホームページ入門書部門で売れ筋ランキング1位じゃないですか!
no name
読んでたらすぐにでもホームページ作れるような気がしてきたよ。
no name
っていうか篠田さん、アマゾンで買い物できるようになったんだ。
no name
最近はコレ(iPhone)ね。
本は結構アマゾンでいろいろ買ってるよ。
カミさんの影響でベニシアさんにハマっててさ、この前はこの「ハーブ便り」買ったけど、すごい勉強になるんだよね!
これからハーブを育てようと思ってるよ。

no name
篠田さんがベニシアさんにハマるなんて意外ですね!
読み終わったら貸してください(笑)。
ところでかなり話がそれたので戻しますが、では作成したHTMLやCSSファイル、それに画像を用意して、それらをインターネット上に公開するためにはどうすればよいと思いますか?
no name
サーバにアップするんじゃないかな?
no name
正解です!
そのためにはFTPという通信手段を行なう必要があるのですが、でもその前に覚えておいてほしいことがあります。
それは「ホームページの構成」です。
まずは以下の図を見てください。

ディレクトリを使わず理路整然としてない状態

no name
ここではフォルダのことをディレクトリと呼ぶことにします。
意味は同義と思っておいてもらえればとりあえずは問題ないです。
これらのファイルがサーバ上にあると考えて、トップページである「index.html」の他に2つのHTMLファイル、そして1つのCSSファイル、あと6つの画像ファイルが同じ階層に並んでいます。
今のこの状態というのはかなりファイル数の少ないホームページと言えますが、実際にはもっとファイルの種類も数も増えますので、その場合にディレクトリを使うことで構成をもっと理路整然とした階層による構造にする必要があります。
no name
そうしなければならない理由があるの?
no name
厳密に言えばこれでも問題なく表示することは可能ですが、一方でSEO対策(検索エンジからの評価が上がる)にもなります。
また、サーバに上げたこれらのファイルを1人で管理すると考えれば気にする必要はありませんが、複数人で管理するとなれば、やはり分かりやすい構造であるべきですよね。
さらに言えば、これは今後の話になってしまいますが、WordPressなどのCMSで構築する場合は、もっと深い階層になっていますので、この「階層構造」を理解できてないといけません。
ということで、ここでは2つの新たなディレクトリを作り、そこにCSSファイルと画像ファイルをそれぞれ分けて入れてみたいと思います。

ディレクトリを使って理路整然としているホームページ構造

no name
こうすることで、ファイルの種類ごとにディレクトリにまとめられ、とてもすっきりとした分かりやすい構造になるというわけです。
ちなみに決まりはありませんが、CSSディレクトリのディレクトリ名は「css」、画像ディレクトリのディレクトリ名は「images」とするのが一般的です。
また、HTMLファイルがもっと増えてくれば「index.html」以外をディレクトリに入れて1つ下の階層にした方が良いですね。
例えば「osusume.html」というHTMLファイルについて説明すると、まず今の階層(同じ場所)に「osusume」というディレクトリを作り、このディレクトリに「osusume.html」を入れて、ファイル名を「index.html」に変えます。
そうすることでとても分かりやすい構造になります。
no name
その「index.html」っていうのは、このファイル名じゃないといけないとか、何か決まりでもあるの?
no name
特にそういうわけではないですが、その階層の中でもし「index.html」というファイルがある場合は、そのファイルを表示するという仕組みになってるんです。
no name
じゃあさ、逆にその階層に「index.html」がない場合は?
no name
その場合、よく見たことがあると思いますが「404 Not Found」(ページが見つかりません)というエラーが出ます。
具体的に説明すると、ジョージさんが「http://oizo.jp」にアクセスしたとしますよね?
すると、実際には「https://oizo.jp/index.html」を表示しているんです。
なので、「https://oizo.jp/index.html」にアクセスしても同じことなんです。
ですがもしルートディレクトリ(一番上の階層)に「index.html」がなかった場合、「http://oizo.jp」にアクセスしても「404 Not Found」エラーになってしまいます。
no name
なるほど。
とにかく、ディレクトリを作って、CSSなら「css」というディレクトリに、画像なら「images」というディレクトリに入れて、トップページ以外のHTMLもディレクトリにした方がいいってことだよね。
この解釈で合ってる?
no name
はい、バッチリです!
では次回はこの流れで「相対パス」についての説明をしていきますので、引き続きよろしくお願いします!

ところで話は少しそれますが、ファイルとフォルダに関しては以前「ファイルとフォルダの関係、パソコンの整理整頓」で詳しく書いていますので、もしよかったら併せて読んで頂ければと思います。

0
に投稿 3件のコメント

ファイルとフォルダの関係、パソコンの整理整頓

ファイルとフォルダの関係、パソコンの整理整頓

ファイルはフォルダでまとめましょう

こんにちは、ホームページ制作のオイゾウです!
パソコンを使い始めると、様々な種類のファイルがどんどん増えていきます。
ある程度ファイルが溜まってきたところで、それをフォルダにしまって整理整頓するわけですが、この「フォルダ」を上手く使えてない方がとても多く見受けられますので、今回は改めてこの「ファイル」と「フォルダ」の関係、そして整理整頓のコツを書きます。

ファイルとは

データの基本単位であり、そのまとまりのことです。
ファイルには様々な種類があり、その種類ごとに決まった拡張子が付きます。
詳しくは「パソコンを使うなら必ず知っておくべき「拡張子」とは?」をご参照ください。

フォルダとは

ファイルを分類したり整理したりするための保管場所。
物理的なもので例えれば、紙の書類をまとめるバインダーのようなものです。

先日、こんなことがありました。
スタッフさんに仕事のお願いをしたのですが、内容は「カメラマンさんからもらった歌手Aさんのたくさんの写真データから使用写真をピックアップしたいので、候補となるファイルを5点に絞ってください」というものです。
そのデータは96点あり、スタッフさんは写真を1点ずつ見ながら、まずは20点近くの候補を選びました。
それらのファイルをデスクトップに置いたようです。
デスクトップはこのような状態になっていました。
デスクトップに選んだファイルを置いた状態
そこからさらに絞って5点に減らしてくれました。
デスクトップに置いたファイルを絞った状態
次の日、同じスタッフさんにさらに別の仕事をお願いしました。
今度も同じく写真データを選んでもらう仕事で、内容は様々な種類のフラワーアレンジの写真です。
するとデスクトップはこのようになりました。
さらにデスクトップに選んだファイルを無造作に置いた状態
壁紙が月から見た地球の写真だったのもあり、まるで星空のようにファイルをデスクトップに散りばめてくれました(笑)。

昨日選んだ写真も入り混じっていて、これではもはや何がなんだか分かりません。
このような仕事を毎日お願いし続けたら、このパソコンのデスクトップは一体どうなってしまうのでしょうか、逆に楽しみになってきます。
そうです、このスタッフさんは「フォルダ」の存在を知らなかったのです。
私が「内容ごとにフォルダを作り、ファイルをそれぞれのフォルダに保管すればとてもすっきりします!」とやり方を教えたら、こんなにすっきりしました!
フォルダに入れたらこんなにすっきり
フォルダの中身をファインダーで開くと、このようにそれぞれのファイルが収まっているのが分かります。
散らばったファイルをフォルダに入れて整理
そこで私はさらにこのスタッフさんにお願いをしました。
フラワーアレンジの写真はいろんな種類があるから、「バラ」「ひまわり」「チューリップ」「ハイビスカス」の4種類に分けてほしいと。
スタッフさんはこれらのフォルダを作り、見事に振り分けてくれました。
フォルダの中にさらにフォルダ
「バスケットアレンジの写真」というフォルダの中に、上記4種類のフォルダをさらに作り、それらのフォルダの中にファイルを入れたのです。
このようにフォルダの中にさらにフォルダがある状態を「階層」と言います。

こうやって上手くフォルダを活用すればパソコンの中身がとてもすっきりして、快適な作業環境を作ることができるのです。

タンスの引き出しに冬物と夏物を一緒には入れないですよね?
これと全く同じことで、きちんと整理整頓された状態を保って、快適なパソコンライフを実現してください!

パソコンの整理整頓術

最後に、フォルダを活用した整理整頓のコツをまとめましたので、是非参考にしてみてください。
※OSはMacを前提にしています。

「書類」に入れる

Macの場合、Dock(ドック)というショートカットメニューの一番左にある顔のアイコンがFinder(ファインダー)です。
ファインダーのロゴ
このファインダーがとても使いやすく便利なため、Macを使っているという人も多いです。
Windowsでいうエクスプローラーですね。
ファインダーのサイドバー(左側の列のメニューリスト)にはデフォルトで「書類」というフォルダが表示されています。
特別な理由がなければこの書類というフォルダにフォルダを作り、ファイルをどんどん入れていきましょう。

カラム表示がおすすめ

ファインダーの表示方法はアイコン表示、リスト表示、カラム表示、Cover Flowの4種類がありますが、個人的には断然カラム表示がおすすめです!
アイコン表示は文字通りアイコンを表示してくれるのですが、ファイル数が多いと探すのが大変で、画像ファイルなら画像のサムネイルが表示されるので多少はメリットもありますが、書類ファイルなんかだとアイコンを見ただけでは何がなんだか分かりません。
ファインダー:アイコン表示
リスト表示は、フォルダを有効活用している場合階層が分かりませんのでおすすめできません。
ファインダー:リスト表示
Cover Flowはパッと見はかっこいいのですが、画像ばかりのフォルダをプレビュー的に見たいとき限定で使うような感じでしょうか。
ファインダー:Cover Flow
Mac、Windowsともにアイコン表示にしている方も多いですが、合う合わないは別としてカラム表示(Windowsの場合は「詳細」が近いです)を試してみましょう!
ファインダー:カラム表示

デスクトップにファイルやフォルダを置かない

デスクトップに置くクセがついてしまうと、いつまでもまとめることができません。
置くとしてもせめて10個以内に収めて、それらのファイルやフォルダもなるべく早いタイミングで整理しましょう。

検索に頼りすぎない

個人的に、パソコン内のファイルを検索で探すのはあまりおすすめしません。
なぜかというと、これまでの経験から検索で見つけ出せなかったことも結構あったからです。
そのような状態のときはファイル名などを完全に忘れていることが多いので、なかなか引っかからないんですよね。
逆に検索をフル活用する前提で、多数のファイルをあまりフォルダ分けせずに上手く整理できている人もいますが、この方法はちゃんと1つ1つのファイルに名前を付けられるような几帳面さが必要ですので、かなりハードルは高く感じています。

年に数回は大掃除

自宅や職場もきれいにするのと同時に、パソコン内もしっかりときれいにしましょう!
せめて年に1回でも、やるのとやらないのとでは作業効率が大幅に変わってきます。
不要なファイルはどんどん捨てて、「不要だけどもしかしたらいつか必要になるかも」というファイルはフォルダにまとめて奥の方にしまい、使用頻度の高いファイルが見つけやすく、かつすぐに開ける場所にあると作業がとても捗ります!

次ページ⇒知らなきゃ絶対マズイ!圧縮・解凍の意味とやり方

0
に投稿 3件のコメント

パソコン初心者が最初に覚えるべき、基本のファイル形式

パソコン初心者が最初に覚えるべき、基本のファイル形式

重要なものをピックアップしました

こんにちは、ホームページ制作のオイゾウです!
前回の「JPEGだけじゃない!画像のファイル形式いろいろ」ではファイルの種類の中でも画像に関するものに限定して紹介しましたが、今回は画像以外で知っておきたいファイル形式をピックアップしました。
パソコンでどのような作業を行なうかによって必要になるファイル形式は変わってきますが、ここでは読んでくださっている方が「いずれホームページを自分で作るようになる」「最低限の事務処理は自分でやる」このような前提をもとに、基本的なものだけを厳選して紹介したいと思います!

.docx

マイクロソフト社のオフィスソフト「Word」(ワード)のファイル。
ワードは最も普及している文書作成(ワープロ)ソフトで、OSのWindowsと同じ会社ではありますが、Mac用のソフトもあり、OS関係なく使われています。
このソフトを使うことで、文書ベースの書類はほぼカバーできます。
文書以外にもハガキの宛名印刷やラベル印刷としてもよく使われています。

.xlsx

ワードと同じマイクロソフト社のオフィスソフト「EXCEL」(エクセル)のファイル、こちらもワード同様に有名ですよね。
主にデータを入力して、そのデータを集計したり分析したりできる表計算ソフトなのが、このエクセルです。
見積書や請求書などの文書として使えば便利ですし、それ以外にも住所録などデータをまとめるのにも最適。
このような一般的な操作方法の他にも、マクロ言語を搭載しているのでプログラムを組むこともできます。
ホームページを作る上で必ずしもオフィス系のソフトは必要ありませんが、パソコンを使うならワードとエクセルは使えた方がとても便利です。
ただMacでもWindowsでも基本的には別途ソフトを購入しなければなりません。

.mp3

とてもよく使われている音楽ファイルです。
音楽ファイルにもいろいろ種類があり、その中でもこのMP3は高い圧縮率によって、あまり音質を落とさないままデータのファイルサイズがかなり小さくなっています。
ただし非可逆圧縮のため、一度MP3で圧縮したファイルは元に戻せません。

.pdf

PDFはワードと同じく文書作成・閲覧ソフトです。
ワードと大きく違う点は、文書を作成したり編集することよりも、内容を変えない状態で閲覧するのにとても便利であるということが挙げられます。
また、ワードやエクセルは有料のソフトを購入してパソコンにインストールしなければ作成・編集だけでなく閲覧もできませんが(補足:実際にはスマートフォンなどで閲覧のみ可能です)、PDFはWindowsでもMacでも標準で付いているソフトで閲覧が可能です。

.html

HMTLはハイパーテキストマークアップランゲージの略で、ウェブページを作成するための言語ファイルです。
インターネットで見る様々なページは主にこのHTMLファイルになります。
このHTMLに関連してCSS(拡張子は.css)という言語ファイルがありますが、これはHTMLなどの文書スタイルを指定するもので、例えば文字の色や大きさ、文書や画像などの配置をこのCSSによってレイアウトすることが可能になります。
ホームページを作る上でこのHTMLとCSSの知識は必須となりますので、是非覚えましょう!

.zip

ZIPファイルは「ジップ」と読みます。
いくつかあるファイル圧縮形式の1つで、他にもSITやLZHなどありますが、このZIPが現在はもっとも普及しています。
複数のファイルを1つのフォルダにまとめ、そのフォルダを圧縮することで、このフォルダが1つのファイルになります。
そしてその圧縮されたファイルを元に戻したいときは、それを解凍すれば1つのフォルダに複数のファイルが入った状態に戻すことができます。
この「圧縮」と「解凍」は様々な場面で今後使うことになりますのぜ、是非覚えてくださいね。
以前は圧縮・解凍ともに専用のソフトをパソコンにインストールして使っていましたが、現在はどのパソコンでもソフトが入っていますので、圧縮・解凍ともにとても簡単に行なえます。
Macの場合、右クリック→"◯◯◯◯"を圧縮、これだけで圧縮できますし、解凍したいときは圧縮ファイルをダブルクリックするだけでOKです。

他によく使うファイル形式

他にももちろんたくさんの種類のファイル形式があります。
ちなみにホームページを制作したり、その他ウェブ関係のサービスの業務を日々行なっている私がよく使っているファイルを思いつくものだけ挙げると、

.rtf

テキストファイル。
Macに標準で付いているメモ帳のようなアプリケーション「テキストエディット」などで利用しています。

.psd

Adobe(アドビ)社のPhotoshop(フォトショップ)という画像加工のアプリケーションで使う画像ファイル形式。
バナー広告の作成や写真画像の編集は、このPSDファイルで行なっています。
個人的に、Photoshopは数あるアプリケーションの中でも最も使用頻度が高いです。

.ai

PSDと同じくAdobe社のIllustratorで作成・編集した画像ファイル形式。
ロゴやアイコンなどの素材はこのAIファイルで作成し、画像ファイル形式の1つであるPNGファイルなどで保存して使っています。
また、企業案内のパンフレットやチラシ、名刺などの印刷物もこのAI(もしくはEPSファイル)でレイアウトを組み、印刷業者さんに入稿します。

.wav

音声ファイルの1つで、個人的に趣味で聞く音楽は圧縮ファイルであるMP3が多いですが、販売用の音楽CDに使う音源はこのWAVファイルをマスターデータとしてCDプレス業者さんに納品しています。

.ppt

ワードやエクセルと同じくマイクロソフト社のオフィスソフトの1つPowerPoint(パワーポイント)のファイル形式。
このパワーポイントは企画書やプレゼン資料の定番アプリケーションです。

.app

アプリケーションを実行するファイル形式。
Windowsの場合は.exeですが、Macの場合は.appになります。

.mov

いろいろとある動画のファイル形式の1つ。
主に動画の再生をするためのQuickTime Player(クイックタイムプレーヤー)で再生できる動画ファイルですが、歌手のプロモーションビデオやその他様々な映像をYouTubeをはじめとするウェブで公開する際には、このMOV形式にすることが多いです。

いかがでしたでしょうか?
このように、パソコンが1台あれば専門的な知識がそれほどなくても実に様々なことができるようになるんです。
最近はスマートフォンの普及によって若い世代でパソコンが必要なくなっているみたいですが、技術の進化とともにパソコンとスマートフォンとの境目がどんどんなくなってきているとは言え、やはりパソコンじゃないとできないこともたくさんありますので、是非スマートフォンで満足せず、パソコンをフル活用していろんなファイル形式に触れてください!

次ページ⇒ブラインドタッチができれば文章を書くのが楽しくなる!

0
に投稿 4件のコメント

JPEGだけじゃない!画像のファイル形式いろいろ

JPEGだけじゃない!画像のファイル形式いろいろ

用途に合わせて使い分ける

こんにちは、ホームページ制作のオイゾウです!
これからパソコン使いこなしていく上で「拡張子」を理解する必要性は前回の記事「パソコンを使うなら必ず知っておくべき「拡張子」とは?」で説明しました。
では、今後自身のホームページを作る上で特に必要なものは何でしょうか?
ホームページに載せるコンテンツ(情報)は主に「文章」と「画像」になります。
詳しい内容はおいといて、文章はHTMLというウェブに文書などを記述するためのファイル(拡張子は.html)に書き、CSSという、HTMLファイルに装飾するファイル(拡張子は.css)で書体や文字サイズ、行間などを指定します。
その辺りの内容に関するお話はもっと後になりますので、まずは画像ファイルの種類を是非覚えましょう!

JPEG(ジェーペグ)は聞いたことありますか?

馴染みのあるところで、デジカメや携帯電話、スマートフォンで撮影した写真は基本的にJPEGです。

それなら、画像は全てJPEGでいいのでは?

確かに、他のいろいろな種類のファイル形式を覚えるよりも、全てJPGで統一した方が楽かもしれませんね。
ですがJPEGにはJPEGの良さがあり、他の例えばPNGやGIFにも良さがありますので、これからホームページを作っていくのであれば最低限これらのファイル形式を知っておいて、適材適所で使い分けていく必要があります。
そこで今回「ウェブで表示する画像のファイル形式トップ3」を、それぞれの特徴や違いを紹介しつつ発表します!
※順番=順位ではありませんのでご了承ください。

拡張子:.jpg

読み方:ジェイペグ
JPEGはジョイント・フォトグラフィック・エキスパーツ・グループの略。
スマートフォンやデジカメなどで撮影した写真のファイルはデフォルトではこの.jpg形式になっていることがほとんど。
写真のファイルをウェブで使用したいときは.jpgにしましょう。
圧縮率を細かく調整できるので、ファイルサイズを軽くしたいときは圧縮率を高くしましょう。
.jpgは不可逆圧縮画像なので、メリットはファイルサイズを小さくできますが、デメリットとしては一度圧縮(保存)してしまったら戻せません。
単に画像を開いたりするだけでは圧縮はされませんのでご安心を。
あくまで保存したときの話です。

メリット

  • 色数が多い(約1,677万色)ので、写真に向いている

デメリット

  • 不可逆圧縮のため一度圧縮すると元に戻せない

ほぼ見た目は変わらず、ファイルサイズを約1/3まで小さくできました。

拡張子:.png

読み方:ピング
PNGはポータブル・ネットワーク・グラフィックスの略。
8ビットと24ビットがありますが、それぞれに違いがあり、PNGの使い道を考えると24ビットを使うことになります。
8ビットの.pngはこの後で説明する.gifと同じ256色ですが、24ビットになるとフルカラーになり、なおかつ透過処理が可能になります。
この「透過処理」がとても重要です!
写真などのように色数が多い場合.pngだとファイルサイズが大きくなってしまいますので.jpgがベストです。
ただ.pngは.jpgと違って可逆圧縮画像なので、圧縮によってデータが捨てられることがなく、また色数が写真のように多くないイラストや、透過を使用したい場合にとても便利です。

メリット

  • 透過処理ができる
  • 写真以外の画像ではかなりファイルサイズを小さくできる

デメリット

  • 写真を.png形式で保存するとファイルサイズが.jpgと比べてかなり大きくなる

ほぼ見た目は変わらず、.pngのファイルサイズは.jpgの約半分ほどに!

透過しているかどうかが分かるように、背景に色を入れてあります。

拡張子:.gif

読み方:ジフ
GIFはグラフィックス・インターチェンジ・フォーマットの略。
.gifには大きな特徴が2つあります。
1つは、扱える色数が最大256色までなので写真には向いてないが、イラストや文字などを画像で使いたいときにファイルサイズを小さくできて便利であるということ、もう1つはパラパラ漫画のようにアニメーションとして使えるということ。
ECサイトでのバナー広告や、数秒おきに表示されている画像が切り替わるウェブのディスプレイ広告でもよく用いられています。
ただし前述の通り色数が少なく、写真の画像をアニメーションで表現するとかなり粗い画像になってしまうため、注意が必要です。

メリット

  • アニメーションができる
  • .png同様に透過処理ができる
  • ファイルサイズが小さい(軽い)

デメリット

  • 色数が少ないので写真には向かない
.gifファイルの例・こんな感じのアニメーションが作れます!
アニメーションGIF
pngsample5.gif

こんな感じのアニメーションが作れます!
ちなみに数年前まではFlash(フラッシュ)というグラフィック映像コンテンツを使って高度なムービーをウェブ上で表現することが多かったのですが、スマートフォンが普及し、スマートフォンの中でも特に利用者の多いiPhoneがこのFlashをサポートしなかった(=閲覧できない)ため、現在はほとんど使われなくなりました。

まとめると

.jpg

写真で使う

.png

写真以外の画像(ロゴなど)はほぼ.pngでOK

.gif

アニメーションを使うとき(バナー広告など)

一概には言えませんが、ほぼこの通りに使い分ければ問題なしです!
他にも画像に関するファイル形式はいくつかありますが、ウェブで表示するための画像ファイルはこの3つを覚えておけば間違いありませんので、是非ともそれぞれの使い道を含めて覚えてくださいね!

次ページ⇒パソコン初心者が最初に覚えるべき、基本のファイル形式

0
に投稿 4件のコメント

パソコンを使うなら必ず知っておくべき「拡張子」とは?

パソコンを使うなら必ず知っておくべき「拡張子」とは?

拡張子=ファイル形式

こんにちは、ホームページ制作のオイゾウです!
パソコンで何をするにしても必ず知っておかなければならないのが「拡張子(かくちょうし)」。
この拡張子をしっかりと理解した上で、パソコンを使いホームページを作っていきましょう。

拡張子(かくちょうし、英語: filename extension)とは、ファイルの種類を識別するためにファイルの名前(ファイル名)の末尾につけられる文字列。
引用元:ウィキペディア

これだけでは何のことか分からないので、具体的に説明していきます。
「末尾につけられる文字列」は「.(ドット)+英数字3〜4文字」になります。
代表的な拡張子の例を挙げると

  • .jpg
  • .png
  • .gif
  • .docx
  • .xlsx
  • .mp3
  • .pdf
  • .zip

これらは頻出しますので、パソコンを少しでも触ったことがあれば見たこともあるのではないでしょうか?
ちなみにファイルの種類のことを通常は「ファイル形式」と呼びます。
では次に、これらの拡張子がどのような「ファイルの種類」であるかを説明します。

.jpg
画像のファイル
.png
画像のファイル
.gif
画像のファイル
.docx
「Word」(ワード)で作成された文書のファイル
.xlsx
「Excel」(エクセル)で作成された表計算のファイル
.mp3
音楽のファイル
.pdf
文書のファイル
.zip
圧縮されたファイル

このように、それぞれの拡張子によって、ファイルの種類を識別しています。
つまり

任意の文字列+拡張子=ファイル名

となります。
「任意の文字列」は文字通りですので、ご自身が作成したファイルであればご自身で好きなように名前を付けることができます。
例えば、Wordで契約書を作成したら、ファイル名を「contract160306.doc」このように名付けます。

ファイル名で注意するポイント

なるべく日本語ではなく半角英数字にする

日本語のファイル名は文字化けの原因になります。
Windows⇒Macという風にOS間で互換性がなく、メールなどで送ると意味不明な文字列のファイル名になってしまいますので、「契約書.doc」ではなく「keiyakusho.doc」や「contract.doc」といったようなファイル名が望ましいです。

記号を使わない

「.(ドット)」や「/(スラッシュ)」、「?(クエスチョン)」これらの記号は場合によっては別の意味としてコンピュータに認識されてしまうことがありますので、「使わない!」と覚えておいてください。
またファイル名に空白(スペース)を入れるのも望ましくありません。
でもファイル名を「companycontract.doc」としたい場合、「company」と「contract」という2つの単語があったりすると、何か記号を入れて区切りたくなりますよね。
そういうときは「_(アンダーバー)」を入れましょう!
アンダーバーを入れると「company_contract.doc」となって、とても読みやすくなります。

まとめると

  • 拡張子とは画像や文書などファイルの種類を識別するもので、必ずファイルには拡張子がある
  • ファイル名(拡張子の前部分)は好きな名前を付けられるが、英数字か_(アンダーバー)を使うべき

次回からは様々なファイルの種類(ファイル形式)について詳しく説明していきます。

次ページ⇒JPEGだけじゃない!画像のファイル形式いろいろ

0