【イラストレーター】文字のアウトライン化

イラストレーターで作ったデザインを出力するとき。

印刷物として印刷会社にデータを提出する必要がある場合、文字のアウトライン化が必要。
理由は2つ。
・使ったフォントが相手のPCで有効かどうかわからず、意図したデザインと異なってしまう可能性がある
・フォントが変わることで、レイアウトも崩れてしまう可能性がある

ただし、アウトライン化をすると文字としての情報は失われるため、バックアップを取り、別名でアウトライン化用のファイルを保存したうえでアウトライン化することを忘れない。
※文字としての情報が失われる=あとで編集ができなくなるため。

アウトライン化する方法は、該当するテキストを選択ツールで選択し、右プロパティから「アウトラインを作成」をクリックする。

コーディングとプログラミングの違い

先日、プログラミングを勉強されている専門学生さんとお話する機会がありました。

会社でコーディングを主に担当していただく人を採用したいと思っていたので、「コーディングは好きですか?」と質問したところ、「???」となってしまいました。

そこで、「プログラミングは好きですか?」と言い直したところ、「はい」という答えが返ってきました。

コーディングとは、【プログラミング/コンピュータ言語を使ってソースコードを作成すること】で、主に【HTML】【CSS】【PHP】【JavaScript】などのこと。
プログラミングとは、【プログラムを作成する作業全般】で、この中にはコーディングも含まれています。

つまり、コーディングはプログラミングの作業の一部なのですね。

検証ツールの使い方

本日は、「検証ツールの使い方」について。
こんにちは、見習いWEBディレクターのTです。

ウェブ制作をしていると、現在表示しているページのHTML、CSSやJavaScriptを確認することがよくあります。
また、何かがおかしいときにどこがおかしいのか調べることもあります。
そこで欠かせないのが、この「検証ツール」です。

Google Chromeの場合:
検証ツールを使用するには、表示されているページを右クリックして「検証」をクリックします。
もしくは、F12を押しても表示させることができます。

検証ツールでは実際に編集し、それがどのように表示されるのかも確認することができます。
(リロードすると元に戻りますので注意。)
また、タブレットとスマホが重なったようなアイコンを押すと、レスポンシブの確認もすることができます。
スマホでページがどのように表示されるかの確認は、日常の校正やチェック時に欠かせません。

それではまた!

プルダウンメニューを実装

本日は、「プルダウンメニューを実装」について。
こんにちは、見習いWEBディレクターのTです。

コンタクトフォームなどでよく使われるプルダウンメニューのつくりかた。

selectタグとoptionタグを使います。

よく使うので覚えておきたいですね。

それではまた!

classの命名規則

本日は、「classの命名規則」について。
こんにちは、見習いWEBディレクターのTです。

いつもclass名をどうするか悩みませんか?
パッと決められたら便利だな、と思い調べてみました。

命名する時の主なポイントは以下のようです。

・そのclass名を見ればどこの何を指しているかがわかる
・ある程度の規則性を持たせる

まずは、そのclass名を見ればどこの何を指しているかがわかるについて。
一番わかりやすいのは場所で名前を分けることです。
headerならheaderから始め、そのあとに-(ハイフン)や_(アンダースコア)でheader内の要素をつないでいきます。

つぎに、ある程度の規則性を持たせるについて。
パーツ名をclass名としてつけます。たとえば、写真であれば〇〇-img、ボタンであれば〇〇-btnなど。

命名時の注意点
・複数の単語を組み合わせるときは-(ハイフン)や_(アンダースコア)でつなぐ
※スペースを空けると2つのclass名として認識されてしまいます

・数字からは始めない
アルファベットのあとに数字をいれるのは問題ありません。

・ローマ字は使用せず、英単語で付ける

class名を付ける際は、あとから見た時に「どこのなに?」がわかるかどうかを想像したうえで決定してみてくださいね。

それではまた!