2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
Sass(SCSS) mixin Snippets - NxWorld
普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。 特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。 特にこれまでSassやmixinをあまり使ってこなかったという人は、全体的に紹介しているものは内容もシンプルですし、そのまま試しに使ってみるだけでなく自分好みにカスタマイズしたりもしてみてください。 以下で紹介しているものは、それぞれ「mixin」はmixinコード、「usage」はmixin使用時のサンプルコード、「output」はコンパイル後のコードとなります。 プレフィックスに関する記述に関してはAutoprefixerなどを
CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！
Webアニメーションの実装方法として海外でいまもっとも話題なのが、anime.jsでしょう。日本の「アニメ」が語源の注目のDOMアニメーションライブラリーの使い方を詳しく。 もし速くて軽いアニメーションのライブラリーを探しているなら、Julian Garnierが考案したanime.jsを検討してみてはどうでしょうか。 この記事は、SVG画像を含む動的なDOMアニメーションに関する解説です。記事では、canvas-WebGLやSVGに特化したアニメーションライブラリーに触れるつもりはありません。ただし、WebページのHTML要素（理想的にはSVG画像も）のアニメーションに適していれば、別の機会に紹介するかもしれません。 記事の目的はライブラリーを分析してコードを掘り下げることではありません。主にCSSを使う人が、DOMのアニメーションのためにJavaScriptでなにができるかを追及する、
LINE風の吹き出しをCSSだけで表示、マークダウンならたった4文字の組み合わせで簡単記述！ - 移転→hapilaki.net
ブログに慣れていない人でも記事の中で簡単にLINE風吹き出しを表示できるCSSを自作した。マークダウン記法なら4文字（「-」「 」「1」「.」）の組み合わせだけで、コピペ不要でLINE風吹き出しの会話形式を簡単に表現できるよ。 見本 まずは見本を見せてよ。 OK。 こんな感じ。 これが4文字の組み合わせでできるの？ この会話例は2文字の組み合わせなんだぜ。 半角ハイフン（-）と半角スペース（ ）だけ。 まぁ、ステキ💕 解説：見本の記述例を図解 上の会話例を入力するときは次のように記述した。（下の記述例はキャプチャー画像） 分かりやすいように、拡大して補足説明を入れるよ。 各行ごとの説明。 改行だけ 半角ハイフン（-）3つで改行 改行だけ 半角ハイフンの後に半角スペース（ ）で改行 半角スペース2つ、半角ハイフン、半角スペースの後に会話内容 4行目と同じ 5行目と同じ 5行目と同じ 特徴：
Re : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！
Re : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ ネタ元 ： Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ ネタ元の記事にはいくつか疑問に思われる点があるので私で調べた内容をまとめておきます。 前置きとしてデバイスフォントの話となり環境によって異なる結果がでる可能性があることを前提に読んでください。 font-familyで「游ゴシック」を指定した場合に採用されるフォント まずは以下の箇所 そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまうんです。 WWW WATCHさんで指摘(Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる)されている通りこれが事実ならW
IllustratorとIcoMoonでSVGスプライトのラクラク設定！
2016年2月9日 Illustrator, SVG, 便利ツール 繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、本当にコーディングがめんどくさい！新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 ↑私が10年以上利用している会計ソフト！ SVGスプライトとは？ SVGスプライトは、ロゴやアイコンなどの複数のSVG画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVGなので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」に目
プログラミング不要で、マウスオーバー時にポップアップ表示ができる超軽量CSSライブラリ「Hint.css」を使ってみた！ : うえぶはっく
今すぐ、自分のWebサイトやブログなどにポップアップ表示を導入できる超軽量なCSSライブラリ「Hint.css」のご紹介！ HTMLの好きな要素に、専用のクラス名を指定するだけで誰でもすぐに利用できるのが特徴で、メッセージやインフォメーション、ヒントなどを表示させるのに最適です。 そこで、スマホでの利用シーンも踏まえて、サンプル例と一緒にご紹介しようと思います！ 使い方！ 利用方法はシンプルで、GitHubからファイルをダウンロードするか、以下のCDN経由でCSSライブラリを取得します。 https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.0.0/hint.min.css HTMLの骨組みはこんな感じになるでしょう。 // index.html <!doctype html> <html> <head> <meta charset="utf-
Classy CSS: Sassスタイルシートへのプログラマティックアプローチ | POSTD
この記事を書き始めたのは、現在使われているCSSの命名規則やスタイルの融合についての見解を Atomic OOBEMITSCSS という題名で風刺的な記事にまとめ、SitePointに投稿した数週間後です。それが8月頃のことだったのですが、この投稿はその後の私の生活に影響を及ぼしました。冗談のつもりで「 Atomic OOBEMITSCSS 」という題名をつけたがために、世間の人々はその題名を取り上げ、話題にしたのです。（正直言って、その内容について直接人々に質問することは、私にとって非常に愉快なことでした）。そして今年のSassConfで @extend の利用について議論したことがきっかけで、この見解を再検討する必要性に気づきました。 Classy CSSについて 上記で紹介した記事（「Atomic OOBEMITSCSS」）では、コンポーネントをマークアップする方法について（Pint
CSSとHTML Canvasで作るモーショングラフィック - ICS MEDIA
ICS MEDIAのトップページに掲載しているモーショングラフィック。これはCSSとHTML Canvas要素を使って作成したものです。時間経過とともに波の形状と色彩が変化し、多彩な表現を楽しめるようになっています。 本記事ではCSSとHTML Canvasの理解につながることを目標に、このモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル ステップ1. CSSでグラデーション背景の作成 サンプルを別ウインドウで開く ソースコードを確認する はじめに、時間経過で色彩が変化するグラフィックを作成しましょう。CSSで縦に長いグラデーションの背景を用意し、CSSアニメーションを使って縦方向に移動させることでグラデーションが変化する表現ができます（ステップ1のソースコード)。 #b
HTML5/CSS3 モダンコーディング を執筆しました - エンジニアをリングする
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books) 作者: 吉田真麻出版社/メーカー: 翔泳社発売日: 2015/11/03メディア: 大型本この商品を含むブログを見る どんな本なの？ HTMLとCSSの初心者〜中級者向けの本です。HTML・CSSの基本的な文法と一般的なタグ・プロパティ（a要素とかmarginプロパティとか）を多少知っている方であれば読めます。 イメージ的には、超初心者本の次に読むような感じ。既にHTML/CSSの最低限の知識はあって既存コードの修正やコピペはできる、けどまだいちから何か作るようなコーディングは難しい・・・というようなレベル感の方が、いちからサイトを作る経験をしながらもっと知識や理解を深めていく、というような内容
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イマドキのコーダー環境構築2016
[CSS]最近のWebサイトで見かけるコンポーネントを実装するチェックしておきたい便利なスニペットのまとめ -LittleSnippets![[CSS]最近のWebサイトで見かけるコンポーネントを実装するチェックしておきたい便利なスニペットのまとめ -LittleSnippets](https://cdn-ak-scissors.b.st-hatena.com/image/square/35e1785dbd3d615dd95dbbb956f2f495cc968350/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015120401.png)
The Blog | Welcome to Adobe Blog