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

[HTML5 入門]本文における画像の設置の簡単なガイドライン

img要素の解説は長い仕様書におけるimg要素の解説は長いです。それはもう、読もうとする人を寄せ付けないレベルです。それでは一向に理解が進まないので、私なりに実際に画像を文書内に配置する場合の解説を書いてみました。あとHTML5で追加されたfigureタグの用法もわからないという人が多いですよね。今回は本文中で用いられる画像に限って解説します。文章の代わりになる画像の設置例えばBBQに行ったとして、その時の作文としてこういう一文を書いたとします。 BBQに行ってきました！場所は多摩川河川敷。この日はバーベキュー日和の快晴で、日差しも夏っぽくていい感じ。この日は早起きして色々準備してきました！こうした文章の中に本文の内容として空がフレームインした画像を挿入したい場合、空の写真は本文の一部と置き換えることができます。 <p>BBQに行ってきました！場所は多摩川河川敷。<br> <img

fushimik 2013/06/07

HTML5

リンク

[HTML5 入門]HTML5要素に指定できる属性の分類、書き方の違いについて

http://roadstohtml5.com/html5karuta/ HTMLの各要素には属性というものがあります。これもまあまあたくさんあるので全部解説するわけではないんですけど、まずこの記事ではどういう種類のものがあるのかを確認してみましょう。 …といいつつこれは私の備忘録でもあるんですがｗ興味ある人はお付き合いください★ HTMLの属性とは HTMLにおける属性(Attribute)とは、HTMLで各要素のタグに指定する設定の事です。例えばハイパーリンクであるa要素のaタグにはhref属性を指定します。href属性の属性値(value)にはURL等が入りますね。要素自体のタグ名の後に続く一つ一つが属性です。そしてその属性には、予め指定できる属性値が一つに決まっているもの、いくつかに決まっているもの、ルールが決まっているもの、なんでも指定できるものがあります。グローバル属性(

fushimik 2013/06/06

HTML5

リンク

[デザイン]インフォグラフィックコンテンツについての情報源や話題まとめ

インフォグラフィックとはまずはWikipediaから。インフォグラフィック(infographics)は、情報、データ、知識を視覚的に表現したものである。インフォグラフィックは情報を素早く簡単に表現したい場面で用いられ、標識、地図、報道、技術文書、教育などの形で使われている。また、計算機科学や数学、統計学においても、概念的情報を分かりやすく表現するツールとしてよく用いられる。科学的情報の可視化にも広く適用される。と説明されています。ざっくり言えば数値などの情報をぱっと見でわかるようにまとめなおしたグラフやピクトグラムの集まり、というようなものですね。評価されているインフォグラフィックは単に視覚的にわかりやすいだけでなく、グラフィックと名の付く通りビジュアル的にも良く工夫されていたり、面白かったり美しい見た目を備えていることが多いです。当然これは作り手の自己満足という訳ではありません

fushimik 2013/06/05

リンク

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

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

fushimik 2013/05/23

リンク

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を使用

fushimik 2013/05/21

画面分割とSass対応は必須なので、様子見。

リンク

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

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

fushimik 2013/05/21

勉強会

リンク

[webサービス制作]「○○がwebサービスを作ってみた」系記事まとめ

まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる情報まとめのカテゴリです。素人がwebサービスを作る最近、というか結構前からはてなブックマークのアノニマスダイアリー(匿名で書ける日記で閲覧率も高いようです)を中心に、webサービスを何カ月で作ったというような記事を見かけるようになりました。中にはなんでそんな事がわかるの…良く気付いたね…みたいな事もあって我々としては本当に素人か疑いたくもなりますよねｗ素人といってもたまたまwebサービスを作ったことがなかっただけで、プログラミングの下地はあったという人もいるかとは思います。今回はそうしたwebサービス制作秘話系記事をまとめてみます。ついでに、素人ではないにしても、同じように制作までの流れを明かしてくれている記事もいくつかピックアップしたので合わせてどうぞ。 webサービス制作してみた系記事まとめ自分でW

fushimik 2013/05/17

リンク

デザイン怖い話「これは本当に私の頭で考えて生み出されたものなのか？」

これはどうでもいい話なんですけどなんかこう考えると怖いなー、と思った話です。あと念のために言っておくと「パクリ」とか「本当に新しいアイディアなんてない」とかそういう話ではないです。規則性と不規則性を使いこなす先週[webデザイン]規則性と不規則性を使いこなすという記事を書いたんですけど。この記事は、基本的に人の目は規則性のあるものに安心や調和、洗練された印象を受けるので規則性にしたがって整ってた方がいいんだけど、上手いタイミングでそれを外したりしないと印象にも残らないし面白くないものになるし、個性も出せないよねという話でした。ちなみに規則性の効果については以下の記事でも述べています。 [フォント・デザイン]水平・垂直・傾斜・円弧・不規則 – WEBCRE8.jp 自由なようでいて法則を持ったもので、なんとなく、普段の制作で自分の発想に基づき規則性から外れた不規則性を作ったと思って

fushimik 2013/05/14

リンク

HTML5やJavaScriptでゲームが作れる！ゲーム制作のためのアプリケーション、フレームワーク、ゲームまとめ

HTML5で誰でもゲームが作れる！？最近webで何かを作るためのフレームワークというものがどんどん出てきており、ゲームにしろwebサイトにしろ、さわりを学べばそれを作る組み合わせだけなら抑えることが可能になってきています。それを実際に使いこなし、またそれで作るものの内容がしっかりしていなければ何人もの人が使ったり遊んでくれるものにはならないわけですが…。優れた構想を持ったクリエイターが自力でゲームを作る、ということは実際に出来るようになっていると言えます。今回は、それを実現するフレームワークやゲームエンジンと言われているものをまとめて紹介します。プログラミングやCanvasについてはちょっと知識が浅いので、調べたことをまとめるに留めています。今後の勉強課題ということで…。ゲームエンジンまとめよくHTML5でゲームが作れる、JavaScript ゲームエンジンというように紹介されるも

fushimik 2013/05/10

リンク

[webデザイン]規則性と不規則性を使いこなす

見やすいレイアウトには規則性がある webデザインに限らず、見やすくてわかりやすいデザインをするためにはある原則があります。デザインの4つの基本原則等と言われているようで、これを踏まえていればしっかりとしたデザイン＝設計が出来るというわけです。デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則タイポグラフィが苦手な人におすすめしたい私のやり方 | ウープスデザインブログ (デザイナーまめこ) 上記のような記事が参考になります。また、デザインという言葉の普通の印象からは外れると思いますが、マーチャンダイジングにおいても関連した話題があったので紹介しておきます。売場の陳列を考える – NAVER まとめ規則性を用いてデザインするこうしたことからデザインにおける規則性を掴むことができれば、ある程度法則に則って作るだけでも美しかったり、わかりやすいデザイ

fushimik 2013/05/07

リンク

ゴールデンウィークに試そう！！ 2013年上半期webサービス100連発！！

http://zzhh.jp/ ゼゼヒヒは、生活における様々なことについて賛成か反対か、どちらがいいか等の決とその理由を投稿する生活に関する投稿サイトです。 SoundGator ジャンル：音声種別：素材サイト SoundGatorは、フリーで効果音を視聴・ダウンロードし制作に使う事が出来る音声に関する素材サイトです。楽しいBADUIの世界ジャンル：デザイン種別：情報サイト楽しいBADUIの世界は、世の中にある使いづらいUIのものを紹介するデザインに関する情報サイトです。ブコメヨム！ジャンル：情報収集種別：webサービスブコメヨム！は、はてなブックマークで話題になった記事のブックマークコメントを手軽に読める情報収集に関するwebサービスです。 paprika　images ジャンル：写真種別：素材サイト paprika　imagesは、カメラマンが撮影したあまり出回らな

fushimik 2013/05/02

リンク

[HTML5]HTML5にmain要素が追加された…(現在HTML5のタグは109)

調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。これまでのあらすじはい、特にネタがあるわけでもないんですけどHTML5のCR(勧告候補)が先日更新されまして、めでたくHTML5にmain要素が追加されました。hgroupは実際に消えましたねー。これまでの流れは HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― – WEBCRE8.jp 【悲報】HTML5のタグが109個になってる…(またはdialog要素について)【今更】 – WEBCRE8.jp 【108厨歓喜】HTML5のタグ，108つに戻るってよ【らしい】 – WEBCRE8.jp といった感じです。108とか言いだしたのが運のつき…ｗ main要素とは以下はmain要素の仕様。 The main ele

fushimik 2013/04/30

div id=main　を専用の要素にした

リンク

[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

fushimik 2013/04/26

リンク

[web制作]約2年間ブログを続けて得たもの、失ったもの

考える。 WEBCRE8.jpによるweb制作やデザインについての考察を書き綴っていくカテゴリです。ここに書くことは私がブログを運営して実際に得たものです。これらのものは一介のweb担では得られなかったでしょうし、今も私がブログを書くモチベーションになっています。また、HTML5KARUTA等の他のコンテンツ作成で得られたものや、Twitter単体で得られたものは極力除きます。あくまで誰もがブログを始めた場合にも得られそうなもの、ということです。まあTwitterはなくてはならない存在ですが。ブログをどう始めたらいいか分からない人へ。目的とテーマ – WEBCRE8.jp ちなみにこのような記事も書いています。これはブログを書くことのスタート地点について書いた記事です。自分のメディアメディアと言うほどのものではまだありませんが、私がブログという存在に一番求めているものはこの自分

fushimik 2013/04/25

リンク

HTML5のサイトが素早く作れるフレームワーク「HTML5 Boilerplate」をちゃんと触ってみた

昔からサイト自体も考え方も好きで何かの機会に使ってみたいと思っていた「HTML5 Boilerplate」を、ようやく触ってみました。出来る事とか内容を解説します。 http://html5boilerplate.com/ HTML5 Boilerplateは、web上で利用者が必要な機能を選択した上で、その要件を満たすHTML、CSS、.htaccess、favicon等の各種ファイルをダウンロードできるHTML5のフレームワークです。実はポップ？なデザイン(いまはそうでもなくなっていますが、前は★マークの目立つデザインとレトロな配色で、親近感を持っていましたｗ)と考え方がすごく気に入っていて常々使ってみたいと思っていたんですが、全く使い機会がなくてですね…ｗ HTML5 Boilerplateの特徴何も考えずにサイトトップのダウンロードボタンをダウンロードするだけでも全然良いと思い

fushimik 2013/04/23

リンク

[生活]webcre8の一日のタイムスケジュール

http://www.susi-paku.com/paku1-3.html 先日@susipakuさんが書かれていたこの記事の問いかけに乗っかってwebcre8も書いてみました。私は普段から徹夜が好きだと公言していますが、実際のところこの毎日の記事投稿の時間をどのように捻出してるのか、ちょっと書いてみました。気合いが入っているとき気合いが入っている時のタイムスケジュールはこんな感じです。朝ご飯はパンとか食べます。結構長めに仕事をし、お昼ごはんは食べません。食べるとしてもチョコバーとか、1分で食べられます。基本的に生命維持のためだけの食事がめんどくさいので、友人とご飯を食べるだとか、特に「お寿司が食べたい！」というような、食や場自体を楽しむとき、または「これを作りたい！」と料理自体をしたいときでないとご飯食べません。調べものとか情報収集は仕事中ついでにやっちゃいます。仕事が終わ

fushimik 2013/04/21

リンク

[webデザイン]ユーザーを思い通りに動かす為のインターフェースの種類5つ

webデザインと一口に言っても、ビジュアル的なデザイン、インターフェース的なデザインと色々な要素がありますよね。それらが合わさり、ユーザーにストレスなくサービスやサイトを使ってもらい、更に気に入られたり、コンバージョンにつなげられたりするわけです。こうしたデザインには流行り廃りの様なものもありますが、大抵は何かの問題解決のために生み出されたものであり、本来そのデザイン手法の持つ性格や向いているシーンというものがあるはずです。今回の記事ではそうした、webサイトのインターフェース等に用いられるユーザーを思い通りに動かすためのインターフェースを5つほど取り上げたいと思います。モノによっては、いくら流行っていてもあなたのサイトには適さないかもしれません。サムネイル ― 好奇心をあおるサイトのトップページ、記事の一覧、関連するコンテンツのレコメンド。 https://jypg.net/st

fushimik 2013/04/18

「60秒後に○○が！！」

リンク

一人の普通のweb制作者が全国でイベントを開催したりCAMPFIRE等で資金を集めたりしたこと。

http://camp-fire.jp/projects/view/601 求めた支援の概要このプロジェクトは支援成立目標額が300000円、支援の募集期間は33日でした。この額はCAMPFIREのプロジェクトとしてはそう大きな額ではない部類に入るものの、私個人にとっては当然大金です。去年の12月に販売した第一版は自費で制作したものの為、大した数が作れませんでした。今回はそのとき苦しんだ、予算の少なさから来る制作個数の制限を打破するためのプロジェクト応募でした。支援の成立先週までは目標金額の半分までしか集まっておらず全く成立する見込みのなさそうな状態でしたが、終わってみれば最終日の前日、最終日とでその残り金額全てを皆さんからご支援頂くことが出来ました。成立してからも、その勢いのまま支援が入り続け、最終的には支援人数述べ54人から、合計328000円もの支援を頂くことになりました。

fushimik 2013/04/17

リンク

【108厨歓喜】HTML5のタグ，108つに戻るってよ【らしい】

http://hyper-text.org/archives/2013/04/drop_hgroup_html5_cr.shtml うーんと…勧告候補も12月に更新されたのはあくまで初案であって、ホントにまだ変わったりするんですね…。消えるらしいって話はもうすでに聞いてたんですけど、本当にCRの時点で除外されるとは。この前ちょうどCSS NiteのHTML5＆CSSビギナーズでat riskというものに触れられているのを見たんですけど、なるほど。こうしてなくなっちゃう可能性もまだまだあるんですね。 HTML5 <hgroup> <command> and commands API <menu> and context menus feature (“contextmenu” attribute) Application Cache <dialog> <details> and <summ

fushimik 2013/04/17

リンク

直接ユーザーの声を聞くこととユーザーフレンドリーな施策の違い

考える。 WEBCRE8.jpによるweb制作やデザインについての考察を書き綴っていくカテゴリです。「ユーザーフレンドリーなサイトを作るというのはどういう事をすればいいんだろう？」ということについて考えたことです。私自身今出来ているわけではなくても、こうした形を目指したいですって話です。 webサイトはユーザーに使われるもの普段私たちはwebサイトを制作していたり、制作の事を考えていたり、制作の事を考えている人の意見を読んだり聞いていたりしています。それらはもちろん(人によっては)長年の制作者としての、またはwebのユーザーとして培われてきた経験から来るものですよね。そして、それらのことは全て、結局ユーザーが実際に使って便利であったり、心地よく感じるか、面白いと感じるかの為に繰り返されます。ユーザーの言う通りに作っても上手くいかないのは何故かしかし、ユーザーからの意見をそのまま

fushimik 2013/04/11

リンク

はてなブックマーク

タグ

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

お知らせ

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

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

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス