Webとフォントにまつわる最近特に面白かった＆役立つ話題
まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。 私は常日頃情報収集をしていてフォントやタイポグラフィーについての記事に目が行くことが多いのですが、この記事ではそうしたいくつかの情報を紹介しようと思います。なんとなく紹介したくなっただけで別にシリーズ化しようと思っているわけではないのですが、好評だったらまたやってもいいかも。 新しい概念の明朝体、TP明朝 ASCII.jpの明朝体は絶滅するのか？ AXIS Font生みの親の挑戦というタイププロジェクトの社長、鈴木功さんへのインタビュー記事。 タイトルにある通り大人気フォントAXISの生みの親です。現代における明朝体というものの居場所のなさからを感じたことから、新しい明朝体、TP明朝を開発したことについて語られています。 ここで言われている明朝体の居場所がないという話しは私も非常に感じると
HTML5やJavaScriptでゲームが作れる！ ゲーム制作のためのアプリケーション、フレームワーク、ゲームまとめ
HTML5で誰でもゲームが作れる！？ 最近webで何かを作るためのフレームワークというものがどんどん出てきており、ゲームにしろwebサイトにしろ、さわりを学べばそれを作る組み合わせだけなら抑えることが可能になってきています。 それを実際に使いこなし、またそれで作るものの内容がしっかりしていなければ何人もの人が使ったり遊んでくれるものにはならないわけですが…。優れた構想を持ったクリエイターが自力でゲームを作る、ということは実際に出来るようになっていると言えます。 今回は、それを実現するフレームワークやゲームエンジンと言われているものをまとめて紹介します。プログラミングやCanvasについてはちょっと知識が浅いので、調べたことをまとめるに留めています。今後の勉強課題ということで…。 ゲームエンジンまとめ よくHTML5でゲームが作れる、JavaScriptゲームエンジンというように紹介されるも
[HTML5]title属性の使い方から考えるコンテンツの意味と提供方法
みなさん、最近title属性書いてますか？私は書いています。ははは。 先日、アクセシビリティーの事を考えながらアクセシビリティー以外のことも話すお茶会悪徳（AccTalk）に参加してきたのですが、そのときちょっとtitle属性のことが話に上がったのでブログにも書いてみようと思いました。ちなみにこのときはほかにもそばの話、技術的特異点の話、構造化データの話とか色々しました。 #AccTalk #10 – Togetterまとめ AccTalkについての説明がこれであってるのかはわからないですが、気になるひとはページを覗いてみてください★ もちろん参加も歓迎だと思いますよ！アクセシビリティーについていろんなことを質問するチャンスでもありますから。 title属性とは title属性は、HTML5の仕様にもあるグローバル属性のひとつであり、要素に主にツールチップで提供されるような、助言的な情報を
![[HTML5]title属性の使い方から考えるコンテンツの意味と提供方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ab2b16a8709a1c9495e9343cae6ed5e88ff312e/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F05%2Fhtml-attribute-title-01-150x150.png)
任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する
使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、Sassの関数を使って数値を自動的に作り、さらにそれをそのまま使えれば良いなと思って作ってみましたー！ デモ どんなものなのか、とりあえずデモです。 See the Pen [Demo] Sass Variables Color tone by You Sakai (@webcre8) on Code
コーディングを超加速するBrackets便利エクステンションまとめ
最近色んなところでBrackets使ってますの声を聞けて嬉しい感じなんですが、Bracketsのアドベントカレンダーも余裕で挫折しているのでまた仕切り直して、せっせと紹介記事書いていきますね。今回は新しく知った拡張機能のなかでコーディング関連のものを紹介します。これまでの紹介したものはいくつかありますので見てみてくださいー。 Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて – WEBCRE8.jp PSDデザインカンプからのコーディングに超便利！Extract for Brackets – WEBCRE8.jp SVGをBracketsで使用・作成・編集するのに便利な拡張機能 – WEBCRE8.jp Brackets CSS Class Code hint 便利過ぎワロタ系のやつです。編集中のHTMLが読み込んでいるCSSのセレクターに書かれているcla
Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの
コマンドラインツール ターミナルからnpmでファイルをさくっとダウンロードしたり、ちょっとした繰り返し作業も一発で実行してくれるツールが色々あって、やっと苦手意識も減ってきました。 まだ全然使いこなせてはいないんですが、前に比べて意味が分からず門前払いを食らっていた便利なツールがちょっとづつ使えるようになってきました。 気になったのでこもりさん（@chiper）が販売しているDevelopment Environments for Web Designersというのを買ってみました。今あまりWebデザイナーではないけどw Brackets メインで使っているエディターです。もともとはエディターの移行を考えていてSublime Textがあまりなじまなかったときに、プラグインが入れられリアルタイムリロードが簡単にできるエディターとして触ってみました。以降ずっと使っています。Advent Ca
PSDデザインカンプからのコーディングに超便利！Extract for Brackets
Bracketsがメジャーバージョンアップ 昨日、これまで小刻みなマイナーバージョンアップを繰り返し0.44までバージョンを重ねていたBracketsが1.0と、正式なバージョンアップを行いました。わーい！！確か私は0.14くらいから（2年近く経ってる？）使っているはずですが、開発には既に3年ほどかかっているそうです。 Brackets – A modern, open source code editor that understands web design. 今回はこれについてではなく（別途記事を書きます書きました→Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて）、この1.0と同時にリリースされたBrackets制作チーム肝いりの拡張機能、「Extarct for Brackets」の紹介をしたいと思います。これはまだまだ多いPSDカンプからのHTM
HTML5の仕様が更新、at riskを断捨離(色々消えた)
HTML5の仕様が4月29日付けで更新されていたのでその内容をざっくり報告します。 at riskがスッキリ これから仕様が変更になってなくなっちゃうかもしれないよという情報を記したat riskのセクションがかなりすっきりしてます。 The following features are at risk and may be removed due to lack of implementation. the DataCue interface; <input type=time>; the new ruby model. HTML5 今までここに入ってたアウトライン・アルゴリズムやアプリケーション・キャッシュなんかの仕様(とそれを支持する人)は、まさか消えてなくなったりしないよね…？と長いことジャンプの後半に載っているマンガのように毎日震えて眠っていたわけですが、今回晴れて死神の軛から放
[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端：リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要
![[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)](https://cdn-ak-scissors.b.st-hatena.com/image/square/a4edf0eaf5e8f4c77408f10ba236c93f8031449d/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F03%2Fhtml5-right-figure-01-150x150.png)
[webサービス]今月のwebコンテンツまとめ(2013年10月)
細かい性質などは気にせず、webで完結する、遊びやコミュニケーション、便利なサービス、ツールなどを集めています。必ずしも私自身が使える、と思ったものとは限りませんが、まずはこうして存在を知ってもらうこと、私自身の学習のためまとめています。基本的に日本語で利用できるもの限定です。iPhoneアプリ等のモバイル端末専用サービスは今のところチェックから外しています。 2013年10月のwebサービス総括 えー飛び飛びになってしまってるサービス紹介ですが、ちょっと調査不足で申し訳ないところ。でも過去3ヶ月分も一応調べるだけは調べてあるので、そのうち思い出したように記事化しますね。 さて今月のWebサービスに関する大きなトピックといえば、Yahooの展開するショッピング＆オークションサービスであるヤフオクとヤフーショッピングの出店無料化です。 これまでは出品、そして5000円以上の入札には有料のプレ
私が気に入ってる&使ってるテキストエディター系Webサービス5つ
Webサービス大好きなwebcre8が用途に応じて使い分けているテキストエディットの為のWebサービスを紹介してみます。自分の必要とする用途に応じて選んでみてください★ テキストはWebサービスで打ちたい 普段から使っているツールは全てWebサービスで代替を探してしまうほどWebサービスが好きなwebcre8です。単純に好きだというのもあるんですけど、やっぱりWebサービスはブラウザーさえあればマルチデバイス、マルチプラットフォームだというのが大きいです。家で、ノートで、スマートフォンで、様々なデバイスと環境で同じデータに触れるというのは私にとって最大の魅力です★ そんなわけで、今回の記事では私が最近使っているテキストエディター系Webサービスをいくつか紹介します。普通に有名なやつとかも入ってますけど単に使ってるサービス、という感じです。 手軽でシンプル ー SimpleText.ws h
[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)
[webサービス]今月のwebコンテンツまとめ43(2013年5月)
細かい性質などは気にせず、webで完結する、遊びやコミュニケーション、便利なサービス、ツールなどを集めています。必ずしもwebcre8自身が使える、と思ったものとは限りませんが、まずはこうして存在を知ってもらうこと、webcre8自身の学習のためまとめています。基本的に日本語で利用できるもの限定です。iphoneアプリ等のモバイル端末専用サービスは今のところチェックから外しています。 2013年5月のwebサービス総括 今回も早速内容に入って行きましょう！今月はリアルコミュニケーション、プロモーション系のサイトはナシです。やはり制作系のサービスに比重が偏るので、そっち系のサービスは分けた方がいいのかなと思ってます。意見求めまーす。
[.htaccess]サイト作成時のリダイレクト系の.htaccess
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 仕事の中で引っかかったことを備忘録として書こうと思ってた「調べる」カテゴリですが、いやーなかなか書く機会がなくてｗ今日は壮絶に引っかかったので残しておきます。 あと自信のない領域ゆえにいつもにも増してツッコミ歓迎ですｗ .htaccess設置で注意すること 名前が「.htaccess.txt」になったらアップロード後に「.htaccess」にリネームする 最後は改行する ファイルのパーミッション設定は604 文字コードはEUC-JP。Shift_JISでもよかったりするみたい サイト作成時のwwwアリナシ等のリダイレクト系の.htaccess wwwナシのURLのアクセスをwwwアリに 下記1、2の書き方はどちらでも効果は同じようです。ここの書き方のミスで壮絶にハマったのですが…まあ
![[.htaccess]サイト作成時のリダイレクト系の.htaccess](https://cdn-ak-scissors.b.st-hatena.com/image/square/5559945a4c4c3f9dd0113c2ca0e9e7e0fdb59b93/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F10%2Feyecatch-webcre8rs-150x150.png)
[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス
書体デザイナーと話し、長年の疑問を全て解消してきました 先日、[クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきましたという記事を書きました。このときはたまたま英Monotype社の書体デザイナーの大曲都市さん(@Tosche_J)としっかりと話をする機会を得たわけですが、そこで私がフォントについて「こうだと思っているけど実際どうなのか」という質問をたくさんぶつけてきました。 私としてはすごく納得がいき、フォントというモノに対する認識がはっきりしました。なので今回はその都市さんから聞いた話を踏まえた上で私の現時点でのフォントについての考え方の着地を6つのアドバイスとして書いてみます。 特に独学でデザインの勉強をしてきた人は「こういうものだと思うんだけど、皆は実際どう考えているんだろう」という悩みを抱えているはずだと思うので、それに対する答えを出したいと思います
![[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0e8c9c98b8c210bbed0a0d39aed243119c1eba7/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F05%2Ffont-six-stance-11-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
[webデザイン]規則性と不規則性を使いこなす
見やすいレイアウトには規則性がある webデザインに限らず、見やすくてわかりやすいデザインをするためにはある原則があります。デザインの4つの基本原則等と言われているようで、これを踏まえていればしっかりとしたデザイン＝設計が出来るというわけです。 デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 タイポグラフィが苦手な人におすすめしたい私のやり方 | ウープスデザインブログ (デザイナーまめこ) 上記のような記事が参考になります。また、デザインという言葉の普通の印象からは外れると思いますが、マーチャンダイジングにおいても関連した話題があったので紹介しておきます。 売場の陳列を考える – NAVER まとめ 規則性を用いてデザインする こうしたことからデザインにおける規則性を掴むことができれば、ある程度法則に則って作るだけでも美しかったり、わかりやすいデザイ
![[webデザイン]規則性と不規則性を使いこなす](https://cdn-ak-scissors.b.st-hatena.com/image/square/afaf6d936d89812b2c4dd4c9957808a2fe1c6474/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F05%2Fdesign-regularity-irregularity-01-150x150.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Back to Basics CSS」を主催として振り返る（スライド一覧＆写真つき） #btbcss
[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した![[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した](https://cdn-ak-scissors.b.st-hatena.com/image/square/232c41c1ad9ba1ab348c9a84db4d1d95780fb78b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F06%2Fdesign-gradation-color-01-150x150.png)
