Foundation for Emails | Responsive Email CSS Inliner
There was an error inlining your code. Check that your HTML and CSS have no errors and try again. You can also try the V1 Inky inliner. If you're still having issues, send us an email and we'll help you sort it out. What is Inlining? Inlining is the process of prepping an HTML email for delivery to email clients. Some email clients strip out your email's styles unless they are written inline with
CSSでラジオボタンとチェックボックスにスタイルを当てる - Qiita
label には :before と :after 擬似要素を使い、グレーの角丸とアイコンを表現しています。 ラジオボタンは角丸で円を、チェックボックスは二辺のみborderを付けた要素を45度回転させています。 モダンブラウザ IE9+ android4.0系標準ブラウザ iOS7 Safari コード <form action=""> <section> <h2>radio</h2> <input type="radio" name="hoge" value="高坂さん" checked id="radio01" /> <label for="radio01" class="radio">高坂さん</label> <input type="radio" name="hoge" value="南さん" id="radio02" /> <label for="radio02" class=
静的webサイト作成の強い味方「Middleman」【前編】｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ドワンゴデザイナーのchiiです。 以前はフロントエンドエンジニアっぽいことをしていましたが、今年のはじめからデザイナーとしてバナーやLPを作るお仕事をしています。 今日はヘッダーなどの共通パーツを部品化して、使い回すことができる静的サイトジェネレーターの「Middleman」を紹介したいと思います。 今回はその導入編です。 Middlemanが解決してくれること いきなり紹介に入る前に、どんなことを解決してくれるのかを私の実体験に触れながらお話します。 実は、デザイナーとして初めて複数ページを制作するときにヘッダー制作における煩わしさがありました。例えばこんなコードです。 たぶん皆さんも経験があると思います。 <html> <head><title>Awesome Corporate Site</title></head> <body> <header> <h1><a hr
HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について | blog.jxck.io
Intro Chrome が予定している <link rel=stylesheet> の挙動の変更について、 Google Chrome チームの Jake が、興味深いブログを上げている。 The future of loading CSS この内容は、単に Chrome に対する変更だけではなく、 HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。 今回は、この内容を意訳+補足解説し、本サイトに適用していく。 HTTP/1.1 時代の CSS HTML 自体がコンポーネントを意識した作りになっている場合は、自然と CSS も class などを使いコンポーネント単位に作ることができるだろう。 しかし、 HTTP/1.1 では、リクエストの数を減らすために全ての CSS を 1 つ(もしくは少数個)に結合する最適化が主流だ
【gulp】htmlテンプレート「gulp-jade」についてメモメモ（１）～導入 | バシャログ。
みなさま、こんにちは。昨年は、『ちはやふる』や『めぞん一刻』、そして『孤独のグルメ』などにハマり続け、夫婦で聖地めぐりをしていた kouraku です。とりあえず、『ちはやふる』の聖地巡り（分倍河原：東京、近江神宮：滋賀、芦原温泉：福井）はコンプリートしました。 さて、昨年はhtmlテンプレートとして「gulp-html-extend」を紹介してきましたが、簡単で分かりやすい反面、かゆいところに全く手が届かない場面などに多々遭遇します。 「あぁ、ここで条件文が使えれば余計なレイアウトなんて作らなくて良いのに・・・」 とか、 「変数が多くなると見辛いし設定しづらいな・・・」 とか。 こうした悩みを解決すべく、ここ最近（自分が）あまり使わなくなってしまった「jade」をおさらいしようと思いました。ということで、そのおさらい内容をメモメモ。 まずは構成から・・・ 今回の構成は、下図のとおりです。
ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方
ソースコードをハイライトして見やすく表示するには、Highlight.jsが、軽量でバグもなく、お勧めです。
ソースコードの装飾表示方法 SyntaxHighlighter
HTML,CSS,JS,Perl,PHPなどの各ソースコードをWebサイト上に綺麗に再現。 NetyaSun ソースコード表示 ホームページ 作成、運営、管理ガイド 行番号や各行背景色で見やすい ソースコード ビュー ライブラリ SyntaxHighlighter エディタのようにWebサイト上に綺麗にソースコードを表示する方法。 ソースを書くプロ達や未来の開発者のための学びの場である HTML,CSS,JS,Perl,PHPなどのマニュアル・解説サイトなどで、 PREソースコードを行頭番号付きでカッコよく表示するソース ビューア SyntaxHighlighter SyntaxHighlighter:Download ソース上にオンマウスで の操作タブがソースの右上に表示されるようになった。 ソースを別窓ビュー表示したりクリップボードに保存や印刷も可能な優れものです。 <?xml ve
Gmail, Outlookをはじめ、デスクトップ・ブラウザ・スマホメールにレスポンシブ対応のHTMLメールのテンプレート -Cerberus
HTMLメールのコードは通常のWebページより難しい、という人は少なくないと思います。しかもレスポンシブ対応のHTMLメールになると、更に難易度があがります。 メールでよく利用されるレイアウトのパターンをシンプルにまとめた、レスポンシブ対応のHTMLメールのテンプレートを紹介します。 Cerberus Cerberus -GitHub Cerberusの特徴 CerberusのHTMLメールのテンプレート Cerberusの特徴 Cerberusは現在主流のメールクライアントをサポートしたレスポンシブ対応のHTMLメールのテンプレートで、MITライセンスで無料で利用できます。 サポートしているクライアントは、下記の通り。 デスクトップ Outlook 2000/02/03/07/10/13 (Windows) Outlook 2011/16 (Mac) Apple Mail Thunder
Atom Html PrevierでローカルにあるCSSを読み込む方法 - 役立ちぬ開発史、それはただのブログ
この記事は、 Atom Advent Calendar 2014 の20日目の記事です。 Atom Html Previerでプレビューを見るとローカルにあるCSSを読み込まずに表示されます。HTMLタグを確認する上では特に問題ないですが、サイトを作っていく上ではもの寂しさを感じます。ローカルにあるCSSを読み込む方法を紹介します。 ローカルにあるCSSを読み込む方法 この記事は、AtomにプラグインのAtom Html Previerをインストールしていることを前提にしています。また、現時点のプラグインのバージョンは、v0.1.3になります。 ローカルにCSSファイルを読み込ませたHTMLファイルを、Atom Html Previerをインストールしたままの状態でプレビューしても、読み込んではくれません。読み込ませるには、少し設定を変える必要があります。 まずctrl+shift+Pまた
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
JavaScript フレームワーク - ペパボテックブログ
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 (2) SPA（シングルページアプリケーション） 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う？ どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ
コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
フロントエンド開発今昔物語 - Qiita
フロントエンドと言っても、アプリやゲーム制作などではなく、いわゆるWebサイト制作のクライアントサイド側の話になります。 時代背景 おじいさんには、Photoshop、Illustrator、Dreamweaverという3種の神器がありました。当時のWebサイト制作は、これらのソフトを利用し、おじいさんが一人で行っていました。おじいさんのような仕事をする人は、Webデザイナーと呼ばれ、とても人気がありました。おじいさんは幸せでした。 いつしかWebデザインは分業化されるようになりました。おじいさんは久しくデザインをしていません。現在の彼の仕事は、デザイナから受け取ったPhotoshopデータを基にWebサイトを制作することです。それはHTML5サイトというとても都合の良いバズワードでまとめらてしまうこともあります。このことについて、おじいさんはやり場のない憤りを抱いています。 HTML/C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CodePen - Front End Developer Playground & Code Editor in the Browser
初心者のためのWeb標準技術
Web開発ライブラリを自動的に入手できるパッケージ管理ツールBower
Blender で作った3DCGをHTMLに出力するプラグイン「Blend4Web」 - 強火で進め
