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

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

印刷物として印刷会社にデータを提出する必要がある場合、文字のアウトライン化が必要。
理由は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名を付ける際は、あとから見た時に「どこのなに?」がわかるかどうかを想像したうえで決定してみてくださいね。

それではまた!

キャッシュ

本日は、「キャッシュ」について。
こんにちは、見習いWEBディレクターのTです。

この業界に入るまで、キャッシュと言えば「現金」一択だった私にとって、サイト制作においてこんなにも「キャッシュ」というワードを聞くことになるとは思っていませんでした。

Web業界におけるキャッシュの意味とは、ブラウザが一時的に記憶しているホームページデータのこと。
つまり、ブラウザで1回表示したことのあるWebサイトはデータを記憶しておくことで、再アクセスしたときに情報をすぐに取り出せるようにしておけるのです。
こうしておけば、表示させるまでの時間を大幅に短くしてくれます。

とても便利な機能ですが、サイトを修正する仕事においては、少しやっかいです。
キャッシュ残りといって、更新したはずのページにアクセスしても、更新前と同じ表示になってしまうことがあります。

そんなときは、「F5」でリロード、あるいは「Ctrl+F5」で強制リロードをすることで解決します。

実践練習!するには?

本日は、「実践練習!するには?」について。
こんにちは、見習いWEBディレクターのTです。

コーデイングを習得しようとすると、まずはネットにあるコーディングの勉強サイトで学びます。

たくさん聞いてたくさん打ち込んでみて、なんとなくわかった気がする!のですが、これで本当にサイトが作れるのかと言われると、全然自信ないですよね。

そこで実践練習です。

実践練習とは、イケてるサイトを見つけて、そのサイトの模写コーディングをしてみることです。
最初はあまり難易度の高くないものを選び、検証ツールは見ないで同じものを作ってみます。
最後に、検証ツールで答え合わせをしましょう。

これをすることで、コーディングに慣れていくことはもちろん、
・きれいなコーディング
・良いデザイン
・知らなかったメソッド
なども身につけることができるかもしれません。

受け身の勉強をしたあとは、実践練習でどんどん自分のものにしていきましょう!