HTML/CSSのコーディング品質についておもうこと | ツクロア - DESIGN LAB
デザインフローシリーズをいっかい休みにして、最近おもったことをかいていきます。 タイトルからして、なんか意識高い系の話になりそうでいやなのですが。。 とはいえ、じぶんが普段思っていることと照らしあわせてなにか考察できればいいなと思います。 HTML/CSSのデザインコーディングについて 通常わたしたちは、デザイン業務をメインでしていますが、HTML/CSSへのコーディングもやっています。 コーディングって意外とデザインの視点が入りづらいところと思われがちなのですが、実際にはそうでもないな、と最近改めて思いました。 そこで、わたしたちが考えているコーディングへの思いを挙げていってみたいと思います。 デザインを受け取って、それをコーディングするだけではうまくいかない ほんとに、いわゆるコーディングの「作業」という業務ですね。 psdとjpgなどを受け取って、画像を書き出して、HTML/CSSで
Flexboxベースの軽量レスポンシブCSSフレームワークBasisをつくりました。
Flexbox ベースの軽量レスポンシブ CSS フレームワーク Basis を公開しました。もともと Bootstrap が好きでよく使っていたのですが、いろいろ「ん？」となることがあって、別のフレームワークを探してみたりもしたのですがなかなか条件にあうものが無く、それならいっそ作ってしまえ！ということで作りました。 導入方法・マニュアルは下記をご参照ください。 ということで、既存のフレームワークの何が不満だったのかということも交えつつ、Basis の特徴など。 Basis の特徴 Flexible box ( Flexbox ) ベースのグリッドシステム Basis はグリッドシステムが float ベースではなく、Flexible box ( Flexbox ) ベースとなっています。今でこそ Flexbox ベースのグリッドシステムが使えるフレームワークがいくつかでてきていますが、
thoughtbot社のツールを調べてみた @ ginza.rb
2/16に みんなのウェディング さんで開催された『Ginza.rb 第32回 thoughtbotの開発ツールたちと最近のgem事情』に参加しました！ 世界中にオフィスがある受託系の会社『thoughtbot社さんのオープンソース』で公開されているツールをネタに話をしましたんでそのメモです。 🗻 フロントエンド Bourbon - A Lightweight Sass Tool Set Bourbon Neat Bitters - Predefined Styles for Bourbon Refills - Patterns フロントエンド系のツールをいくつか作っていて、組み合わせるとBootstrapっぽいことができるそう。 CSSフレームワークBourbon/Neat/Bitters/Refillsは美しい - Qiita 結構絶賛されていて、Qiitaで400ストック以上されて
HTML5 Experts.jp 2015年の年間読まれた記事ランキングTOP20！
HTML5 Experts.jp 2015年の年間読まれた記事ランキングTOP20！ 仲 裕介（HTML5 Experts.jp副編集長） 日本初のHTML5技術専門サイト「HTML5 Experts.jp」も開設から2年5カ月が経ちました。2015年も2014年に引き続き、エキスパート・コントリビューターの方々に、ホットな技術トレントをタイムリーに、記事として取り上げていただきました。また、白石編集長と豪華なパネリストによる様々な対談企画や、当メディアをネタにしたパフォーマンス改善企画等、新しい試みにも挑戦してきました。皆様、お楽しみいただけましたでしょうか？ 今年最後の記事は、記事公開後１週間の閲覧数（PV）をもとに、2015年の年間読まれた記事ランキングTOP20！をお届けします。 ＜1位＞ 【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り
HTML の 〜 内に書くタグの順番にも気を遣ってみた。
今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日（2016年1月20日）現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on
nunchakuを使って制作したページをまとめてバリデートする | スタッフブログ | LAB Inc.（株式会社ラボ）
HTMLにエラーがあるとブラウザや支援技術が適切にHTMLを処理できない可能性があり、さまざまな問題が発生する場合があります。WCAG 2.0の達成基準 4.1.1を満たしている事を確認するためにも、ウェブページをバリデートすることは重要な作業の一つと考えています。 バリデーターにはThe W3C Markup Validation Serviceがありますが、未公開のコンテンツを外部に送信することは避けたい場合もあるかと思います。そのような場合は、The Nu Html Checker (v.Nu)からvnu.jarファイルなどをダウンロードし、ローカルマシンで気軽にバリデートすることができます。 単一のページをバリデートする Githubのvalidator/validatorからvnu.jarをダウンロードします。適当なディレクトリに置いてjava -cp vnu.jar nu.va
dl要素大喜利的な何か。
debiru @debiru @momdo_ 敢えてお聞きしたいのですが（HTML5 の文脈で）dl 要素のことを「定義リスト」と言っちゃうと悲しい（残念）なのは何故でしょうか。私も悲しい（引っかかる）派ですが、そうやって書いちゃう人に何と言うと幸せになれるかと思いまして。例えば定義型リストならアリですか？ 2015-07-28 19:52:10
第5回 社内マークアップ部
2015年1月27日 著 勤務先の部活動、マークアップ部の第5回のお題は「インデックス」。ワイヤーフレームは以下の通り： 今回もいろいろ論点があるように思いますけど、マークアップ言語としては HTML5 を使うとして、自分にとっての主な論点なり前提条件は以下の通り： 全体は単一のリストかどうか。先頭の項目は他の4項目と比べ、画像の表示エリアが大きいほか、リンクラベルにリード文が含まれていたり、リンクラベルに続けてテキストが存在している点において、情報構造が異なります。しかし、先頭の項目と他の4項目を一括りにすることに難があるほど情報構造上の相違は大きくないと感じましたし、むしろ一括りにしたほうが効率的にスタイル付けできる（カテゴリー表記とか、画像とテキストの並びといったスタイルは共通している）と期待して、単一のリストと捉えました（画像と横並びになったテキストのひとまとまりが li 要素を構
レスポンシブEメールデザイン
2015年1月21日 著 こもりまさあきさんの最新？著作『レスポンシブEメールデザイン』を読了。先だって、同じくこもりさんの『Responsive Email Design』を読んでいたのだけど、さまざまなリソースの紹介を通じ日頃から勉強させていただいてますので、敢えて一方的な御礼兼ねて購入。コンパクトで可愛らしい外見そのままに、さらっと読み終えられる分量ではあるものの（ソースコードに割かれたページ数もそこそこある）、新たな気づきもいただけたので買ってよかったです。こもりさんは『ごんぎつね』好きなのかしら、とか（謎）。ほか気になった点： p.31で、安心して使えるHTML要素やCSSプロパティの一覧を公開しているEmailologyの存在は知りませんでした。 p.39の注釈で、閲覧者の拡大操作を抑止する「maximum-scale=1, user-scalable=no」という指定もできる
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
Custom Elements - Web Components を構成する技術
この記事は webcomponents.org の記事とのクロスポストです。 HTML は言うまでもなく、ウェブページを構成する最も重要な要素です。しかし、提供される機能が低レベルなため、複雑なコンポーネントを作ろうとすると、途端に div だらけの分かりにくい構造になってしまいがちです。例えば、あなたが必要な機能を盛り込んだ独自のコンポーネントを作れるとしたらどうでしょう？例えばそのコンポーネントに、機能を的確に表すタグ名を付けられるとしたら？既存のタグを拡張して、新しい機能を追加できるとしたら？ Custom Elements は、それを可能にします。 Custom Elements とはなにか？ # Custom Elements は開発者が独自に HTML タグを定義し、サイト上で利用できるようにすることで、繰り返し利用されるコンポーネントを単純化し、再利用する手間を大幅に削減しま
<picture>まわり雑感 その1 - fragmentary
Chrome 38が出て<picture>が有効になったので、いくつか記事を訳した。 レスポンシブイメージのネイティブサポート - HTML5 Rocks Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ Dev.Opera — レスポンシブ・イメージ：ユースケースと入門用のコードサンプル HTML5 Rocksのは<picture>の簡単な使い方をざっと紹介。Dev.Operaのネイティブうんぬんは<picture>と<img srcset>, <img sizes>を細かく説明。もひとつのDev.Operaのサンプルのやつはユースケースごとに組み合わせをいろいろ書いたサンプル。それぞれ少しずつ違っている。おすすめは2つ目。ちょっと長いけど、書いているのがBlink, WebKitで<picture>とかを実装しているYoavなので。 以下いろいろ。 だいたい<im
<script async>でJavaScriptの非同期読み込みを - fragmentary
JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme
HTML5 仕様が W3C 勧告に
HTML5 仕様が無事、W3C 勧告 （W3C Recommendation） となりました。直近の更新としては、2014年 9月 16日に勧告案 （Proposed Recommendation） として公開されていましたが、事前に公開されていた Plan 2014 で 2014年第4四半期中の勧告予定になっていた通り、2014年 10月 28日付けで勧告へと進みました。 HTML5 is a W3C Recommendation ： W3C News HTML5 A vocabulary and associated APIs for HTML and XHTML - W3C Recommendation 28 October 2014 HTML5勧告 - オープン・ウェブ・プラットフォームの重要なマイルストーンを達成 #HTML5 is a W3C Recommendation ht
HTML5 のマークアップで心掛けたい事 - HTML5 のいろいろな要素
HTML5 のマークアップで心掛けたい事を挙げてみます。 平成25年 5月16日現在、HTML5 勧告に向けて、グラフィカルなウェブブラウザの開発者は HTML5 への対応を急速に進めておりますが、そうでない環境、例えば音声出力ブラウザや CUI 環境向けテキストブラウザなどについては、殆どと言って良い程話を聞きません。 こう言った事から、HTML4/XHTML1 時代の環境でも問題なく取り扱えるようにマークアップすべきでしょう。 はじめに。 平成24年12月17日に HTML5 の勧告候補が発表され、HTML5 は勧告に向けて大きく前進しております。 特にグラフィカルなウェブブラウザの開発者は、WAHTWG に加盟していないマイクロソフト社を含めて HTML5 への対応を急速に勧めており、西暦2014年に勧告される頃には、殆どのグラフィカルなウェブブラウザが HTML5 対応になっている
Google が Microdata による組織ロゴの意味づけに対応したそうなので
Google ウェブマスター向け公式ブログで紹介されていましたが、Microdata （schema.org） による、組織ロゴの意味づけをサポートし、組織を象徴する画像と Web サイトを関連づけることで、Google 検索結果で使用される組織ロゴの画像を指定できるようになったそうです。 ということで、実際に使用する場合のサンプルソースなど挙げてみようと思います。 組織のロゴの schema.org マークアップのサポートを開始しました ： Google ウェブマスター向け公式ブログ このたび、Google では組織のロゴについての schema.org マークアップのサポートを開始いたしました。このマークアップによって、組織を象徴する画像とサイトを結び付けることができます。ウェブマスターの皆様は、Google 検索結果で組織のロゴとして使用される画像を指定することができます。 組織のロ
main要素……
main要素については色んな人が色んな所で書いてるので、そのものがどういうものかとかは今さら書かない。main要素がもし複数出てきていいならアレとアレにdiv要素使わなくて良くなるなーという。アレとアレというのは、hAtomのentry-contentともうひとつはSchema.orgのArticle(BlogPosting)/articleBody。とか言いつつそこら辺は好みの問題っぽいのでちょっと別の話。 しょうがなくdiv要素を使うケースというのはそこそこあって、その最たるものがdiv.wrapper。これにrole="main"との対応が考慮されてmain要素の誕生につながったわけだけど、あらためてrole="main"のことを考えながらmain要素を使ってみると、div.wrapperは常にmain要素になりうるのかみたいな疑問が湧いた。 例えばウェブログのpermalinkのペ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
いいね！ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります（公式情報） | 初代編集長ブログ―安田英久
