WebフォントのCSS指定2014年度版とこれまでの歩み
比べる。 WEBCRE8.jpとその仲間達で、web制作における「選択」に おいて最良だと思われるものを考察していくカテゴリです。 最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない部分もあると思うんで何か指摘があったらがんがんツッコんでくださいw @font-faceルール @font-faceルールは、Webフォントの名称と読み込むフォントファイルを関連づける@ルールの一つです。その他、どのウェイトやスタイルに対応するかも指定できます。 しかしWebフォントの扱いはブラウザ側のフォントファイルの対応状況、フォントファイル自体の進化によって変遷してきました。 Bulletproof Syntax これまでWebフォ
ゴールデンウィークにどうぞ。2013〜2014のWeb&デザイン系書籍14
2013年から今にかけての一年間で色んな本に関わったり気になって買ったり頂いたりしたものがあったのですが、棚卸し的にそれらを紹介してみます★ ここ一年前後のうちに色々な書籍を手にする機会があったりしました。もちろん一番推したいのは先日自分が執筆に参加した現場のプロが教えるWeb制作の最新常識なわけですが、他にもたくさん良さげな本を手に入れることがあったので、どういう部分が良かったかざーっと紹介してみます！ 自分が持っている本を紹介する要は宣伝記事なんですが、読書感想文として購入する際のご参考に。私が持ってない本は紹介出来ないので、よりオススメの本があれば教えてほしいです！(他の人も書籍紹介記事書いてねアピール) 一旦ここで紹介はしちゃいますが、これらの本でまだ個別に記事を書いてないものは別記事でも触れようと思います。新卒のweb制作者一年生！みたいな人も参考にしてみてはいかがでしょうか★
[SEO]大手サイトもやっているカテゴリーを使った内部リンク構築術
Webサイトを上位表示させるためにはコンテンツの質が良いことは当然として、外部リンクの獲得、近年ではソーシャルの活用等も重要になってきています。 ですがそれだけではなく、特にWebサイトの設計段階においては検索エンジンによるWebページの評価の仕組みを理解して、適切にWebサイト内のリンクを構築していくということが重要です。 今回はその内部リンクについて、どういう内部リンクがその機能を果たしつつ検索エンジンに正当に評価されやすいのか、私の経験からその考え方をSEO初心者の方にも分かりやすく解説しようと思います。 内部リンク(Internal Link)とは 内部リンクとは、同じドメイン内から張られたそのドメイン内部のページへのリンクのことです。違うドメインから張られたリンクは外部リンク(External Link)といいます。 内部リンクの果たす役割 SEO的な観点で言うと、内部リンクは外
![[SEO]大手サイトもやっているカテゴリーを使った内部リンク構築術](https://cdn-ak-scissors.b.st-hatena.com/image/square/abfc0e57468b12736e04b878bb2f56c66cf678bb/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F07%2Fseo-internal-link-03-150x150.png)
[HTML5 入門]HTML5要素に指定できる属性の分類、書き方の違いについて
http://roadstohtml5.com/html5karuta/ HTMLの各要素には属性というものがあります。これもまあまあたくさんあるので全部解説するわけではないんですけど、まずこの記事ではどういう種類のものがあるのかを確認してみましょう。 …といいつつこれは私の備忘録でもあるんですがｗ 興味ある人はお付き合いください★ HTMLの属性とは HTMLにおける属性(Attribute)とは、HTMLで各要素のタグに指定する設定の事です。例えばハイパーリンクであるa要素のaタグにはhref属性を指定します。href属性の属性値(value)にはURL等が入りますね。 要素自体のタグ名の後に続く一つ一つが属性です。そしてその属性には、予め指定できる属性値が一つに決まっているもの、いくつかに決まっているもの、ルールが決まっているもの、なんでも指定できるものがあります。 グローバル属性(
![[HTML5 入門]HTML5要素に指定できる属性の分類、書き方の違いについて](https://cdn-ak-scissors.b.st-hatena.com/image/square/913d9625c96461318e055dbb38b3d26c92683092/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F10%2Fintroduction-to-html5-150x150.png)
[webサービス]今月のwebコンテンツまとめ43(2013年5月)
細かい性質などは気にせず、webで完結する、遊びやコミュニケーション、便利なサービス、ツールなどを集めています。必ずしもwebcre8自身が使える、と思ったものとは限りませんが、まずはこうして存在を知ってもらうこと、webcre8自身の学習のためまとめています。基本的に日本語で利用できるもの限定です。iphoneアプリ等のモバイル端末専用サービスは今のところチェックから外しています。 2013年5月のwebサービス総括 今回も早速内容に入って行きましょう！今月はリアルコミュニケーション、プロモーション系のサイトはナシです。やはり制作系のサービスに比重が偏るので、そっち系のサービスは分けた方がいいのかなと思ってます。意見求めまーす。
![[webサービス]今月のwebコンテンツまとめ43(2013年5月)](https://cdn-ak-scissors.b.st-hatena.com/image/square/59fc4b8cf1c794158aa358a703d709cadeff33bf/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F11%2Feyecatch-collection-150x150.png)
Sublime Text2との恋を見送り、Adobe Bracketsに巡り会いました
永らくHTMLエディターを移ることなく過ごしてきたのですが、先日Adobe Bracketsの記事を見て一目ぼれし、インストールしてみました。ごめんな、Sublime Text…！ どうもハマれなかったSublime Text 私は普段HTMLを書くときに結構適当なエディターを使ってきたんですが、いい加減ちゃんと効率のいい、Zen-Codingにも対応してて、HTML5の予測変換も出来てSassに対応したエディターを使わなきゃなーと思ってました。 そして現れたのがSublime Text。 ”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！ | 株式会社LIG 確かに、知人友人のweb制作者達がこいつの魅力にバッタバッタとやられてました。私も望んでいる要件を満たしているこいつが気になってはいました。 恋する速度を爆速化。Sublime TextでZen-Codingを使用
[webサービス制作]「○○がwebサービスを作ってみた」系記事まとめ
まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。 素人がwebサービスを作る 最近、というか結構前からはてなブックマークのアノニマスダイアリー(匿名で書ける日記で閲覧率も高いようです)を中心に、webサービスを何カ月で作ったというような記事を見かけるようになりました。 中にはなんでそんな事がわかるの…良く気付いたね…みたいな事もあって我々としては本当に素人か疑いたくもなりますよねｗ 素人といってもたまたまwebサービスを作ったことがなかっただけで、プログラミングの下地はあったという人もいるかとは思います。 今回はそうしたwebサービス制作秘話系記事をまとめてみます。ついでに、素人ではないにしても、同じように制作までの流れを明かしてくれている記事もいくつかピックアップしたので合わせてどうぞ。 webサービス制作してみた系記事まとめ 自分でW
[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする)
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 datalist要素とは HTML5で新しく加わったdatalist要素は、list属性で紐付けられたinput要素にユーザーが入力する際に、datalist要素内に置かれたoption要素の値をその入力候補として表示させる為の要素です。 datalistタグ内に入力候補としたいワードをvalue属性に持つoptionタグを複数記述します。 <form method="get" action=""> <input type="text" list="tools"> <datalist id="tools"> <option value="手裏剣"> <option value="まきびし"> <option value="煙玉"> </datalist> <input type="s
![[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする)](https://cdn-ak-scissors.b.st-hatena.com/image/square/778ae00a3dda92b39324406dab3406d3736f6df8/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F04%2Fhtml5-tag-datalist-01-150x150.png)
HTML5KARUTAのその後(イベントとかスポンサーとかCAMPFIREとか) #HTML5KARUTA
http://www.asial.co.jp/ アシアル株式会社は、HTML5、PHP等を得意とするシステム系の制作会社。最近はブラウザー上で動く、HTML5とJavaScriptで動くスマートフォンアプリ開発が出来るMonacaというサービスが注目されています。 取り組みとしても私の活動と親和性が高く、私も今後これでHTML5に関連したアプリを作ろうと思っています★ この機会を与えてくださったアシアルの岡本さんにこの場を借りてお礼を申し上げます。 CodeIQ https://codeiq.jp/ CodeIQは、株式会社リクルートキャリアの運営するWebサービスです。 CodeIQ（コードアイキュー）とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。ということで、もちろんHTML5についての問題も掲載されています。 こちらもテストやクイズの様な形式でweb制作
[ブログ]訪問別ページビューを上げる為の仮説を立てて調べてみた
訪問別PVを上げたい 今サイト自体の作りよりもコンテンツ的なアプローチからPVを上げようと色々考えたりしています。一応作りに関してはリニューアルで対応するつもりなので、先送りにしているのですｗ 仮説：週末は時間があるので記事を複数読む 土日などは皆平日溜めたフィードを消化する為に複数の記事を読むのではないかなという仮説を立てました。技術ブログのPVは、土日は仕事をしない分閲覧者数の落ち込みが顕著に出ます。でも、閲覧者自体は少ないけど、一人辺りの訪問別PVは高かったりするんじゃないか？と考えたわけです。 実際、週末には人によっては今週のまとめ記事みたいなのも書いたりするじゃないですか。毎日更新だと読み切らない記事も出るので、なるべく週末に記事をまとめた記事とか書けば読んでくれるかも…？ 検証：一ヶ月の訪問別PVを見る 直近一ヶ月の訪問別PVを表にしてみました。ご覧ください。 日 月 火 水
![[ブログ]訪問別ページビューを上げる為の仮説を立てて調べてみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/946712238239649b45bfbf8f744b0f9b23de452f/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F03%2Fblog-pageview-policy-01-150x150.png)
[UI]ボタンや画像のマウスホバー時のアクションはどうあるべきか
Twitterでの話題 マウスホバー時の表現について、Twitterで少し話題になりました。ちょっとツイートをとぅぎゃったりしてたわけではないので(誰かしてたらお願いｗ)全部を拾っているわけではないのですが、昨日のぽよしさん(@poyosi)のツイートと関連したものを紹介。 【質問】マウスホバーの時って明るくするのが一般的にとかあるんかいな？ — ぽよし (@poyosi) February 19, 2013 ホバー感については世界観で考えることがおおいけど「触れてる」「押せる」が明確になればいいんじゃないかと思ってたけど意見が色々… — ぽよし (@poyosi) February 19, 2013 @poyosi 何かで決められてるかはわからんけど、基本的にはやっぱポジティブな方向(明るくなる、大きくなる、前進する)に変化するのが自然やと思う。 — 酒井優 (@glatyou) Feb
![[UI]ボタンや画像のマウスホバー時のアクションはどうあるべきか](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c212cf3dc92239d6b10fee122a3a71ed5d5b1ea/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fui-hover-action-02-150x150.png)
CSS HappyLifeひらっちさんのコワーキングスペース「CSSS」オープン前レポート
「CSS HappyLife」でおなじみのひらっちさんがコワーキングスペースを秋葉原にオープンします。そのオープン前の様子をレポートしてみました！ http://css-happylife.com/ はい、ここです。女子女子したカワイイデザインですよね！ｗ CSSSとは で、そのCSS HappyLifeのひらっちさん(@hira)がフリーランス仲間のミヤケさん(@noconcept_yuki)とコワーキングスペースをオープンするという話を聞きつけて、これはオープン前に押し掛けて、CSSSが出来るまで的なレポートをしようじゃないかとお邪魔しに行ったわけです★ HappyLifeにも報告記事があります。 CSSSってコワーキングスペース運営するです。 – CSS HappyLife CSSSとは、Chanto Shigoto Suru Space(ちゃんと仕事するスペース)だそうですｗ ふざ
[クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきました
皆さんが制作に使うフォントを作成する書体デザイナーの都市さんが帰国するときちょっとお暇があるということで、お会いしてフォントの気になる質問をぶつけて来ました！★ http://www.monotype.com/ Monotype社はアメリカに本社を持つフォントベンダー(フォントを提供してる企業)です。Monotype Imaging Holdingsはフォントを制作している最大のグループ(だったと思う)です。 Twitterがきっかけでお会いする事に 私は都市さんのブログのarialについての記事を読んでからそのフォントに関するえげつない知識量を見てすぐさまチェックするようにしていたのですが… 22日午前の東京入りは決定、最短プランだと当日忘年会を開いてもらって次の日にそのまま福岡。それだけだと物足りないのでもう一人か二人ぐらいには会っておきたいところだけど、どうしましょう。どなたか23日
![[クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきました](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6c003a0e8f5f4c5174dfca723242926c0be9a59/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F01%2Fcreator-fontdesigner-tosche_j-05-150x150.png)
iGoogleの代替RSSサービス「iSoople」を組み込んだ情報収集のしかた
http://isoople.digi-popeye.jp/ これはiGoogleの様にRSSを受信してリスト上に表示してくれるサービスで、単機能のリンクや検索窓、ガジェットの追加こそ出来ませんが(お願いしますｗ)iGoogleの実用的なメイン機能であるRSS受信が出来ます。実はベータ版のころからこっそり使っていましたｗ 一応ベータ版の時とはCookieによるデータの管理だったのが、会員登録をしてユーザー情報をとっておくようになりました。それによって同じホームページを別のパソコンでも使えるようになりました。Cookieではさすがに心もとないですしねｗ iSoopleのちょっといいとこ見てみたい iGoogleの機能限定版なので不自由なところはあるにしても、iSoopleの方が勝っている機能があります。それは RSSで受信する記事の数を選べること タブ管理できること RSSの受信に特化してい
[ブログ]記事が100記事に到達したので毎日更新に切り替えます。または長文について
ちょっとした振り返り 早いもので、このブログを始めて既に1年半。最初に書いたのは2011年6月11日、Photoshopについての記事でした。 [Photoshop]レイヤースタイルの重なり方を研究する 当初、とりあえず100記事書こうと思ってましたが、これを達成するのはブログを始めて1年以内の予定でした。その間、「記事が書けねえ…」とか思ったことなんてただの一瞬もありませんでした！達成できなかったのは、ひとえに私の話が長いからですｗ 長い記事の価値 記事が長いことに意味はあります(もちろん！)。私が意図的に長い記事を書いているのは、 端折ってしまうと言葉は届くが、表層だけをさらわれてしまう(わかった気になる) こちらが当然のことと思って端折ると間が分からない人が出てしまう 一つの事を多角的に説明したい(例などを挙げ、確実な理解を狙っている) 言い残したことを作りたくない 満足感 といった
![[ブログ]記事が100記事に到達したので毎日更新に切り替えます。または長文について](https://cdn-ak-scissors.b.st-hatena.com/image/square/d89eb39dcccda4ae34f13ce129d5bbf4e5765635/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F01%2Fwebcre8-100th-article-150x150.png)
新春!!HTML5KARUTA大会報告＆まとめ #HTML5KARUTA
今週日曜日に全国で行われた「新春!!HTML5KARUTA大会」の様子のレポートを紹介します。一応渋谷会場のレポートもしたいと思います！ HTML5KARUTA大会、無事終了しました！ 2013年年始のイベントごととしては初めての人も多かったのではないでしょうか。1月6日日曜日、webcre8の制作したHTML5KARUTAを使った全国的なイベント、新春!!HTML5KARUTA大会が行われました。 新春!!HTML5KARUTA大会、全国規模に。参加を迷ってるあなたに！ #HTML5KARUTA webcre8としてはこうしたイベントに参加する事自体あまりできていなかったのですが、せっかくやるなら話を大きくしたいという安直な考えのもと、いきなり主催で、しかも全国を巻き込んでのイベントとしてしまいました。 Photo by @shinsyou 実際のところ私自身が考えていたような段取りでイ
[HTML5]遊びながらタグを覚える「HTML5KARUTA」を作りました
本日HTML5の各タグを遊びながら覚えられる「HTML5KARUTA」を公開しました。これがどういうモノかを紹介します！ 9月くらいから構想していた、ゲームを通してHTML5を覚えるというコンセプトから作られたHTML5KARUTAを作成、公開しました。まだイメージしていたものの80％程度の出来ですが、どうぞご覧ください★ http://roadstohtml5.com/html5karuta/ HTML5KARUTAは、日本の遊びカルタというゲームを通してHTML5のタグを覚えようという主旨のゲームです。 読み札にはHTML5の各タグの説明が書いてあります。絵札にはタグの名前自体があるだけです。タグの説明を聞いて、それが何のことかわかったら札を取る。日本人にはおなじみのルールですね！最近の若い人が知っているのかは知りませんけど…ｗ HTML5KARUTAを作った動機 まずなぜこれを作った
![[HTML5]遊びながらタグを覚える「HTML5KARUTA」を作りました](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed4b0ae9d3cd3869de4fb9a3f429e329064fe56b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F12%2Flaunch-html5-karuta-04-150x150.png)
[HTML5 入門]HTML5の略された49タグの語源全てを調べた
タグ名がそのままタグの意味になっているものは抜いてあります。ここにあるのは108つあるHTML5タグのうち49個。 付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。それでもどうしても分かりにくそうなものは熟語として加えてあります。 一応分かりにくいものだけ補足 hrタグについて よく昔hairline(細い線)と説明されているのを見かけましたが、正しくは水平方向の罫線と言う意味です。 dlタグ、dtタグ、ddタグについて dlはdescription listです。HTML4まで、dlは定義リスト、つまりdefinition listという意味でした。しかしHTML5からしれっとdescription list、つまり記述リストと言う意味に変わっており、用途も単に定義の言葉とその対応を示すもの、というものからターム(専門語と言うよ
[HTML5 入門]実用を意識した最小単位からの文書構造チュートリアル
文書構造って難しいですよね コーディングしていたら迷う事ってたくさんありますよね。「これは見出しなのかな」「この段落はどこまで段落なんだろう」「検索バーはどのタグで囲めばいいの？」等など、判断に詰まることはいくらでもあります。そしてその判断の迷路を抜け出た後も、ふと「このマークアップで本当に合ってんのかな」と再び迷いに陥ることも。 エレメントの役割とタグの用途の正確な理解 コーディングしているときに何故迷うか。これは、 それぞれのパーツがそのサイト内にどういう役割で置かれているかをはっきりと定義できていない 各タグの用途を理解できていない このいずれか、または両方が出来ていないから起きる問題だと思います。エレメントの役割とタグの用途、この二つがはっきりしていればコーディングに迷う事はありません。…まあ(他にも納得の行かない組織ルールとかSEOを考慮した記述等があって)それは理想の話なんです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新春!!HTML5KARUTA大会、全国規模に。参加を迷ってるあなたに！ #HTML5KARUTA - WEBCRE8.jp