2017年のHTMLメールを取り巻く環境とモダン開発 ｜ Tips Note by TAM
はじめに：HTMLメールを取り巻く環境 HTMLメール、作ってますか？ マーケティングオートメーションと組み合わせたメールマガジンや、アプリケーションの通知メールなど、多くのプラットフォームがメール配信を行っていますが、その制作で頭を悩ませる担当者は多いことでしょう。 通常のWebサイト制作と同様には行かず、制約の多さ、対応するデバイスの豊富さなど数多の困難が待ち受けています。 総務省から出された平成26年度の情報通信白書の図4-1-1-26によれば、スマートフォンを購入することでGmailなどのメールサービスの利用頻度が増えたという調査結果があります。 他国に比べ携帯キャリアメールの強い日本でも、SIMロック解除の進む今、クラウドメールサービスの台頭は今後も続いていくでしょう。 GmailやiCloudなどのメールサービスでは、メールクライアントに昔ながらのPOP/IMAPなどの設定をせ
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、Web開発はどう変わるのか？まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。 ゲストのエキスパート紹介 高津戸 壮さん 株式会社ピクセルグリッド フロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです
altCSSを捨ててPostCSSで活きよう！ - 弥生開発者ブログ
こんにちは！ Misoca開発チームのめろたん(@renyamizuno_)です！ 髪がだいぶもっさりしてきたのでそろそろなんとかしないとなぁと思っています。 この写真は先日 きたむらさんとこくぼさんで朝明渓谷に行ってきた時の写真です。 すごく綺麗で泳いだのですが、まぁまぁ寒かったです。 最近はポケモンGOにはまっています。 会社の入っているビルがポケストップになっていて、お昼休みに社長がルアーモジュールを置くので、 ポケモンも集まるし、社員も集まってきます。 どうやら社長が会社にルアーモジュールおいたっぽい— めろたん。れんやたん。 (@renyamizuno_) July 25, 2016 Misocaのはいってるビルはポケストップになっていて、昼休みは社長の仕事としてルアーを指しています。社員に1000円のランチを奢るより感謝されている実感がある。 pic.twitter.com/8
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
読み間違えると恥ずかしい！デザイン・プログラミング用語15選 | UX MILK
ITの制作現場では、どんな職種でもコードや開発言語などの話題は避けて通れません。ただでさえカタカナ用語の多い業界ですが、プログラミングやコーディングの用語などはカタカナですらなく英語表記ですし、中には読み方が不明確なものもあります。 チームメンバーもさることながら、他社の人と話すときに間違った読み方を使っていたら恥ずかしいですよね。今回は間違いの多いと言われる用語や、議論を読んでいる言葉をピックアップしてみました。 ※更新：米国英語の発音記号を追加しました Webデザイン系 width【wídθ, wítθ】 正：ウィズス、ウィドゥスなど 誤：ワイズなど HTML/CSSの幅指定で使う「幅」という単語です。よく使うものの、発音の仕方に自信が持てない人も多そうです。 height【hάɪt】 正：ハイト 誤：ヘイト 上記とセットで間違えられやすい単語。「高さ」という意味で、ウェブでなくとも「
CSS フレームワークとの付き合い方 - ペパボテックブログ
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @horaotoko 1. はじめに 2. CSS フレームワークの分類 (1) "レイヤー" で考えてみよう (2) 2つのグループに分類しよう 3. CSS フレームワークの使い分け - フルスタックと単機能 (1) 使い分けの基本方針 (2) フレームワークの種類ごとの用途 1. はじめに このページでは、身の回りにある多種多様な CSS フレームワークと、私たちはどうやって付き合っていけば幸せになれるのかということについて述
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
魅力的な動きを手に入れる フリーアニメーションチュートリアル「26 Free Animation Tutorials for Web Developers」
TOP > Design > 魅力的な動きを手に入れる フリーアニメーションチュートリアル「26 Free Animation Tutorials for Web Developers」 webサイトをより魅力的に見せるには、デザイン性ももちろんですが、ユーザーを惹きつける動きにもこだわることが重要。しかしただ考えているだけでは、なかなかアイデアとしてひらめくことは難しいのではないでしょうか？今回はそんなときに参考にしたい、フリーアニメーションチュートリアル「26 Free Animation Tutorials for Web Developers」を紹介したいと思います。 A Collection of Page Transitions 26種類の、いろいろな動きを表現できるアニメーション作成のためのチュートリアルがまとめられています。 詳しくは以下 Text Opening
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
Bootstrapにフォームのバリデーションや通知パネルなど、便利な機能を簡単に追加できるスクリプト -Smoke
Bootstrapで作成したページに、外部ファイルと数行のコードを加えるだけで、さまざまな便利な機能を追加できるjQueryのプラグインを紹介します。 Bootstrapの対応バージョンは、3.xです。 Smoke Smoke -GitHub Smokeの使い方 Smokeのデモ Smokeの使い方 Smokeの使い方は、簡単です。 Bootstarpでつくったページに、外部スクリプト・スタイルシートを加えます。 Bootstapのコードをベースにした最小構成は、こんな感じです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
ワンポイントに使えるCSS3マウスオーバーアニメーション5種
ベースHTML ベースのHTMLです。っていっても基本aタグだけです。 html <a href="#" class="btn01">BUTTON</a> 1.くるくるって回るアニメーション くるくるっと２回転するアニメです。 くるっと１回転の場合は「rotate」を360にすればOKです。 css .btn01 { color: #fff; text-decoration: none; background-color: #dda0dd; display: block; width: 150px; height: 150px; line-height: 150px; border-radius: 50%; /* ここで動く速度とか設定 */ transition: all 1s ease; -webkit-transition: all 1s ease; } .btn01:hover {
破綻しにくいCSS設計の法則 15 - Qiita
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。 * { f
Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト | 株式会社WEB企画
css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9（IE6～IE8を含む）のシェアが低下してきていることが挙げられると思います。 つまり、css3アニメーションの対応ブラウザは「増加中」ということに他ならず、実装するサイトは更に増えていくのではないでしょうか。 今回は、そんなcss3アニメーションの実装時に参考できる22サイトを集めてみました！ 1：丸型オブジェクトにピッタリのアニメーションギャラリー 丸型オブジェクトに対して、様々なホバーエフェクトを実装しています。 何気なくマウスオーバーした時にこんな動きがあれば、注意を引きつけられそうですね！ http://tympanus.net/codrops/2013/05/30/simple-icon-h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダン日本語フォント指定
The Blog | Welcome to Adobe Blog
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
