ColumnClips: 65
プログラミング
アクセシビリティ対応が捗る自動チェックツール「aXe」って知ってる?
最近作成したWebサイトをデザインしたとき、特別なニーズや障害のある人にとってサイトがアクセシブルになるためにどのくらいの時間と労力を使いましたか。たぶん、多くの答えは「なにもしていない」だと思います。しかし、インターネットユーザーの中には、色を区別したり、テキストを読んだり、マウスを使ったり、あるいは、単にWebサイト構造が複雑でナビゲートするのに問題があるために、サイトのアクセスに苦労する人がたくさんいることを否定する人はいないと思います。
Google Fontsの日本語フォント「Noto Fonts」の使い方
このページではGoogle Fontsの中でも大注目の日本語フォント、Noto Fontsの使い方を解説します。 合わせて日本語のWebフォント使用上の注意点もまとめました。 Webフォントの仕組みについては「Web Fontの使い方とGoogle Fontsのオススメフォント 10選」でまとめました。「Web Fontって何?」方はざっと目を通しておいてください。
CSSボタンを演出する155個のHoverエフェクトまとめ
CSSのみでもボタンにおもしろい動きを演出することができるようになったのですね。数年前まではjQueryを使用しないといけなかったのが、CSSだけでエフェクトをつけられるのはとても効率的になりました。 そこで今回は、HTMLとCSSをコピペして演出できるHoverエフェクトを155個ご紹介します。あなたのWebサイトのデザインに合うものを見つけ出して、ぜひ実装してみてください。
HTML の 〜 内に書くタグの順番にも気を遣いましょう。
今アナタがご覧になっている、このオンズのウェブサイトでは、読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は
〜タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日(2016年1月20日)現在のオンズのウェブサイトの〜タグは次のように記載されています。CSSアニメーションは確実に進化している!キーフレームを使ったCSSアニメーションの実装ポイントまとめ
CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。
CSSの「box-shadow」と「filter:drop-shadow」の違いを覚えたらちょっとテンション上がった
要素に影を付ける時はbox-shadow、テキストに影を付ける時はtext-shadowを使いますよね。むしろ、この2つ以外に影を付けるプロパティなんてあったっけ...?
Flexboxのプロパティ紹介
flexboxの仕様を見やすい図とともにわかりやすく説明しています。 1 Flexコンテナ 1.1 flex-direction -Flexアイテムの向きと方向 1.2 flex-wrap -Flexアイテムの折り返し ...
イメージスライダーを魅力的に!コピペ実装できるHTMLスニペット24個まとめ
ウェブサイトでも使われることが多く、写真イメージをより魅力的に見せることができるイメージスライダー。ヒーローヘッダーとして利用されることも多く、イメージスライダーを効果的に利用することで、ウェブサイトを訪れたユーザーにより魅力的にコンテンツを見せることもできます。
[JS]文字を楽しく見せる、カーブ状に簡単に配置できるスクリプト -Arctext.js
CSS3だけで文字を回転させたりカーブ状のパスに沿わせるのは非常に複雑です。文字を簡単にカーブ状に配置したり、またアニメーションを伴うこともできるjQueryのプラグインを紹介します。
WAI-ARIAを活用したフロントエンド実装 第1回 role属性、aria属性の基礎知識
Webコンテンツアクセシビリティを確保するさまざまな仕様のうち、WebサイトやWebアプリケーションで活用できるrole属性とaria属性について取り上げます。まず、両者の基礎的な知識から解説します。
Web業界は進化が速い!自分がHTML, CSS, JavaScriptで何を知らないか、スキルをチェックができる -Know it all
HTML, CSS, JavaScriptをはじめ、Web制作に必要とされる知識で何を知らないかが分かり、自分のスキルをチェックできる「Know it all」を紹介します。 自分の現状を知ることで、次に何をすべきかに役立ちます。
SVGのアニメーションもこれなら簡単!文字や図形を一筆書きのように線で描くSVGアニメーションの作り方
文字や図形、そしてイラストやロゴなどを一筆書きのように、線・ラインで描くSVGのアニメーションが驚くほど簡単に作成できるオンラインツールを紹介します。 下記のように一つずつ順番に描いたり、3つを同時に描いたり、タイミングをずらしたりもできます。
CSSのappearanceを使ったセレクトボックスのカスタマイズ
セレクトボックス(select要素)のデザインを、CSSのappearanceを使ってカスタマイズする方法を調べてみましたのでメモ代わりにまとめておきます。モダンブラウザでは思いのほか、見た目を整えることができるようです。