最新実装やテクニックより、CSSの原点に帰り基本を見つめ直すことを目的としたイベント、「Back to Basics」を開催したので簡単なレポートと、主催側視点の話を書いてみます。 8月30日、先週の日曜日にWeb Design KOJIKA17のこじー（@kojika17）と一緒に「Back to Basics」というイベントを行いましたのでそのレポートをざっくりとお送りします。また、せっかくなので主催側の思惑や、この100人規模のイベントを開くにあたって工夫した点やイベント後のデータなども伝えてみたいと思います（文中敬称略）。

WAI-ARIAを用いたWebアクセシビリティーの入門書、コーディングWebアクセシビリティを出版社のボーンデジタル様より頂きましたのでレビューします！結構ツボな本でした。 コーディングWebアクセシビリティ – WAI-ARIAで実現するマルチデバイス環境のWebアプリケーションは、Webにおけるアクセシビリティーの確保を、HTML、CSS、JavaScript、そしてWAI-ARIA、つまりコーディングの技術を用いてどう取り組んでいけばいいかということについて解説する本です。

本の目次が、そのまま紹介されているUIの一覧表になっています。目的のものをビジュアルから探すことができるので、通読しなくても必要なときにパラパラっと確認できるのが良さそうですね。 その名称がイラストに描かれた画面のどこを指しているのか色をつけてわかるようにしてあったりするとなお良いなーと思いました。 項目 紹介されているUIパーツは以下のような項目に分かれています。 メインナビゲーション サブナビゲーション リスト/グリッド ウィジェット 通知 ヴィジュアライズ フォーム これらの項目のなかで更にアコーディオンメニュー、トグルボタン、トピックパスなどのよくあるUIパーツに名前を与えて分類、紹介しています。デファクトな名前が定まってないもの、あえてそうやって呼ぶことは少なそうなものもありますが…網羅しておかないとアレですし、実際どう呼ぶかって統一しておけばとりあえず仕事の役には立つでしょうし

使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、Sassの関数を使って数値を自動的に作り、さらにそれをそのまま使えれば良いなと思って作ってみましたー！ デモ どんなものなのか、とりあえずデモです。 See the Pen [Demo] Sass Variables Color tone by You Sakai (@webcre8) on Code

最近色んなところでBrackets使ってますの声を聞けて嬉しい感じなんですが、Bracketsのアドベントカレンダーも余裕で挫折しているのでまた仕切り直して、せっせと紹介記事書いていきますね。今回は新しく知った拡張機能のなかでコーディング関連のものを紹介します。これまでの紹介したものはいくつかありますので見てみてくださいー。 Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて – WEBCRE8.jp PSDデザインカンプからのコーディングに超便利！Extract for Brackets – WEBCRE8.jp SVGをBracketsで使用・作成・編集するのに便利な拡張機能 – WEBCRE8.jp Brackets CSS Class Code hint 便利過ぎワロタ系のやつです。編集中のHTMLが読み込んでいるCSSのセレクターに書かれているcla

はい、今年も始まりましたね。アドベントカレンダーです。WEBCRE8.jpではたびたびアドベントカレンダーについて記事を書いていますが、今年は去年大して参加できなかったこのお祭りにフルコミットする所存です。一日2本書くこともあるでしょう。そしてこのWEBCRE8.jpに書くのが相応しくない記事については以下の場所に書いていきますので興味のある人は読んでやってください。 おっとこめし | 一人暮らしの男の料理と食生活を垂れ流すレシピ＆ネタブログ 酒井優 (glatyou)｜note で、このシリーズではAdobeのコードエディター、Bracketsに関するネタを集めます。小ネタでも感想でもなんでもいいんですが、私は多分拡張機能を中心に記事を書くことになるかなーと思います。というか今月はほぼBracketsブログみたいになりますw この記事ではBracketsでSVGを使う際に役に立つ拡張機能

昨日PSDデザインカンプからのコーディングに超便利！Extract for Bracketsという記事を書いたばかりですが、もうちょっとBrackets自体についての話しを書きたいと思います。 一年半前は… 私は昨年の5月にSublime Text2との恋を見送り、Adobe Bracketsに巡り会いましたという記事を書いています。この頃からほとんどのコーディング作業、テキストエディットをBracketsで行っています。主に書くのはHTML、CSS、SCSS、MarkDownです。JSやJSON、PHPを少し触ります。 当時聞こえてきた、Bracketsを触ってみての使わないなあという感想について、現在のBracketsはそのそれぞれの問題を一通り解消してきていると思います。 一年前から備わっていた基本的な特徴は前述の記事を参考にしてもらえれば詳しく知れると思います。 日本語対応 リアル

昨晩深夜2時頃にTwitterを見ていると、@W3Cの公式アカウントがHTML5が勧告に達したことを伝えていました。 #HTML5 is a W3C Recommendation http://t.co/El1jgeO5Ue — W3C (@w3c) 2014, 10月 28 最新の仕様はHTML5のページにあります。2014年の後半には勧告に達するとしていた予定通りとなります。 これはつまり、Web制作者がHTML5という仕様に準拠したWebサイトを制作するのである限り、今後そのマークアップのルールは変わることがないということになるわけです。もちろん、既に次バージョンであるHTML5.1は既に開発は進められていますし、もうWebサイトを作るマークアップ言語に変化がないということではありませんが、これは一つの区切りになると思います。 勧告を伝えているページをいくつか紹介します。 HTML5

どちらかというとこっちが本題だったんですが、文章が長くなる感じだったんで分けてみました。リガチャーアイコンフォントを使うにはまずはWebフォントの指定を知ってから、という感じですね！というわけでWebフォントのCSS指定について知りたい人はWebフォントのCSS指定2014年度版とこれまでの歩みを読んでみてください。 リガチャーアイコンフォントの実例 もともと私がリガチャーアイコンフォントというものを知ったのは@fladdictさんのアイコンを合字Webフォントとして扱うSymbolSetが革新的にステキ | fladdictという記事でした。ここで紹介されたSymbolsetを知ったときはかなりの衝撃を受けました。 そして@kudakurageさんが制作したLigature Symbolsなどの登場もあり、アイコンフォントには実装の多様性が生まれたように思います。 以下はデモです。 Se

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

2013年から今にかけての一年間で色んな本に関わったり気になって買ったり頂いたりしたものがあったのですが、棚卸し的にそれらを紹介してみます★ ここ一年前後のうちに色々な書籍を手にする機会があったりしました。もちろん一番推したいのは先日自分が執筆に参加した現場のプロが教えるWeb制作の最新常識なわけですが、他にもたくさん良さげな本を手に入れることがあったので、どういう部分が良かったかざーっと紹介してみます！ 自分が持っている本を紹介する要は宣伝記事なんですが、読書感想文として購入する際のご参考に。私が持ってない本は紹介出来ないので、よりオススメの本があれば教えてほしいです！(他の人も書籍紹介記事書いてねアピール) 一旦ここで紹介はしちゃいますが、これらの本でまだ個別に記事を書いてないものは別記事でも触れようと思います。新卒のweb制作者一年生！みたいな人も参考にしてみてはいかがでしょうか★

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 今までここに入ってたアウトライン・アルゴリズムやアプリケーション・キャッシュなんかの仕様(とそれを支持する人)は、まさか消えてなくなったりしないよね…？と長いことジャンプの後半に載っているマンガのように毎日震えて眠っていたわけですが、今回晴れて死神の軛から放

まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。

この本は他にもいくつもの書籍やイベントの監修等も行っている株式会社まぼろしのみなさんに監修を行ってもらってますんで、お墨付きを頂いているという感じですね！ 私はこの執筆陣の4人のうちの一人として参加していますが、やはり他のメンバーの書いてくれたページもすばらしいもので、なんなら自分の担当ページも他の人が書いているバージョンを見てみたいとさえ思ったりもするくらいです。そのくらい、気になるトピックばかりで構成されている本です。 で、この本については発売されて半月経っているわけで、既に読んでレビュー等書いてくれている方もいます。なのでこの記事では執筆陣側の一人としてどのような人に読んでほしいか、どのように読んでほしいかを解説したいと思います。 この本の主な内容 この本の内容は、 デザイン・レイアウト マルチデバイス対応 HTML・CSS・JavaScript サイト構築・管理・運用 という風に分

WEBCRE8.jp > 会う > 【Togetterまとめ風】2014 新春!! 企業対抗HTML5KARUTA大会ツイートまとめ 先週末に行いましたイベント「2014 新春!! 企業対抗HTML5KARUTA大会」、もうチェックをして頂けたでしょうか。現在も動画をHTML5KARUTAのサイトで公開しています。ちょっと長いので垂れ流しながら作業とかしてみるのもいいと思います。 いつもイベントなんかでハッシュタグを使ったり一つの話題で盛り上がったときに「誰かTogetterでまとめてー」とか言ってるんですけど、そんな他力本願でもアレなので今回は自分でまとめてみました。 イベントの準備 年始に行われるHTML5KARUTA大会はスタッフが着物、参加者の皆さんも着物で参加することを勧めています★ #HTML5KARUTA 着物準備できたー☆ pic.twitter.com/M2PdhaOi7

今年もこの時期がやって参りました。正月気分も抜けてきた1月後半ですが、最後にWebのお祭りに参加しませんか？ HTML5KARUTAを使った宴会をやりますー！★ もう1月も半分を過ぎて過ぎてしまいましたが、1年を快調に滑り出せていますか？私は本の執筆をしたり雑誌への寄稿を行ったりとかなりアクティブに過ごしていますが、色々忙しくて本来やりたいことの半分もこなせておらず焦っていたりします>< しかしこの日だけは慌てずに、皆さんで遊びませんか？ 新年1月25日土曜日に六本木で、私が一昨年末に発表、昨年はずっと販売したりイベントをやってきていたHTML5KARUTAを使った大会&宴会を開催します。ぎりぎりの告知になってしまいましたが、皆さんが遊びにくるのをお待ちしております。 場所はGREEのイベントホールをお借りさせて頂いております。大きなホールでお酒を飲みながらワイワイやりましょう！★ イベン

Bracketsのパッケージの内容を開き、「Contents→www→thirdparty→CodeMirror2→lib→codemirror.css」を開き、CSSのプロパティを書き換えます。 .CodeMirror-wrap pre { word-wrap: break-word; white-space: pre-wrap; word-break: normal; }修正前 .CodeMirror-wrap pre { word-wrap: normal; white-space: pre-wrap; word-break: break-all; }修正後 単語等の改行を途中で行うかどうかを決めるword-wrapプロパティを変更したうえで、単語の改行ルールを決めるword-breakプロパティを全てオンにすると、カーソル位置が変にズレる現象がなくなります。 考察 Brackets

http://html5karuta.thebase.in/ いやー、本当にお待たせ致しました。初版の販売は2012年12月18日、前回のHTML5の仕様更新の翌日でした。あれからまるまる8ヶ月ということになるわけですが、そう考えるとまだHTML5KARUTAがこの世に生まれてからそれだけしか経ってないんですねー。 HTML5KARUTA 第二版の内容 今回このカルタを初めて知った人もいると思うので、解説致します。 概要

告知です。7月14日にWebデザイン・プログラミングスクールWAVE新宿本校で HTML5KARUTA大会を行います。懇親会付きです！ HTML5 を楽しく学びたい方はふるってご参加ください★ えー、実はそろそろ HTML5KARUTA の販売再開が近付いてきました。あんまり告知とか盛んに出来ていなくて申し訳ない感じなんですけど、今週から来週にかけて CAMPFIRE で支援して下さった方々への印刷用 PDF の配布とカルタ自体の発送が始められるかと思います。 販売の開始ですが、15日ごろにはサイト上で行えるようにしたいと思います。出来る限りイベントなどでも販売できるように努力します！ 今回は文面、内容の見直しなども行い、紙や印刷の品質なども向上しているかと思います。また、 HTML5 最新の仕様に基づき、 dialog タグの追加と hgroup の削除、main タグの先取り追加もして