Author: Caterina

1

Google Fontsの使い方【2018年版】

2月もあっという間に折り返してしまい、え?え?うそ。。。となっているカテリーナです! Buongiorno! 今日は以前、読者さんのシノハラさんより質問を受けていた「グーグルフォントの使い方」についてザザーっと解説してみたいと思います。 上の無意味なスライド画像なんですが、なんとなくそこにいてもらいたいので動作が重くなろうが入れさせてもらいます。すみません! 1.使いたいフォントを決める とりあえず説明するのが面倒くさいので、シノハラさんは、HTMLやCSS、Google Fontsが何であるかはご存じである!という前提で始めたいと思います。ええ。   まずはGoogle Fontsに飛び、どのフォントを使うか決めます。 何せ800種類以上のフォントがひしめき合っていますので、これだけあると「どれをつっかおうかな~♪」とか迷うかと思いきや、自分の気に入っているフォントを毎回使ってしまうという馬鹿の一つ覚え状態。。。 2018年はもう少し冒険したいと思います。 今回シノハラさんにはわたしの馬鹿の一つ覚え状態の「Montserrat」と「Lobster」の2つのフォントを使っていただきましょうか(笑)。 こんな感じで選びます。   この要領で「Lobster」フォントも選んじゃいましょう。 その後、こういう画面を出します。 選んだ2つのフォントが並んで見えますね?   ここで、次の段階に進みます。 2.Google FontsのAPIをHTMLに埋め込む 字が小さくて少し見にくいので、下に大きく書いておきます。 <link href=”https://fonts.googleapis.com/css?family=Lobster|Montserrat” rel=”stylesheet”> これをHTMLコードのHEADタグの中に下のように入れます。 <!DOCTYPE html><html> <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta name=”viewport” content=”width=device-width, initial-scale=1″> <meta name=”author”...

Best Resources for Web Design and Development 0

Webサイト作成時によく使うサイト&サービス:Webデザインに役立つサイト編

どうも~ 火曜になってもやる気ゼロなカテリーナです!Buongiorno! 今回も昨日の続き「カテリーナがWebサイトを作っていて頻繁にお世話になるサイト&サービスのリスト」をご紹介します。   やはり自分用のリストなんですが(笑)。     今日はWebデザインをする上でカテリーナがよく使っているサイトの中でも 「アイコン」「画像作成アプリ」「ワイヤーフレーム」「プレースホルダー」「デザイン・アイディア」のカテゴリーをご紹介します。   ※ 基本的に全てのサイトは英語です。日本語の場合は注記します。 素材編Webデザインに役立つサイト コーディングに役立つサイトその他お役立ちサービス WEBサイトを作るときにお世話になっている便利なサイトリスト Webデザインに役立つサイト編 アイコン Font Awesome: ここはデザイナーから絶大な支持を誇るサイトだと思うんですが。バージョン5からSVGアイコンが出てきました。 iconmonstr:  Iconをダウンロードする方法と、Icon Fontとして使う方法があるんですが、わたしは後者です。正直言うとFont Awesomeしか使ってないです。 Ionicons: ここは最近見つけたんでまだ使ったことが無いんですけど、CDNがポーンと置いてあってアイコンが羅列してあるだけなので、ある程度慣れた人向けでしょう。すっきりしたアイコンなので、使いやすそうです。 Icon Works: こちらも慣れた人向けだと思います。ただ使い方が説明してあるページがあるので、それに従えば大丈夫だと思います。 色々アイコンのサイトはチェックしているんですけど、やっぱりFont Awesomeに出戻ってしまいます。 何と言っても使いやすいんですよねー 画像作成アプリ Photoscape X: オープンソースの画像作成・編集アプリなので当然タダです。でもかなり使いやすく、インターフェースもなかなかなので、手っ取り早く画像を何とかしたい人にはおすすめです。何かの嫌がらせなのか、ブックマーク出来ない設定がしてあるので、こうしてリストにぶち込んでやりますっ!! Tux Paint: めちゃめちゃ子供向けです!!!でも何か気に入っています(笑)。こちらもオープンソースなので当然タダです。 GIMP: こちらは非常に有名なアプリですが、やはりオープンソースなのでタダ。機能もとても充実しています。 Adobe...

Best Resources for Web Design and Development 4

Webサイトを作成時によくお世話になるサイト&サービス:素材編

どうも~ 恒例の月曜やる気ゼロなカテリーナです!Buongiorno! 今回は「カテリーナがWebサイトを作っていて頻繁にお世話になるサイト&サービスのリスト」をご紹介します。   ぶっちゃけ自分用のリストなんですが(笑)。   あんだけしょっちゅう使うのに、何故かブックマークもせず使うたびに検索してるサービスもあったりして何やってんだわたし、みたいな。 とにかく一同に全てのリソースが集まっていると結構便利なんですよね。 かなり長いリストなので、画像も何も入れないシンプルなものにし、かつ「素材編」「Webデザインに役立つサイト編」「コーディングに役立つサイト編」「その他お役立ちサービス編」の4回に分けます。 前もってお断りしておきますが、ほとんど全てのサイトは英語です。日本語の場合は注記します。 素材編Webデザインに役立つサイト コーディングに役立つサイトその他お役立ちサービス WEBサイトを作るときにお世話になっている便利なサイトリスト 素材編 フォント Google Fonts: これはもうCSSのスタイリングなどでは必須というか。約800種類のフォントがあるので色々と遊べます。 Creative Blog: Webデザイナーだけでなく、グラフィック、DTPデザイナーなど全てのデザイナーにとって使える無料フォントのリスト。結構更新されてます。 Font Pair: Google Fontsから「こんなフォントの組み合わせはどう?」と提案してくれるサイト。 色々デザインしていると、お決まりのフォントの組み合わせばかり使うようになってくるので、こういう提案型サイトは刺激をもらえるというか。 Google Web Fonts Inspiration: ここもGoogle Fontsのペアリング提案サイトなんですが、何と言っても見ているだけで美しいサイトです。 Typogui.de: タイポグラフィの基本がここを読めば分かります。 Font Reach: ネット上に実際に公開されているサイトで、どのフォントがどの位使われているのかを表示するサイト。ここを見ると、どのフォントが今のトレンドなのかが一目瞭然です。 WhatTheFont!: 手持ちの画像の中の文字が何のフォントか分からない時に、アップロードして検索が出来る非常に便利なサイト。 カラー Palettes |...

Direction 2

またまたブログの方向性を修正したい感じ

どうも~カテリーナです! 今日はちょっとご報告というか、お知らせがあります。 またまたブログの方向性に修正を入れたいなと思っています。 わたしが先頭に立って「ついて来いよッ!」とか言いながら既存のレールを外れる生き方をみんなに啓蒙したいわけじゃないということに気付いたんですよ、ええ。 既にBlack Sheepな人たちと出会い繋がりたい Black Sheepな人たち同士で何か面白い交流やコラボが出来たら楽しいかも ブログを書いているうちに、こういう事がやりたいなと思うようになって来ました。 ブログ初心者だし、マーケティングのやり方もよく分からないんで一体何をどうしていけば自分がやってみたい事が実現出来るのか分からないんですが、ゴチャゴチャ言う前に今出来ることをやっていく。ということで とにかく記事をアップし続けて、やりながら考えていきたいと思っています。 というわけで、世界中に散らばるBlack Sheepさん達、夜露死苦

Espresso 0

イタリア人と友達になる方法+自由なイタリア人続き

今日はちょっとだけ晴れていてこれからスーパームーンが顔を見せてくれるかな?というロンドンからBuongiorno!   上の写真は今はなきMrs Merango’sというお店なんですが、こじんまりとしたすっごくお洒落なスペースで大好きでした。ていうかお兄さんの顔が怖い!   ところで先日、イタリア人の生態第2弾をお届けした後に、イタリア人が面白すぎる。イタリア人と友達になりたい。どうしたらいいのか?何かコツはありますか?というメッセージを頂いたのでちょっと考えてみたんですが。   そういえば歯医者キャンセル野郎の『待ち合わせ新型攻撃』が出たんで、今回はこちらのお話から始めたいと思います。そしてそれでもイタリア人と友達になりたいのか、熟考していただければと思います(冗談です)。 ※初めてお越しのあなたへ。歯医者キャンセル野郎とは何なのかはこちらのページをご参照ください。 イタリア人と会う予定をバッチリ立てるとこうなる。 また歯医者キャンセル野郎とちょっと飲みに行こうぜということになりまして。   度々起こる『気分が乗らない攻撃』や『待ち合わせ場所と時間がなかなか決まらない』がちょっとアレなキャンセル野郎ですが、   うちのイタリア人が 『あいつは優柔不断なだけだから、こっちから駅名と時間をバッチリ指定したら多分大丈夫』 って言い張るもんだから、じゃBank駅に3時集合って伝えておいたんですね。   我々は3時ちょうどにBank駅に到着。 そしたら10分経っても15分経っても来ないんですよ、歯医者が!   うちのイタリア人早速キャンセル野郎に電話。 『Dove sei?(お前どこにいんのよ?)』   (キャンセル野郎のいる場所何やらすっごく騒がしい) 『え?誰? うちのイタリア人? ちょっと周りがうるさくてよく聞こえないんだけど。 ああ今?Bank駅からちょっと歩いたところにあるパブで飲んでる』     パブで飲んでる?!!     まさにこういう☝☝心境だったんですけど(笑) イタリア人と会う予定をバッチリ立てるとこうなる その2...