glat_designのブックマーク - はてなブックマーク

WebフォントのCSS指定2014年度版とこれまでの歩み

比べる。 WEBCRE8.jpとその仲間達で、web制作における「選択」において最良だと思われるものを考察していくカテゴリです。最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない部分もあると思うんで何か指摘があったらがんがんツッコんでくださいw @font-faceルール @font-faceルールは、Webフォントの名称と読み込むフォントファイルを関連づける@ルールの一つです。その他、どのウェイトやスタイルに対応するかも指定できます。しかしWebフォントの扱いはブラウザ側のフォントファイルの対応状況、フォントファイル自体の進化によって変遷してきました。 Bulletproof Syntax これまでWebフォ

glat_design 2014/05/22

ありゃ、ブクマしたらサムネイル変えられなかったっけ…。

リンク

フォントの総選挙！★ Fonts.com で人気のフォントランキング TOP100その他

Fonts.com の毎日更新ランキング世界最大のフォントファウンダリ(制作会社)である Monotype のオンライン販売サイトFonts.comでは、毎日更新でベストセラーフォントの発表を行っています。ベストセラーということですから恐らくは通算の数字となるのだと思います。今回はこのフォントランキングの2013年6月23日付けでのランキングを調査したので、世界ではどんなフォントが人気があるのかチェックしてみてください★ TOP 10 フォントまずはTOP 10から。とは言え、この辺はさすがに伝統のあるフォントばかりですね。しかし殆どのフォントがこのサイト内で2000年発売の古いものであるなか、比較的販売開始が遅かった ITC Avant Garde Gothic® と Neo® Sans が健闘している印象ですね。 Neue Helvetica® Linotype

glat_design 2013/06/24

カテゴリーがアニメとゲームにあったのでテクノロジーに移動

リンク

[web制作]webコンテンツの可読性を左右しそうな要素を思いつくだけ書き出した

最初に定義をしておくと、可読性とは、素早く読めるか、理解しやすいか、読んでて疲れないかという事です。これらにおいて可能な限り優れたものを作ることが、コンテンツと、それを届けようとする各セクションに関わる人が考えるべきことだという事になります。可読性とコンテンツまず、何はなくともコンテンツです。文章が読み易いものであることを可読性が高いという言い方をするのは聞いたことがあるかと思います。そのうち、コンテンツ自体が読み易い内容であるかどうかをリーダビリティー(readability)と言います。リーダビリティーに関わってくるのは文章量図版率内容表現、言葉遣いといったものです。コンテンツを作る人は、自分の書いている文章の長さ、文字と図の割合、内容、表現の複雑さ等を届ける相手に適したバランスにしなければいけません。可読性の低いコンテンツ

glat_design 2013/05/22

リンク

web制作系の気になるセミナー/勉強会等のイベントブランド

私のアンテナの低さと指向性の問題で紹介しきれていないイベントもあるかと思いますがご容赦ください！もしオススメのものとかありましたら教えてもらえると幸いです★ セミナーに行こう！皆さんはweb制作系の勉強会やセミナーに行ったことがあるでしょうか。私は以前は何となく気後れして全然参加してなかったんですが、これが行ってみるとまた行きたくなります！私はWordPress、webデザイナー、フロントエンド技術のセミナーに顔を出すことが多いですけど、まず共通して言えるのは基本的に楽しいです！★ WEBCRE8.jpを読んでいる人はweb制作というもの自体が楽しい！という人も少なくないと思うのですが、そういう人は勉強会で色んな話を聞くことで色んな刺激が受けられますし、自分の制作に役立つこともたくさん学べることがあります。特にまだよく知らない技術についてはじめの一歩を踏み出すきっかけとしては最大の効果

glat_design 2013/05/21

リンク

[CSS]擬似要素の実用的な使用用途のまとめ

(個人的な)Graceful Degradationへのシフト webcre8はこれまでIE対応の必要な環境で仕事をしていた為あまりIE6,7で使えない技術には興味が湧かなかったんですが、(ずっと進んでない)ブログのリニューアルのことを考えていると、やはりどうしても擬似要素や過去ブラウザを無視(ざっくり対応)した形でのCSS3の使い方に魅力を感じてしまうわけです。つまりプログレッシブ・エンハンスメント→グレースフル・デグラデーション的な考え方に気持ちがシフトしているんですね。そしてどうせCSS3を使用してディティールに凝るのなら、「空divや重ね使いで無理矢理作っていたものをさっくり作れる」ことに驚くより、「フォールバックを意識したコーディングをして過去ブラウザにはあっさりコンテンツを見せる」方がやっぱりいいなーと感じているわけです。とりあえず擬似要素でそこで今回は自分が擬似要素を使

glat_design 2013/02/05

リンク

新春!!HTML5KARUTA大会、全国規模に。参加を迷ってるあなたに！ #HTML5KARUTA - WEBCRE8.jp

WEBCRE8.jp > 作る > 新春!!HTML5KARUTA大会、全国規模に。参加を迷ってるあなたに！ #HTML5KARUTA

glat_design 2012/12/27

恥ずかしいｗｗｗ ×HMTL5 ○HTML5 ですｗｗ /

リンク

WEBCRE8.jp

AmazonでAdobe Creative Cloudの12か月版 Windows/Mac対応（オンラインコード）が40％もの割引きセールをやっているようです。すでに契約済みの人も追加で買う分には問題なく買えるようですよー★ 続きを読む

glat_design 2012/02/22

ブクマページの画像変更した

リンク

【プリセットの使用方法 ★★★超基本】 - ブラシ、テクスチャ、スタイル…自作のアイテムを作ろう！ - WEBCRE8.jp

Photoshopでの操作には人や仕事の種類によってよく使うモノがあり、ほとんどの機能には「これを作るときはこのくらい」といった使いがちな設定や数値を保存しておく機能があります。いくつかの制作物に同じ効果をかけて統一感を出したり、作業をショートカットする為に使うわけですね。その設定の調達手段として、プリセット配布ファイル自作といったものが挙げられます。プリセットとは Photoshopにはブラシやパターン、アクションなどにデフォルトで用意されたプリセットというものがあります。何が用意されているかはバージョンによっても違うと思いますけど、場所はコンピュータ:C→Program Files→Adobe→Adobe Photoshop*.*とかCS*→プリセット(Presets) の中にあるはずです。ちなみにwebcre8はCS4を使っています。Web PremiumなのでFi

glat_design 2011/10/31

これは、これから始まるPhotoshop素材作成地獄の序章に過ぎなかったのです…ｺﾞｺﾞｺﾞｺﾞｺﾞ

リンク

[webコンテンツ]興奮した。Twitterの新しい表現 Motion Typography

見慣れたTwitterタイムラインに形態素解析、日本語Webフォント、モーションを適用し、モーションタイポグラフィーとして表現しています。形態素解析は雰囲気くらいしか理解して無いんですけどｗ要は文章から機械的に単語を拾う仕組みだと思ってます。多分そんな感じｗサイトのデモンストレーションは幾つかあったのですが、このMotion Typographyの動きを見てがっつりハマっていしまいましたｗ Motion Typographyの遊び方 Google Chrome / Safari推奨です。使い方は簡単。ツイートを見たい人のツイッターIDを入れるだけです。自分じゃなくても大丈夫。すると直近30ツイートくらいを新しい方から順にwebフォントによるタイポグラフィーとモーションで表示してくれます！スクリーンショットを以下に。

glat_design 2011/10/19

ﾀﾞｧｼｴﾘｲｪｽ!!

リンク

[ライセンス]どれにする？制作者視点での目的別ライセンスの選び方

この記事は以前の記事[ライセンス]結局何を使っていいの？利用者視点でのよくわかる著作権！と対になる内容です。同じ事を別側面から見ているので、言っていることは同じだったりしますｗ作ったものを公開したい！モノ作りをしている人達の中でも、web業界で働いている人にとっては制作物や研究結果をシェアするという考え方はわりと一般的だと思います。業界の大先輩の方々が書いた本を始め、無料でもブログに書かれている最新情報、リファレンス、備忘録、実験等様々な形で情報を得ることが出来ます。同じように業界に還元すると大層なことは言わないまでも、皆さんは自分の為に、自身の作品や素材を配布・宣伝したりできます。すなわちそれで商売が出来たり、仕事の受注につながったり…セルフブランディングというやつも含まれますかね。

glat_design 2011/10/17

前回と似た内容だけど逆視点、あと図解はふんだんに入ってますｗ

リンク

[Photoshop]シームレスなテクスチャをワンクリックで作るアクションを作った

外で写真を撮ってきたりして、それを背景素材として使ったり出来るといいですよね。その写真、モノによってはシームレスに出来ますよ。写真で撮ってきたテクスチャに使えそうな画像をワンクリックでシームレスな画像に作り変えられるアクションを作りました。自由に使って結構ですのでどんどん写真撮ってwebサイトの背景とかに使っちゃってください。例によって前置きいらない人はダウンロードへGO！シームレスパターンの基本的な作り方アクションファイルにしちゃってるのでそれをダウンロードすれば終わりですけど、作り方を知りたい人の為に一応書いておきます。基本的にはシームレスなパターンの作り方というのは斜め45°に回転させた正方形を敷き詰めていくということが重要です。

glat_design 2011/10/07

まあ簡単に作れますけど入門用ということでｗ

リンク

[webサービス]2011年9月リリースされた(話題になった)webコンテンツまとめ

細かい性質などは気にせず、webで完結する、遊びやコミュニケーション、便利なサービス、ツールなどを集めています。必ずしもwebcre8自身が使える、と思ったものとは限りませんが、まずはこうして存在を知ってもらうこと、webcre8自身の学習のためまとめています。基本的に日本語で利用できるもの限定です。。iphoneアプリ等のモバイル端末専用サービスは今のところチェックから外しています。 2011年9月のwebサービス総括 9月は海外からやってきた大型サービス「hulu」、Googleから「みんビズ」、Yahooから「Yahooくくる」が開始され、話題を呼んでいました。前回の記事、[webサービス]2011年8月リリースされた(話題になった)webコンテンツまとめでは月の途中からだった為大した量にはなりませんでしたが、今回は22ほどのサービスを集めました。それにしても新しいサービスっても

glat_design 2011/10/03

結構でかいサービス多かった印象だけどこれ気付いてないだけで実は毎月すごいの出てるのかな

リンク

[ライセンス]結局何を使っていいの？利用者視点でのよくわかる著作権！

GNU-GPLやGNU-LGPLなどがこれにあたります。コピーライトの反対、として位置づけられたための呼び名です。コピーライトが著作権を全て持ったままなのに対し、コピーレフトは制作者の最低限の権利を守るための著作権表示以外は何も残りません。ただしGPLはもともと制作者の「これ自由に使っていいよー」→「ありがとう、出来たよー」→「作ったものも自由に使わせてくれるんだよね？お互い協力しようぜ」→「え、それはやだよ」→「Σ(ﾟдﾟlll)ｶﾞｰﾝ」と言う苦ーい経験のもとに作られた為、最初の制作者の権利を後に続く二次利用者の権利が上回らないようになっています。この決まりが結構リスキーな為、このライセンスを持ったプログラムはフリーソフトウェアを作る人達以外には使われない原因になってます。現在はMIT等との選択的なデュアルライセンスになっていたり(有名なところだとjQueryがそうみたいです。公開

glat_design 2011/09/29

やはり難しい文章には画像がないと厳しい…

リンク

[辞書登録]ガンジーでも助走つけて殴るレベルのユーザー辞書を作った

ユーザー辞書とは変なワードを登録して遊ぶと面白い便利にも使えるので使ってみようよ！Google日本語入力なにそれユーザー辞書とはあ、予め言っておくと本題は見出し4からなのでユーザー辞書が何か知ってる人はそこまで飛ばしても大丈夫です。皆さん、ユーザー辞書使ってますか？まあそんなん知ってる人も多いと思いますがｗ文字入力の時表示される、携帯で言う予測変換候補、あれを自分で自由にあらかじめ設定できるというようなものですね。最近はGoogle 日本語入力が出てきたお陰でわりと使わなくなってきてるんじゃないかなーと思います。便利すぎて最近パソコン触り始めた人は知らなかったりするかもですね。知ってても、あーアレのことねって感じで。ユーザー辞書の登録と書き出しのやり方一応Microsoft IMEとGoogle日本語入力の説明をします。これ以外のものを使ってる人にはそもそもこんな説明必要

glat_design 2011/09/28

便利ってタグついてて吹いたｗｗｗ

リンク

[webサービス]辞めやすいサービスは始めやすい

考える。 WEBCRE8.jpによるweb制作やデザインについての考察を書き綴っていくカテゴリです。今回はwebcre8が普段のwebと密着した生活を送っている中でwebサービスについて感じた事を。たまにはこういうのもいいですよね。と言ってもタイトルで言いたいことはほぼ終わってますｗ以下だらだらと体験談や考察です。 Googleグループと言うサービスがありましてちょっと前までwebcre8はGoogleグループというサービスを使っていました。 Google グループグループには「ページ」「ファイル」「ディスカッション」という３つの機能がありました。ざっくり説明するとページはテキストをクラウド上に保存しておき、許可した閲覧者がそれを読んだり編集したりできる。wikiみたいなモノですね。しかもページはちゃんとページ同士リンクさせあったり、視覚的な階層を作ることもできました。ファ

glat_design 2011/09/20

なかなか難しいと思うけど、魅力の一つになると思う

リンク

[CSS/JS]単一の記事にCSS/JSを適用する方法を調べた

jQueryプラグインtinyTips このマウスオーバーしたらツールチップがふわっと出てくるのはskuare.netさんで紹介されていたjQueryプラグインのtinyTipsを使用しています。 jQuery利用の軽量吹き出しJavaScript「tinyTips」｜skuare.net skuare.netさんのjQueryプラグイン紹介記事は、設置の仕方がシンプルに紹介してあって、いつも重宝しています。特にwebcre8のような、JavaScriptに明るくないデザイナーさんが参考にするにはぴったりのサイトだと思いますのでオススメしておきます☆ このプラグインを選んだ理由はツールチップの中に画像を含めたりすることもできるからですね。若干実装の仕方は手間があったりするのですが、画像を出すこともあるだろうなーと思ったので。 CSS/JSの記事ごとの実装(HTML5の場合) で、このページ

glat_design 2011/09/13

HTML5のサイトでWordPressでないならstyleのscoped属性、WPならプラグイン使う

リンク

[HTML5]アウトラインで迷わない！ sectionと見出しについて

webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。 HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。厳密な解説はこの記事を読まずとももっと信頼できる文

glat_design 2011/09/09

長すぎるのか…反応うっすｗｗｗ

リンク

[webサービス]2011年8月リリースされた(話題になった)webコンテンツまとめ

webサービスを楽しみましょう☆ webcre8は今後webサービスを作りたいと思っているので、最近はツイッター等で話題になるweb上のサービスが気になっています。正しくはちょっと違うようなのですが、ここで言っているwebサービスはweb上でユーザーが何かを得たり、何かを書きこんだりすることで楽しんだり、生活が便利になったり…文字通りwebで受けられるサービスと言う事です。 webデザイナーという職業上、私たちの周囲では新しくリリースされたサービスに良くも悪くもすごいスピードで多くの人が飛びついて行き、ある程度使われてあとはぽつぽつ…という状況がよく見受けられます。サービスにはそれ自体の面白さやユーザビリティ、便利さもさることながら、やはりゲームや音楽と同じように自分の周りの人たちが使っているかどうかだったり、というサービスに籠もる熱が重要だったりします。サービス自体はそれなりに面白いの

glat_design 2011/09/05

数えたらわりと少なかったｗｗ

リンク

[クリエイティブ]新しく追加！ WordpressやEvernote等のクッキー(webクッキー中級編)

前置き先日のwebクッキー(こう書くとcookieの話題と見分け付かないですね)の記事では皆様に「本気すぎワロタ」「女子だったら引くけど惹かれる」等のお褒めの言葉を頂き、本当に嬉しい限りですｗ webcre8の中ではブログの方向性は割りと定まっているのですが、あんまりweb制作以外の話題が続くのもなーと自覚してはいます。まあこれからちゃんとそういうのも書く予定があるのでよければお付き合いください…。 …でもまあ新しいモチーフを思いついたらどうせ作りたくなると思うので、見たいと言う人がいるならシリーズ化するかもしれません☆ 2色使いのクッキーの作り方

glat_design 2011/08/26

誰か作ってみてくれーｗ

リンク

[webサービス]気になる人に質問☆ ザ・インタビューズ

登録も簡単、誰でも質問を受け付けるページを作ることのできるサービス、「ザ・インタビューズ」がペパボさんからリリースされました。今までweb系の仕事をしているくせにそんなにすぐにサービスを試すと言う事はしてこなかったのですが、元々「使う」というカテゴリを作る予定だったのでちょっとノリで試してみました。 http://theinterviews.jp/ ペパボさんは「二卍」というサービスもやられていて、確かこのサービス同様にペパボさんの合宿で作られていたと記憶しています。ロックミュージシャンのように気取って質問に答えるというコンセプトで、あのときは「こういうばかばかしいの好きだなー」と思っていましたが、今回はより一般向けと言うか、とっつきやすさを重視しているのでしょうか。二卍のクレジットは作っている方達自身が凄く入り込んでて、読んでて面白かった覚えがありますｗまあ、登録方法は説明するほどの事

glat_design 2011/08/25

人に質問するのも面白い。でも普通の人はこれどうやって盛り上がるんだろうな…そこは気になる

リンク

はてなブックマーク

タグ

ブックマーク / webcre8.jp (24)

お知らせ

月間はてなブックマーク数ランキング（2024年5月）

今週のはてなブックマーク数ランキング（2024年6月第1週）

今週のはてなブックマーク数ランキング（2024年5月第4週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス