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

    JPGは、1670万色以上を扱うことができ、写真や複雑なイラストなどの保存に適した画像ファイルです。
    JPGは、JPEG形式で画像を圧縮して保存するため、ファイルサイズは軽くなりますが、元の画像よりも画質が悪くなってしまうというデメリットがあります。

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

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

 

GIF

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

 

PNG

    PNGには「PNG8」、「PNG24」、「PNG32」の3種類があります。
    「PNG8」は256色を扱い、「PNG24」と「PNG32」は、1670万色以上を扱うことができます。「PNG24」と「PNG32」は、複雑な画像の保存に適していますが、ファイルサイズが大きくなるというデメリットがあります。また、PNGは透過処理を行うことも可能です。

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

 

SVG

    SVGはベクター形式により、画像を数値化して管理します。そのため、拡大や縮小を行った場合でも画像がぼやけることなく綺麗に描画される点が特徴で、レスポンシブWebデザインに適した画像ファイルとされています。

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

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

初めてのお客様はこちらからどうぞ

お見積りはこちらから

資料請求はこちらから

  

GAレポート

wordpress実装 初期費用0円 ワードプレス構築

下層ページデザインサービス

Coding Pack News Letter

コーディングパックのメールマガジン

お得な情報満載!

バックナンバーはこちら

最新納品実績

  • コーディング

    1P

    2020.07.28

    大学

  • コーディング

    1P

    2020.07.20

    ブランディングサイト

  • コーディング

    3P

    2020.07.16

    病院

  • コーディング

    1P

    2020.07.15

    都道府県サイト

  • WordPress

    4P

    2020.07.09

    介護施設

more

pagetop