タグ

Web制作とHTMLに関するevergreeenのブックマーク (4)

  • Mediumに学ぶ!SVGシンボルとCSSでロゴやグラフィックを効率よく使い回すノウハウ

    SVGの一部をCSSで操作してもっと効率よく使い回ししたい…そんなときは、ちょっとした発想の転換が必要です。ヒントはMediumのロゴにありました。 2016年、SVGは、ファイルサイズ、スケーラビリティ、CSSのおかげで、Webページで広く使われるようになりました。 場合によってはアイコンフォントのほうが好まれることもありますが(「Build Your Own SVG Icons」参照)、アイコンシステムとして使われることもあります(「The Great Icon Debate: Fonts Vs SVG」参照)。 それだけではありません。SVGはロゴやグラフィック要素にも使えます(少なくとも、過度に複雑なものでなければ)。また、もともと柔軟性に富んでいるので、レスポンシブなWebサイトを作るには完璧な味方になってくれます(Sara Soueidan「Making SVGs Respon

    Mediumに学ぶ!SVGシンボルとCSSでロゴやグラフィックを効率よく使い回すノウハウ
  • 2016年以降に「IE8に対応して」といわれたとき思い出したい六項目 - Qiita

    では、2016年1月13日でIE8の正式サポートが終了しました。 それでも、まだIE8でもちゃんと閲覧できるサイトを作って欲しいと言われることがあります。 正式なサポートが終了したブラウザを使うリスクや対応工数を考えると、 クライアントには「IE8は対応外です」としっかり説得すべきです。 でも、大人の事情で対応することになった際に、気をつけるべきことをまとめました。 1. IE8は対応外と突っぱねるべし 一番良いIE8対策は、動作確認対応外にすることだと思います。 公式サポートが止まったことで予期せぬ攻撃を受け、そのリスクを誰が負うのかクライアントさんにも説明してください。 ブラウザシェアなどをお見せして、そろそろ推奨環境をアップデートしませんかと説得してみてください。 古いユーザーさんに支えられているサービスは…頑張って対応してください。 2. HTML5とCSS3が使えない ついく

    2016年以降に「IE8に対応して」といわれたとき思い出したい六項目 - Qiita
  • 便利すぎてしびれた!あなたが知らないCSS関数トリック8選

    どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか? CSSはWeb開発者が思っているよりもっとたくさんの可能性を持っています。スタイルシート言語は年々大きく進化を続け、JavaScriptなしでもブラウザーでさまざまな機能をさせるまでになっています。この記事では、JavaScriptをまったく使わない8つのCSS関数の賢いトリックに注目します。 1.軽量CSSツールチップ たくさんのWebサイトがツールチップを実装するのにまだJavaScriptを使っていますが、実はCSSのほうが簡単です。一番シンプルなのはツールチップテキストをHTMLコード内のデータ属性に記述する方法です(例:data-tooltip="…")。このマークアップを使って、次のコードをCSSに記述すれば、attr()関数に与えられた値

    便利すぎてしびれた!あなたが知らないCSS関数トリック8選
  • もう迷わない!HTML5のもっとも基本的なテンプレートはこれだ!(2016年版)

    HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 HTML5を習得していくうちに、HTML5のテクニックをまとめて使ったひな型を作っておきたいと考えることでしょう。もちろんお勧めしますし、開始点として便利な、オンラインソースの使用も検討してみるもいいでしょう(もっと詳しく知りたい場合は、html5boilerplate.comやhttps://github.com/murtaugh/HTML5-Resetも参照してください)。 ただし今回は、構築内容も含め、コードを一から説明していきます。なぜならHTML5とCSS3を使ったサイトやWebアプリを作る際、使えるオプションに詳しくなれるし、この記事をテクニックの手引きとして参照しやす

    もう迷わない!HTML5のもっとも基本的なテンプレートはこれだ!(2016年版)
  • 1