IcoMoonの使い方

IcoMoonはフォントファイルとCSSをダウンロードして使用するタイプのアイコンフォントです。Font AwesomeのようにCDNの読み込みはありません。デ…

アイコンフォント

CSS疑似要素のcontentプロパティにcounter関数で連番を指定

デモページはこちら CSS疑似要素のcontentプロパティに、CSSのcounter関数で連番を指定します。JavaScriptは使用せず、CSSのみで実装し…

CSSロードアニメーションの実装【円の一部分の色を回転】

デモページはこちら 円の一部分の色が回転する動作のCSSロードアニメーションを実装します。ローダーの見た目は全てCSSで実装するため、svgは使用しません。 h…

CSSアニメーション

inline要素のマージン

デモページはこちら inline要素にCSSでマージンを設定した場合の挙動です。以下のhtml構造のspanタグでテストします。 inline要素に左右のマージ…

Twitterボタンの設置とカスタマイズ

デモページはこちら Twitterボタンの設置とカスタマイズのまとめです。ボタンのソースコードは以下の公式サイトから生成できます。ただし、jsの読み込みが必要に…

Twitter

コーディング時のIE11のバグ

コーディング時に発生したIE11のバグのまとめです。主にflexboxで発生します。 ■ display: flexの要素にmin-heightを指定した場合、…

IE11

flexboxでCSSのwidthプロパティにcalcを利用

769px以上：4カラム・768px以下：3カラム flexboxでCSSのwidthプロパティにcalcを利用します。以下のhtml構造でテストします。デモペ…

マウスオーバー時にCSSのtransitionプロパティを実装する場合の注意点

デモページはこちら マウスオーバー時にCSSのtransitionプロパティを実装する場合の注意点です。以下のhtml構造でテストします。 .photo01 a…

CSS疑似要素のcontentプロパティにjQueryで設定したカスタムデータ属性の値を指定

デモページはこちら CSS疑似要素のcontentプロパティにjQueryで設定したカスタムデータ属性の値を指定します。以下のhtml構造でテストします。デモペ…

CSSのtransformプロパティによるsvgの反転

デモページはこちら CSSのtransformプロパティでsvgを反転します。以下のsvgをオリジナルとし、複製してidを付与してCSSを適用します。svg以外…

CSSプロパティをショートハンドで記述

CSSプロパティをショートハンドで記述します。プロパティによって記述順や省略可・不可のルールがあります。 ■ fontプロパティfont-style・font-…

CSSのflexbox使用時の注意点

デモページはこちら CSSのflexbox使用時の注意点をまとめました。flexboxは使い方によってレイアウトに表示崩れが発生するパターンがあります。 fle…

CSSのfilterプロパティの使用例

デモページはこちら CSSのfilterプロパティの使用例をまとめました。filterプロパティはIE11でサポート外ですが、種類が豊富で実装が簡単です。 ■ …

Google map

WAI-ARIAのaria-current属性で現在位置を指定

デモページはこちら ナビゲーションメニューにWAI-ARIAのaria-current属性で現在位置を指定します。jQueryでページのURLを判別し、対象のa…

WAI-ARIA

YouTubeの動画からサムネイル画像を取得

YouTubeの動画からサムネイル画像を取得します。取得には半角英数11桁の動画IDが必要です。サムネイル画像は下記の通りサイズ別に分かれていますが、最大サイズ…

Youtube

metaタグのformat-detectionで自動リンクを無効化

デモページはこちら metaタグのformat-detectionを設定して、スマホのブラウザで電話番号、メールアドレス、住所の表記がリンクに自動変換されるのを…

AndroidiOS

animation-fill-modeの指定について

animation-fill-modeプロパティはCSSアニメーション実行後、対象要素にどのようなスタイルを適用するか設定します。animation-fill-…

CSSアニメーション

viewportの指定について

レスポンシブでサイトを制作する場合、HTMLでviewport、CSSでメディアクエリ、両方を設定する必要があります。CSSでメディアクエリを記述しても、vie…

iOS

Font Awesomeの使い方

Font Awesomeの公式サイトで使用したいアイコンフォントを選びます。Iconsのページでアイコンフォントの一覧が確認できます。有料版と無料版があり有料版…

アイコンフォント

Google Fontsの使い方

Google Fontsのサイトで使用したいフォントを全て選択します。複数のフォントも一度に読み込めます。Google Fonts Embedタブの<li…

Google Fonts

マウスオーバー時にCSSのみでフェードイン・フェードアウトを実装する場合の注意点

マウスオーバー時にCSSのみでフェードイン・フェードアウトを実装する場合、display: none;で非表示、マウスオーバー時にdisplay: block;…

CSSアニメーション

iOS Safariのツールバーと表示エリアの挙動

iOS Safariで表示される画面下部のツールバーは、下にスクロールすると非表示になります。正確には上部のアドレスバーが小さくなり、下部のツールバーが消えます…

iOS

CSSアニメーションで画像を横スクロール無限ループ

CSSアニメーションで画像を横スクロール無限ループさせます。まずhtmlのコードです。同じ画像を2つ配置して、クラス名loop_wrapのdivタグで囲います。…

CSSアニメーション

rubyタグでテキストにルビ（ふりがな）を振る

rubyタグとrtタグの二つを使ってテキストにルビ（ふりがな）を振ります。rtタグはふりがな、rubyタグはテキストとふりがな（rtタグを含む）の両方を囲います…

iOSのブラウザでセレクトボックスの文字を省略せずに表示

iOSのブラウザではセレクトボックスに長いテキストの選択肢がある場合、途中で省略して表示されます。省略記号「…」が付いて選択肢が最後まで読めません。これを全て表…

iOS