atomicbox

Macでウェブ制作するための開発関連メモを残していきます。(html/JavaScript/jQuery など)

Category: html5

【CSS3】角丸・ドロップシャドウ・グラデーション・背景の透明化。よく使う効果のベンダープレフィックス付きまとめ

古いIEが次々と息絶えていった2016年、WEBサイトのコーディングで非常に出番の多い定番効果の「角丸・ドロップシャドウ・グラデーション・背景の透明化」、この辺りがCSS3を使ってキレイにマークアップできるようになってきました。

4つの角丸をいちいち画像にして複雑なスタイルシートを記述・・・立体感を出すためにドロップシャドウをつけたくて影だけの画像素材を作ってスタイルシートでリピート・・・そんな不毛な時代はようやく終わったのです!

あと、透明な背景とかもIEでは苦しみましたね。
半調な透明度のあるベタの背景も、IEが透明度のopacityにきっちり対応していなかった時代は大変でした。
「ただの単色で、ほんのちょっと透けてるだけでいいのに!」・・・これが通用しない。
半透明なpng画像を作り、背景画像に指定。おまけにフェードアニメを作ろうとしたらIEで画像の半調な部分が漆黒にチカチカしたりして。自分はなぜ残業してるのか?、自分はいったい誰なのか?・・・よく自問自答したものです。

opacityはもうベンダープレフィックスも必要なくなってるし、いったい僕らはいったい何に苦しめられていたんだろう?っていう時代はすでに到来しているのです。素晴らしい。

あ、あとちょっと外れますが何かと便利な「透明色」キーワードの「transparent」も、綴りを(自分が)よく忘れるので一緒に載せときます。

Continue reading

【html5】HTML5の基本タグと、HTML5対応リセットCSS「sanitize.css」使い方サンプル

2016年1月、ついに世界のWEBデザイナーが切望していたIE8のサポートが実質終了しました。
ようやく大手を降ってhtml5に移行できるよねということで、html5の基本タグを再確認しながらソースサンプルというかデモページを作りました。

HTMLの基本を見直す良いタイミングだったので、ついでにリセットCSSも見直すことに。
HTML5に対応していて、Normalize.css系の、「オールリセットじゃなくて、ブラウザ間の差をなくす」タイプのCSS、「sanitize.css」を使ってみたので合わせてまとめておきます。

Continue reading

【html5】AMP HTML(Accelerated Mobile Pages HTML)作ってみた

2015年10月にGoogle公式で発表された、モバイルWEB高速化の新しい技術、The Accelerated Mobile Pages(AMP)について色々と調べてみました。

Official Google Blog: Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web

モバイルからのアクセスに対して、予めキャッシュしておいたページデータをプロキシサーバーから応答させることで、まるで読み込み時間がゼロであるかのようにWEBページが閲覧できる、という感じの技術です。
今回はそのAMP HTMLを実際に使ってみた感じをレポートします。

Continue reading

【html5・css3】スマートフォン対応(レスポンシブデザイン)の設計ポイントまとめ

スマートフォンでネットサーフィンをしていて、PC用サイトがぎゅっと縮小されて見にくいサイトにあたると「今どきスマホ対応くらいしといてよ~」と思うのですが、いざ自分が作る立場になると「いやいや、そんな簡単じゃないんだから魔法みたいにすぐできると思うなよ?」なんてご都合主義な考えになりませんか。(私はなります。)

今回は現在主流だと思われる「レスポンシブデザイン」という手法でスマホ対応をする時の、設計ポイントをまとめました。

Continue reading

【html5】レスポンシブデザインサイトへのSVGの埋め込み検証

SVGってご存知ですか?

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)という、画像形式のひとつなのですが、これはJPEG、PNG、GIFなどのピクセルの集合体で表現される画像ではありません。

Continue reading

【html5】OGPタグ(Open Graph protocol)の設置

OGPというのは、Facebookなどの一部のSNSでシェアやいいねをしたときなどに抽出される、タイトルやサイト説明文、画像などのサイト概略を指定するためのプロトコルです。
とりあえずこんな感じで記述すればいいだろうというレベルですが設置方法をご紹介します。

Continue reading

© 2017 atomicbox

Theme by Anders NorenUp ↑