[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サービス「Brushup」
デザインチーム向けのクラウド型プロジェクト管理ツール「Brushup」というサービスが昨日リリースされたのでとりあえずひととおり触ってみました。 久しぶりにWebサービスを紹介します。 Brushupはフェンリル株式会社が運営するデザインチーム向けのクラウド型プロジェクト管理ツールです。Webサービスなのでインストールは必要なく、簡単に登録できます。 Brushupの特徴 Brushupが謳っているのはデザイナー向けということですが、そういう意味でのサービスの特徴は大きく分けて以下のような感じです。 アートワーク自体をタスクのように扱って履歴を管理する デザインカンプなどの大容量データの管理ができる ダウンロードせずにファイルを確認、自動変換もできる サービス上のエディターでデザインに図や文字を書き込む トップページと機能の解説ページでもっと色々書いていますが、他にも基本的なプロジェクト管
コーディングを超加速する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ライター、ブロガーにも考えてほしい引用や紹介のこと
バイラルメディア叩きみたいな話題が一巡りしたところで今更こんなタイトルの記事ですが、ちょっとそういう流れからは離れたところで書きたかったので寝かせてました。 WEBCRE8.jpでは前からたびたび引用という行為を話題にして記事を書くことがあり、以前からの読者さんにはまたかという印象を与えるかもしれませんw でも書こうと思いますー。タイトルの通り、メディア（特にバイラルメディアとかですけど普通のメディア）の運営者やWebで文章を書く人にはやはり考えてほしい話しです。 読者に有益な情報やエンターテイメントを提供し、それにあわせて関連する事業や団体の活動を知ってもらったり広告収入を得るといったメディア運営にとって、他者の取り組みを紹介するということは大きな役割の一つだと思います。ですが、そうした取り組みにはときに読者（つまり未来の顧客）から反発を生む紹介のしかたや、コンテンツの制作者に嫌われてし
面白そうなIT・Web系の勉強会を知るのに心がけていること
考える。 WEBCRE8.jpによるweb制作やデザインについての考察を 書き綴っていくカテゴリです。 私は普段からWeb系の勉強会のようなイベントや、セミナーに頻繁に参加したりしてます。html5jや日本ディレクション協会のようなコミュニティーのスタッフをやったりしているのも、面白そうなイベントにアンテナを張るためというのが理由の一つだったりします。 よくイベントの情報をどうやって得ているのかと聞かれるので、それについて書いてみます★ Twitter こう書いてしまうとミもフタもないんですが、イベント情報を得るのにはTwitterが最強ですねw 特にイベントを行う、あるいはTogetterなどでイベントを頻繁にまとめている人たちがいますんでそういう人たちのTwitterアカウントをフォロー、あるいはリストに入れておけば間違いないでしょう。もし開催を見逃してもまとめなどをチェックできます。
[ダウンロード]商用無料、108個のピクセルベースパターン素材作りました
以前グラフィックパターンの柄やテキスタイルの名前まとめと言う記事を書いたのですが、それのパターンを実際に作りました。自作パターンを持ってない人はベースに是非★ 今回作ったのはPhotoshopのパターンファイル。拡張子は.patで、Photoshopのプリセットのpatternフォルダには初期設定のものが入っています。この辺は過去記事[Photoshop]ブラシ、テクスチャ、スタイル…自作のアイテムを作ろう！で一通り説明しています。使い方が分からない人はそちらを参照してくださいね。 グラフィックパターンの名前を調べましたけど 以前書いた[デザイン]グラフィックパターンや柄、テキスタイル等の名前まとめという記事で、色んなグラフィックパターンや柄の名前を調べてみました。服飾やインテリア壁紙、ファブリック等に使われるこれらのパターンですが、webサイトに応用することでクールだったり、かわいらしい
![[ダウンロード]商用無料、108個のピクセルベースパターン素材作りました](https://cdn-ak-scissors.b.st-hatena.com/image/square/fadc09691a669209cd561e8b1789e5fd0c4cc51b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F07%2FPhotoshop-pixel-pattern-05-150x150.png){kind=tracking}
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
[デザイン]ピクトグラムに求められる条件、制作の難しさと楽しさ
ピクトグラム制作には、文字を自分で生み出すような面白さと、物体や概念を絵に落とし込む楽しさがあります。デザイナー向けハッカソン「ピクタソン」の参加を通して感じたことを書きます。 先日ピクトグラムを作ってその出来を競うデザイナー向けのハッカソン、「ピクタソン」というイベントに参加してきました。その中で、元々好きなピクトグラムの制作の難しさと、そして楽しさをまた実感することができました！ というわけでイベントのレポートも交え、ピクトグラム制作の面白さについて書いてみます。 ピクタソンは以前エンジニアだけじゃない！参加型イベント「○○ソン」を紹介しますという記事でも紹介しています。 文字と図、それぞれの役割 ピクトグラムについての前に、文字と図とは何かを考えてみましょう。 文字とは 文字という表現は、要は決まったルールを利用者同士が知っておくことで情報の伝達ができる形の集合だと言えます。 文字は
![[デザイン]ピクトグラムに求められる条件、制作の難しさと楽しさ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8bff2ebd78072e79d783ec387cd58df41e278572/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2014%2F09%2Fevent-pictogram-pictathon-06-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)
[web制作]ブログ、サイト、サービスの名前を考える時の留意点
年間500程度のwebサービス等を見てきて 私は去年の10月ごろまで「201*年*月のwebサービス・コンテンツ**(リリース・話題になったもの)」というサービスまとめ記事を書いていたのですが、11月から書いてません。わりと大変なわりにあんまりニーズがあるように思えなくなってきたというのもあって…。ネタは溜まってるんで、再開しようかな―とは思ってるんですけど。めんｄ(ry で、その中でも私はやっぱりまずサイト名に目が行くわけです。何を考えてこの名前にしたんだろう？あーなるほど、とそういう感じで考えてみてます。 その中で気にすべきだなと思ったことを軽くまとめてみます。 ユニークな名前かどうか 何はなくとも、とりあえず考えた名前で検索しましょう。これすらやってなさそうなパターンもあります。固有の名前にしましょうねーという事です。 私の中では、検索に出てこないサイトは存在しないサイトです…少なく
![[web制作]ブログ、サイト、サービスの名前を考える時の留意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/f45af99f6cf73b6953c742f2263a51f2bfd9d875/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F03%2Fwebsite-naming-theory-01-150x150.png)
[web制作]今、制作会社の(特にスタッフ持ち回りの)ブログがアツい
たくさんのブログのお世話になっています 私はweb制作の知識を、webでの検索やRSSで受信することをメインに集めています。本も読みたいんですけど、なかなか…年に大した量を読むことはありません。 web制作を学び始めて3年以上経ちましたが、最近特に気になるのは読んでいるブログに、制作会社のスタッフ持ち回りブログが増えてきたなーという事です。 好きな企業ブログの魅力 さて、普通の個人やフリーランスの人がやっているブログや企業名義で情報を発信しているブログと比較して、こうした(特に持ち回りブログの)見どころとは何でしょうか。 何かしらのインセンティブを用意していてスタッフの記事を書く意欲が高い、企業のワークフローに属しているのでクオリティーが高い、といったことはフリーランスの人や企業名義のブログでも同じだと思うので置いておきます。 更新頻度が高い まあ、私もやる気だけで企業ブログの更新頻度に追
![[web制作]今、制作会社の(特にスタッフ持ち回りの)ブログがアツい](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)
[フォント] #LOVEFONT まとめました。継続募集します！
まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。 先週の記事で#LOVEFONTと言うハッシュタグをつけた記事を募ってみたのですが、声をかけさせて頂いたお知り合いの方達以外にも絡みのない方々からも続々と好きなフォントへのラブコール合戦の参加があり、チラホラハッシュタグ検索でお見かけさせて頂きました。書くのにも結構手間なのにも関わらず、その数なんと18ブログ!! 初めて知ったフォント、知ってはいたけど手が出ずにいたフォント、インストールしているのに殆どセレクトしたことのないフォント。使っているのにも関わらず良さに気付けずにいたフォント。 webcre8自身そんなにフォントに詳しいわけでもなく、使いこなせているなんて露ほども思えませんが、皆さんがこうして楽しんで書いたり読んだりしてくれたこと、実に嬉しく思います★ とは言えここまで来たら、こち
![[フォント] #LOVEFONT まとめました。継続募集します！](https://cdn-ak-scissors.b.st-hatena.com/image/square/2666e11e7c358c3c8859a1745b2ce44b5de62417/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F11%2Flove-font-impact-05-150x150.png)
[HTML5]アウトラインで迷わない！ sectionと見出しについて
webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。 皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。 HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。 これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。 厳密な解説はこの記事を読まずとももっと信頼できる文
![[HTML5]アウトラインで迷わない！ sectionと見出しについて](https://cdn-ak-scissors.b.st-hatena.com/image/square/a579b466a9d9646edbe9cc1cec01abca7601b9fc/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fhtml5-section-outline-150x150.png)
[HTML5 入門]実用を意識した最小単位からの文書構造チュートリアル
文書構造って難しいですよね コーディングしていたら迷う事ってたくさんありますよね。「これは見出しなのかな」「この段落はどこまで段落なんだろう」「検索バーはどのタグで囲めばいいの？」等など、判断に詰まることはいくらでもあります。そしてその判断の迷路を抜け出た後も、ふと「このマークアップで本当に合ってんのかな」と再び迷いに陥ることも。 エレメントの役割とタグの用途の正確な理解 コーディングしているときに何故迷うか。これは、 それぞれのパーツがそのサイト内にどういう役割で置かれているかをはっきりと定義できていない 各タグの用途を理解できていない このいずれか、または両方が出来ていないから起きる問題だと思います。エレメントの役割とタグの用途、この二つがはっきりしていればコーディングに迷う事はありません。…まあ(他にも納得の行かない組織ルールとかSEOを考慮した記述等があって)それは理想の話なんです
![[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サービス]2012年7月リリースされた(話題になった)webコンテンツまとめ
細かい性質などは気にせず、webで完結する、遊びやコミュニケーション、便利なサービス、ツールなどを集めています。必ずしもwebcre8自身が使える、と思ったものとは限りませんが、まずはこうして存在を知ってもらうこと、webcre8自身の学習のためまとめています。基本的に日本語で利用できるもの限定です。iphoneアプリ等のモバイル端末専用サービスは今のところチェックから外しています。 2012年7月のwebサービス総括 今月ちょっと数が多いので、さらっと行きます！一つ一つについてはそんなにコメントしませんよ！…しません多分…ｗ コンテンツ・マーケティング 最近と言うか、昔からあるんですけど、特に最近このコーナーでも『コンテンツ・マーケティング』と分類されるべきものが多くなってきました。ものによってはかなりあざとくなったりしますけど、どちらかと言うとこのシリーズ自体はあくまで新しく公開された
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5KARUTA 第二版の販売を開始致します #HTML5KARUTA
[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した![[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した](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)