Web Designing Portal

Webクリエイターのための、
Webデザイン・Web情報のポータルサイト

Column
Clips: 65

プログラミング

アクセシビリティ対応が捗る自動チェックツール「aXe」って知ってる?

Date : 2017.05.02

最近作成したWebサイトをデザインしたとき、特別なニーズや障害のある人にとってサイトがアクセシブルになるためにどのくらいの時間と労力を使いましたか。たぶん、多くの答えは「なにもしていない」だと思います。しかし、インターネットユーザーの中には、色を区別したり、テキストを読んだり、マウスを使ったり、あるいは、単にWebサイト構造が複雑でナビゲートするのに問題があるために、サイトのアクセスに苦労する人がたくさんいることを否定する人はいないと思います。

アクセシビリティ対応が捗る自動チェックツール「aXe」って知ってる?
open in a new window

Google Fontsの日本語フォント「Noto Fonts」の使い方

Date : 2017.04.27

このページではGoogle Fontsの中でも大注目の日本語フォント、Noto Fontsの使い方を解説します。 合わせて日本語のWebフォント使用上の注意点もまとめました。 Webフォントの仕組みについては「Web Fontの使い方とGoogle Fontsのオススメフォント 10選」でまとめました。「Web Fontって何?」方はざっと目を通しておいてください。

Google Fontsの日本語フォント「Noto Fonts」の使い方
open in a new window

CSSボタンを演出する155個のHoverエフェクトまとめ

Date : 2017.04.26

CSSのみでもボタンにおもしろい動きを演出することができるようになったのですね。数年前まではjQueryを使用しないといけなかったのが、CSSだけでエフェクトをつけられるのはとても効率的になりました。 そこで今回は、HTMLとCSSをコピペして演出できるHoverエフェクトを155個ご紹介します。あなたのWebサイトのデザインに合うものを見つけ出して、ぜひ実装してみてください。

CSSボタンを演出する155個のHoverエフェクトまとめ
open in a new window

HTML の 〜 内に書くタグの順番にも気を遣いましょう。

Date : 2017.04.25

今アナタがご覧になっている、このオンズのウェブサイトでは、読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は〜タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日(2016年1月20日)現在のオンズのウェブサイトの〜タグは次のように記載されています。

HTML の <head>〜</head> 内に書くタグの順番にも気を遣いましょう。
open in a new window

CSSアニメーションは確実に進化している!キーフレームを使ったCSSアニメーションの実装ポイントまとめ

Date : 2017.04.24

CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。

CSSアニメーションは確実に進化している!キーフレームを使ったCSSアニメーションの実装ポイントまとめ
open in a new window

CSSの「box-shadow」と「filter:drop-shadow」の違いを覚えたらちょっとテンション上がった

Date : 2017.04.21

要素に影を付ける時はbox-shadow、テキストに影を付ける時はtext-shadowを使いますよね。むしろ、この2つ以外に影を付けるプロパティなんてあったっけ...?

CSSの「box-shadow」と「filter:drop-shadow」の違いを覚えたらちょっとテンション上がった
open in a new window

Flexboxのプロパティ紹介

Date : 2017.04.21

flexboxの仕様を見やすい図とともにわかりやすく説明しています。 1 Flexコンテナ 1.1 flex-direction -Flexアイテムの向きと方向 1.2 flex-wrap -Flexアイテムの折り返し ...

Flexboxのプロパティ紹介
open in a new window

イメージスライダーを魅力的に!コピペ実装できるHTMLスニペット24個まとめ

Date : 2017.04.20

ウェブサイトでも使われることが多く、写真イメージをより魅力的に見せることができるイメージスライダー。ヒーローヘッダーとして利用されることも多く、イメージスライダーを効果的に利用することで、ウェブサイトを訪れたユーザーにより魅力的にコンテンツを見せることもできます。

イメージスライダーを魅力的に!コピペ実装できるHTMLスニペット24個まとめ
open in a new window

新人コーダーに伝えたい、きれいなCSSを書くための4つの習慣

Date : 2017.04.17

この春、CSSコーディングの仕事を始めた新人さんへ、「きれいなCSS」を書くためのガイドラインをお届け。

新人コーダーに伝えたい、きれいなCSSを書くための4つの習慣
open in a new window

[JS]文字を楽しく見せる、カーブ状に簡単に配置できるスクリプト -Arctext.js

Date : 2017.04.14

CSS3だけで文字を回転させたりカーブ状のパスに沿わせるのは非常に複雑です。文字を簡単にカーブ状に配置したり、またアニメーションを伴うこともできるjQueryのプラグインを紹介します。

[JS]文字を楽しく見せる、カーブ状に簡単に配置できるスクリプト -Arctext.js
open in a new window

WAI-ARIAを活用したフロントエンド実装 第1回 role属性、aria属性の基礎知識

Date : 2017.04.12

Webコンテンツアクセシビリティを確保するさまざまな仕様のうち、WebサイトやWebアプリケーションで活用できるrole属性とaria属性について取り上げます。まず、両者の基礎的な知識から解説します。

WAI-ARIAを活用したフロントエンド実装 第1回 role属性、aria属性の基礎知識
open in a new window

Web業界は進化が速い!自分がHTML, CSS, JavaScriptで何を知らないか、スキルをチェックができる -Know it all

Date : 2017.04.05

HTML, CSS, JavaScriptをはじめ、Web制作に必要とされる知識で何を知らないかが分かり、自分のスキルをチェックできる「Know it all」を紹介します。 自分の現状を知ることで、次に何をすべきかに役立ちます。

Web業界は進化が速い!自分がHTML, CSS, JavaScriptで何を知らないか、スキルをチェックができる -Know it all
open in a new window

SVGのアニメーションもこれなら簡単!文字や図形を一筆書きのように線で描くSVGアニメーションの作り方

Date : 2017.04.05

文字や図形、そしてイラストやロゴなどを一筆書きのように、線・ラインで描くSVGのアニメーションが驚くほど簡単に作成できるオンラインツールを紹介します。 下記のように一つずつ順番に描いたり、3つを同時に描いたり、タイミングをずらしたりもできます。

SVGのアニメーションもこれなら簡単!文字や図形を一筆書きのように線で描くSVGアニメーションの作り方
open in a new window

CSSのappearanceを使ったセレクトボックスのカスタマイズ

Date : 2017.03.03

セレクトボックス(select要素)のデザインを、CSSのappearanceを使ってカスタマイズする方法を調べてみましたのでメモ代わりにまとめておきます。モダンブラウザでは思いのほか、見た目を整えることができるようです。

CSSのappearanceを使ったセレクトボックスのカスタマイズ
open in a new window

当コンテンツは、ウェブにおける公共的な技術の向上を目的とし、著作権法第32条で定められた通り、一般に公表された著作物を出所を明示して引用しています。掲載に関するお問い合わせはこちらにご連絡ください。

Category

Page top