細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
【Haml】日本語文字を含むとエラーがでるので【コンパイルエラー】 | トムのブログ
謎なエラーが出まくってます。 とむです。 Sublime Textでhamlを使おうと思っていろいろ設定していたのですが、日本語文字を入れた状態でビルドするとエラーになってしまい、上手くビルドできませんでした。 エラーは、 「Haml error on line 58: Invalid US-ASCII character “\xE3″」 といった、内容のエラーです。 ネット上で情報を集めてもなかなか集まらずエラー解決に１時間位もかかってしまったので、同じように困っている人向けへの記事です。 結論から言うと、 1行目に「- # encoding: utf-8」 と入力してやると上手くビルドできました。 もし解決しない人がいたら一度試してみて下さい。 Warning: Use of undefined constant nul - assumed 'nul' (this will throw
知らなかったHamlの機能 ほか - ゆうなんとかさんの雑記帳的な。
この前Herokuを触ったついでにWindowsにRubyをインストールした私は…なお話です。 知らなかったHamlの機能 ただのHTML簡略記法といい感じにRubyを評価できるだけのものだと思ってたら思いのほか高機能でした。 Markdownを埋め込める .content :markdown ### 埋め込んでみた こんな感じで埋め込みます。 これをHTMLにするとこうなります。 <div class="content"> <h3 id="id1">埋め込んでみた</h3> <p>こんな感じで埋め込みます。</p> </div> テキストが主体のところはMarkdownで、それ以外はHamlで、といった棲み分けができます。Haml単体では使えないので追加でgemをインストールする必要があります。 ほかにもいろいろ埋め込める LESSやCoffeeScriptも埋め込めます。やり方は似た感
マークアッパー的 Jade 入門 21 の手引き | e2esound.com業務日誌
元ネタ: マークアッパー的 Haml入門21の手引き Slim 版書いた: マークアッパー的 Slim 入門21の手引き | e2esound.com業務日誌 Jade は, JavaScript 製のテンプレートエンジンで HTML を効率的に生成するための記法です。Haml の影響を受けています。関係としては, Haml > Jade > Slim といったように影響を受けているため, それぞれ似通った機能を持っています。 Haml と Slim の同様の記事があるのでどうせなら Jade もあれば比較できるのかな? ということで書いてみます。 Jade は実務で使用したことがないので誤りがある可能性があります。一通りドキュメントは確認していますが誤りがあればご指摘いただけるとありがたい。 ※ ターミナルでコマンド実行を記述する場合$ command のように頭に $ をつけて記述して
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
High performance HTML
How can you improve the performance of web pages? Most developers look to JavaScript and image optimisation, server configuration, file minification and concatenation – even CSS tweaks. Poor old HTML gets neglected, despite being the core language of the web. HTML payloads are big and getting bigger. Pages on most top-100 sites require around 40k of HTML per page. Sites such as Amazon and Yahoo us
copyrightマークの実体参照 -Blog //ヴォルフロッシュ
©マークを実体参照で記述することの必要性の話。 思想があってCreative Commonsを使ってる場合なんかを除き、慣例として、サイトのフッターにはコピーライト表記を入れることがほとんどだろう。その際コピーライトマーク © は実体参照で入れることになっている。 例えばこんな風に。 <p>©2013 1024jp</p> もしくは、XMLで書いている場合、文字実体参照が使えないことに気付き、数値文字参照で©マークを呼び出しているかもしれない。となると、こう。 <p>©2013 1024jp</p> いずれにせよ、文字参照だ。 しかし、そもそもなぜ©は文字参照で書かれるのだろう。「それは、©が機種依存文字だから」である。まぁ、そう覚えたよね、最初にHTML勉強した頃。丸付き数字①を使って知らない人に怒られたり。あぁ、機種依存文字って、なんてマナー違反。けどさ、機種依存文
アポストロフィーのエスケープ処理に'は非推奨 - 素材の味
オライリーのプログラミングPHPを読んでいたら、出力のエスケープの項目で、 $value = str_replace('\'', ''', $value); // ' はおすすめしません と書いてた。 理由が書いてなかったので、コンテンツエスケープ規則を見に行った。 XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP ' not recommended because its not in the HTML spec ' is in the XML and XHTML specs.これによるとaposはXMLとXHTMLでの仕様で、HTMLの仕様じゃないからってことらしい。(Character entity references in HTML 4を参照していた。) HTML4での仕様み
「HTMLのタグは一部省略可能」表示速度はどちらが早いのか調べてみた
こんにちは。 Web Designing 様主催の「Tap App Awards 2013」というコンテストに出すアプリの開発が終わりました。 jQueryMobile を初めて使ってみたので、色々と記事のネタが溜まっております。 アプリの方も一般公開用に微調整して、近々リリース予定です。 それはさておき、本題です。 HTML の閉じタグは省略できるという噂を聞いたので、調べてみました。 HTML にはタグや閉じタグを省略できるタグがある 終了タグのみ省略できるタグ（次のタグの開始と共に自動的に終了タグがはさまれるので） li, dt, dd, p, tr, td, th，rt, rp, optgroup, option, thread, tfoot 開始タグ終了タグ共に省略してよいタグ（タグが無ければデフォルト値が使われる） html, head, body, tbody, colgro
Open Web Platform Milestone Achieved with HTML5 Recommendation
Open Web Platform Milestone Achieved with HTML5 Recommendation Next Generation Web Technologies Build on Stable Foundation Read below what W3C Members have to say about HTML5 28 October 2014 — The World Wide Web Consortium (W3C) published a Recommendation of HTML5, the fifth major revision of the format used to build Web pages and applications, and the cornerstone of the Open Web Platform. For app
HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成
安定した基盤上で、次世代のウェブテクノロジーを構築 Read below what W3C Members have to say about HTML5 2014年10月28日(アメリカ)： ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ＝リーは、「ビデオやオーディオをブラウザ上で見たり、ブラ
URLの終りに「/」(スラッシュ)は必要?、不要?
http://www.suzukikenichi.com と http://www.suzukikenichi.com/ URLの終りに「/」(スラッシュ)を付けた方がいいのか、付けない方がいいのか、付いたときと付かないときでは何か違いがあるのか。 誰もが1度は疑問に思ったことがあるはずです。 URLの末尾に付ける「/」のことを「トレイリングスラッシュ(trailing slash)」と技術的に呼びます。 トレイリングスラッシュのあり・なしについて、ウェブマスター向け公式ブログでGoogleが説明しました。 補足を交えながら要点をまとめて解説します。 まず、トレイリングスラッシュのあり・なしによるウェブサーバーの一般的な振る舞いの違いです。 http://example.com/foo/ （トレイリングスラッシュあり） http://example.com/foo （トレイリングスラッシュ
HTML minifier
Case-sensitive Treat attributes in case sensitive manner (useful for custom HTML tags) Collapse boolean attributes Omit attribute values from boolean attributes Collapse inline tag whitespace Don't leave any spaces between display:inline; elements when collapsing. Must be used in conjunction with collapseWhitespace=true Collapse whitespace Collapse white space that contributes to text nodes in a d
Responsive Email Design
2014年7月13日 著 こもりまさあきさんの最新著作、『Responsive Email Design』を購入、読了しました。自分が手にしたのは Ver.0.2.1、お値段 $15.99 也。勤務先で「レスポンシブ Eメール デザイン」表記のサービスに関わっていることもあり、個人的にタイムリーと言えばタイムリー。ソースコードの占める割合がそこそこあったので、30分ほどでさらっと読み終えることができます。今だにテーブルレイアウトに頼らざるを得ないHTMLメールについては、それを残念に思いつつ近頃の若者（誰）が先人の苦労（何）を偲ぶ貴重な機会でもあるよなぁ、などと鬼畜老害な感情を抱くこともあったり無かったり。いったい何年前の世界だよって意味では、 さまざまな環境で閲覧することを前提として考えると、GIFまたはJPEG形式を用いる方が安全です（環境によってはPNGの表示をサポートしていない可能
Responsive Email Design 〜モダンなHTMLメールの作り方 | Preview
Responsive Email Design 〜モダンなHTMLメールの作り方 本書の内容 2014.07.14: Ver. 0.2.2現在（PDF換算109ページ） はじめに Chapter 1 なぜ、Responsive Email なの？ その配信メール、本当に読まれてますか？ 実際のメールで起きていること 海外の事例を見てみよう Chapter 2 HTML Email の基礎知識 HTML メール作成の基本 HTML メールで使える要素とプロパティ HTML メールにおける画像 Chapter 3 Responsive Email の基本 Responsive Email とは 多様な環境をサポートするには？ 設計時、実装時の注意点 Chapter 4 Responsive Email を作ろう 1カラムのメールを作る カラムレイアウト、そしてレスポンシブ メールテンプレートを
HTMLメール制作のコツや便利なサービスいろいろ
2017年2月1日 Webサイト制作, マーケティング, 便利ツール みなさん、購読しているニュースレター（メールマガジン）はありますか？私は利用しているWebサービスや趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう！ ↑私が10年以上利用している会計ソフト！ HTMLメールとは テキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通
SVGアイコンを実用するために知っておきたい、リンク周りの記述方法
2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ ↑私が10年以上利用している会計ソフト！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
README.ja.md#%E5%8F%AF%E8%83%BD%E3%81%AA%E3%82%89%E3%81%B0for%E5%B1%9E%E6%80%A7%E3%81%AF%E7%9C%81%E7%95%A5%E3%81%99%E3%82%8B
w-make.com
SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon