【HTML5 + jQuery】音声ファイルの再生／停止を制御するボタン ウェブサイトで音声ファイルを再生したい場合、HTML5で単純にaudioタグを使うだけで実現できますが、今回はさらにJQueryを利用して再生と停止をコントロールする方法を紹介します。 まずはHTMLの記述です。 <audio src="sample.mp3" id="audio" pause="pause" l... 【HTML5 + jQuery】音声ファイルの再生／停止を制御するボタン続きを読む →- 半角カタカナ一覧 お手持ちのデバイスにて、半角カタカナの入力が難しい場合に、以下の表からコピー＆ペーストしてご利用ください。 ア行 ｱ ｲ ｳ ｴ ｵ ア行（拗音） ｧ ｨ ｩ ｪ ｫ カ行 ｶ ｷ ｸ ｹ ｺ カ行（濁音） ｶﾞ ｷﾞ ｸﾞ ｹﾞ ｺﾞ サ行 ｻ ｼ ｽ ｾ ｿ サ行（濁音） ｻﾞ ｼﾞ ｽﾞ ｾﾞ ｿﾞ タ行 ﾀ ﾁ... 半角カタカナ一覧続きを読む →
HTML の 〜 内に書くタグの順番にも気を遣ってみた。 今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が... HTML の 〜 内に書くタグの順番にも気を遣ってみた。続きを読む →- 【jQuery】超簡単に実装できるモーダル・ウィンドウ［Remodal］の使い方 今日は超簡単にポップアップ・ウィンドウを実装できる［Remodal］を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/ ファイル容量が軽いため挙動も早く、レスポンシブ対応で、アニメーション部分はCS... 【jQuery】超簡単に実装できるモーダル・ウィンドウ［Remodal］の使い方続きを読む →
【WordPress】投稿で「ruby」「rt」「rp」各タグを使えるようにする方法。 どういうことでしょう。 コレ、さっき気づきました。 WordPressのデフォルトの仕様では、投稿および固定ページの編集時に <ruby>、<rt>、<rp> 各タグが使えないんですね。 編集画面で<ruby>、<rt>、<rp>を記述して記事を保... 【WordPress】投稿で「ruby」「rt」「rp」各タグを使えるようにする方法。続きを読む →
【jQuery】ポリゴン状の背景を描画する［Geometryangle］の使い方 斬新なポリゴン・スタイルの背景を描画する jQuery プラグイン［Geometryangle］を紹介します。 まずはサンプルをご覧ください。 ［Geometryangle］：実装サンプル 指定したボックス要素全体に幾何学的な模様を描画し、さらにマウスカーソルの位置に反応してインタラクティブに動きます。 似たようなjQ... 【jQuery】ポリゴン状の背景を描画する［Geometryangle］の使い方続きを読む →
【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。 CSS3から新たに使えるようになった「object-fit」プロパティについて解説します。 聞き馴れない名前のプロパティかと思いますが、主に画像のアスペクト比に作用して、表示領域に対しての画像の大きさを変更する場合に使います。 ……文章の説明だけでは理解しにくいと思うので、実際に「object-fit」を使ったサンプル... 【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。続きを読む →
HTML5の独自データ属性にCSSを効かせる方法。 HTML5から「独自データ属性」または「カスタムデータ属性」と呼ばれる新しい仕様が追加されました。 この機能により、任意のhtmlの要素に接頭語「data-」で始まる属性値を付与することで、プライベートな値を設定できるようになりました。 一例として以下のようなHTMLが記述できるようになっています。 <ul>... HTML5の独自データ属性にCSSを効かせる方法。続きを読む →- 【HTML5】ドキュメント宣言は大文字「!DOCTYPE html」か小文字「!doctype html」か、どちらが正しいの？ HTML文書では「ドキュメント宣言」といって、冒頭に特定の記述を挿入するルールがあります。 例えばHTML4.01では次のように記述するのが一般的です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st... 【HTML5】ドキュメント宣言は大文字「!DOCTYPE html」か小文字「!doctype html」か、どちらが正しいの？続きを読む →
- 【.htaccess】拡張子が「.html」のファイルでPHPを動かす方法。 基本的に、PHPを動かすにはファイルの拡張子が「.php」でなくてはいけません。 しかし状況により、拡張子が「.html」のファイルでもPHPを動かしたいことがあります。 単純にファイルの拡張子を「.html」から「.php」に置き換えれば済むハナシですが、URLを変更したくない場合は、［.htaccess］を使って解... 【.htaccess】拡張子が「.html」のファイルでPHPを動かす方法。続きを読む →
［html5.js］の導入を辞めました。 ［html5.js］とは？ そもそも［html5.js］とは何か？ 一言で説明すると「Internet Explorer 8 以前のブラウザでも HTML5 に対応できるようになるスクリプト」です。 Microsoft が開発している［Internet Explorer］は、そこそこ普及しているにも関わらず、エラーやセ... ［html5.js］の導入を辞めました。続きを読む →- 最新版：HTML5 で規定されている全要素 ジワジワと HTML5 が普及しつつある今日この頃。皆様いかがお過ごしでしょうか。 策定が進められている HTML5 ですが、先日、7月31日に W3C により 最新の仕様が公開されました。 そこで改めて全要素を一覧にしてまとめたので、ぜひご活用していただければと思います。 W3C : HTML5 ちなみに HTML5... 最新版：HTML5 で規定されている全要素続きを読む →
- 【HTML5】 p 要素。 <p> タグは、文書がひとつの段落（パラグラフ）であることを表す際に使用します。 段落よりもふさわしい要素がある場合には使用するべきではありません。例えば、以下の使用例は誤りではありませんが… <section> <p>最終更新日: 2010-04-23</p> <... 【HTML5】 p 要素。続きを読む →
- 【HTML5】menu 要素。 HTML4 では非推奨だった <menu> タグは、HTML5 から新たに追加され、操作メニューを作成する際に使用します。 サブメニューをメインメニューで入れ子にして、階層メニューにすることもでき、他のタグとの組み合わせによるユーザーメニューの作成にも役立ちます。 属性 type属性 type属性は、宣言す... 【HTML5】menu 要素。続きを読む →
- 【HTML5】command 要素。 HTML5 から新たに追加された <command> タグは、操作メニューの各コマンドを指定する際に使用します。 <menu>～</menu> で全体が操作メニューであることを定義して、その子要素としてを配置してユーザーが呼び出すことのできる各コマンドを指定します。 type属性 t... 【HTML5】command 要素。続きを読む →
- 【HTML5】details 要素 <details>タグは、ユーザーが追加で得ることのできる備考や操作手段などの詳細情報であることを示す際に使用します。 もし、<details>～</details>の子要素として <summary> が存在する場合には、<summary>～<<s... 【HTML5】details 要素続きを読む →