スタッフブログ

menu

【コーディング用語集】ディレクトリマップ

2020年7月30日

ディレクトリマップとは、Webサイトの全てのページのURLとタイトルがまとめられている一覧表のことです。

↓弊社が用意しているシートの記入例です。

【コーディング用語集】チャットボット

2020年7月29日: チャットボット（chatbot）とは、「チャット」する「ボット(ロボット)」を組み合わせた言葉で、
「自動会話プログラム」のこと。
想定される問い合わせ内容を登録し、入力されたテキストや音声に対して自動的に回答してくれます。
最近では多くの企業がWebサイトにチャットボットを実装し、問い合わせ業務の効率化などを行っています。

【今日の一枚 Instagram】傘の形のヘアゴムセット

2020年7月28日

雑貨イラストシリーズ、本日はヘアゴムセットです。
傘の形をしたケースに入ってて可愛いですね。
↓イラストをクリックしてインスタも覗いてみてください。

イラストだけではなく写真も素敵に撮れています☆

【コーディング用語集】マージン

2020年7月27日: Web制作においてマージン(margin)とは、「余白」を意味します。ただWebページについての余白には2種類あり、
マージンは対象を基準にして外側の余白を指します。対象を基準にして内側の余白のことはpadding（パディング）といいます。

相対パスと絶対パスについて

2020年7月27日

まず始めに「パス」とは？
「パス」とは、簡単に言うとファイルやディレクトリが置いてある住所のことです。
一般的に「パス」は、ファイルやディレクトリの場所を指します。「パス」の英語表記は「path」で、直訳すると「道」という意味になります。

相対パスについて
相対パスは、「現在の場所」を基準として、ファイルやフォルダの場所を伝える方法です。そのため、相対パスはファイルやディレクトリを置く場所によって内容が異なってきます。

Windowsを例にすると、「C:\ProgramData\ABCsoft」は、Cドライブの中の「ProgramData」フォルダの中の「ABCsoft」フォルダを指します。住所と同じで、一番始めに書く部分が一番大きな枠組みになります。

上記の「ABCsoft」フォルダの中に「sample.txt」があるとします。この場合の相対パスの書き方を見ていきましょう。
書き方は3通りあります。

・現在の場所はCドライブにいます。そこから「ProgramData」の中にある「ABCsoft」の中の「sample.txt」
./ProgramData/ABCsoft/sample.txt
・現在の場所は「ProgramData」にいます。そこから「ABCsoft」の中にある「sample.txt」
./ABCsoft/sample.txt
・現在の場所は「ABCsoft」にいます。その中にある「sample.txt」
./sample.txt

お分かりいただけたでしょうか？
このように「現在の場所」を基準として、パスの内容が異なるのが相対パスになります。

絶対パスについて
絶対パスは、相対パスと異なり「現在の場所」は関係ありません。どこを参照していても、記載するパスの内容は同じになります。

Windowsを例に、「C:\ProgramData\ABCsoft\sample.txt」について見ていきましょう。
現在の場所が「ProgramData」でも、「ABCsoft」でも「sample.txt」の絶対パスは「C:\ProgramData\ABCsoft\sample.txt」になります。

ご覧のように「絶対パス」はファイルやディレクトリの場所を一番最初から説明した「完全な住所を伝えるもの」という点がポイントです。少々ややこしいですが、「絶対パス」と「相対パス」をセットで考えるようにして下さいね。

【コーディング用語集】レティナ対応

2020年7月23日: Retina(レティナ)はApple社の高精細ディスプレイの名称です。
非Retinaディスプレイでは普通に表示されていた画像が、Retinaディスプレイではぼやけて見えることがあります。
Retina対応は制作する際に使用する画像を縦横2倍で作成するなどし、ぼやけないように対策することを指します。

【コーディング用語集】カラム

2020年7月22日: Web制作においてのカラム (column)とは、Webサイトのレイアウトについて指します。
「列」という意味でページのレイアウトが何列で構成されているかを1カラム、2カラム…と表現します。

【今日の一枚 Instagram】中華な飾り

2020年7月21日: 雑貨イラストシリーズ、本日は中華な飾りです。
ふとキョンシーを思い出しました！ご存じですか？
↓イラストをクリックしチャイナ☆　そしてインスタも覗いてみてください。

【コーディング用語集】アスペクト比

2020年7月20日: アスペクト比（aspect ratio）とは、画面や画像の縦と横の辺の比率を表します。
代表的なアスペクト比は、スクエア(1：1) Instagramなどスマホが普及して増えてきた比率、
ワイド(16:9) ジタルテレビ等で使われておりYouTubeの標準にもなっている比率、
スタンダード(4:3) 主にアナログテレビやPCのディスプレイ等で使われている比率などがある。

拡張子について(JPG、GIF、PNG、SVG)

2020年7月20日

今回は、画像ファイルの拡張子である「JPG、GIF、PNG、SVG」についてご紹介します。

■JPG

Webサイトでは「容量の大きい画像ファイル」よりも「容量の軽い画像ファイル」の方が好まれるため、JPGで保存した画像を使用することが多いです。

・「JPG」と「JPEG」に違いはあるの？
「JPG」と「JPEG」に違いはありません。
Windows 95 が販売される以前に Microsoft社が販売していた「MS-DOS」というOSでは、
拡張子を3文字しか扱うことが出来なかったため「.jpeg」が「.jpg」に短縮されました。
拡張子は異なりますが内容に違いはないため、どちらを使用しても問題ありません。

■GIF

GIFは256色まで扱うことができ、ロゴやアイコンなど、簡単なイラストの保存に適した画像ファイルです。透過処理を行うことが出来ます。また、GIFはアニメーションを作成できるため、画面にちょっとした動きを出したり、動くバナーを作ることが出来ます。

■PNG

・PNGの開発背景
GIFのデータ圧縮方法に特許権があったため、
一時期、GIFは一般の使用者に対して特許使用料が発生する事態が懸念されていました。
そのため、PNGはライセンスフリーで使用できるGIFの代用として開発された経緯があります。
現在は、GIFの特許権が失効しているため、誰でも自由にGIFを使用することができます。

■SVG

SVGは、ロゴやアイコン、図形などの表示に向いていますが、さまざまな色を表現する写真のような画像には向いていません。写真は多くの色を使用しているため、SVGで表現しようとすると計算に時間が掛かり、Webサイトの動作がとても重くなってしまいます。そのため、複雑な画像の表示はJPGなど、他のフォーマットを使用するようにしましょう。

また、SVGはテキストデータとして使用することも出来ます。HTMLファイルに、SVGタグで色や形を指定して画像を描画することが可能です。もちろん、他の画像ファイルと同様に、HTMLファイルに<img src=”img.svg”>と、埋め込んで使用することも出来ます。SVGは奥の深い拡張子なので、興味がありましたら是非調べてみてくださいね。