株式会社オンズのブログ記事一覧
タグ "HTML" を含む投稿を表示中:77件
-
【CSS3】スタイルシートで指定できるカラーネーム×147色一覧(+1色) ウェブサイト制作時の色の指定について。 よく使う16進数表記と共に、現在モダンブラウザで使用できるカラーネームをすべてリストアップして紹介します。 「CSS Level 3」では147のカラーネームが策定されています。しかし、中には同じ色を... 【CSS3】スタイルシートで指定できるカラーネーム×147色一覧(+1色)続きを読む →
-
【HTML】フォーム入力時の autocomplete 属性に指定できる値まとめ フォーム入力時に、一度入力したユーザー名やパスワード、電話番号などを記憶して、次の入力時に自動で補完してくれる機能が『autocomplete』です。 「自動補完機能」などとも呼ばれますね。 今日はその『autocomplete』で指定でき... 【HTML】フォーム入力時の autocomplete 属性に指定できる値まとめ続きを読む →
-
【HTML5 + jQuery】音声ファイルの再生/停止を制御するボタン ウェブサイトで音声ファイルを再生したい場合、HTML5で単純にaudioタグを使うだけで実現できますが、今回はさらにJQueryを利用して再生と停止をコントロールする方法を紹介します。 まずはHTMLの記述です。 <audio src... 【HTML5 + jQuery】音声ファイルの再生/停止を制御するボタン続きを読む →
-
【コピペ可能】半角カタカナ一覧 半角カタカナ 一覧 お手持ちのデバイスで半角カタカナの入力が難しい場合に、以下の表からコピー&ペーストしてご利用ください。 ア行 ア イ ウ エ オ ア行(拗音) ァ ィ ゥ ェ ォ カ行 カ キ ク ケ コ カ行(濁音) ガ ギ グ... 【コピペ可能】半角カタカナ一覧続きを読む →
-
HTML の 〜 内に書くタグの順番にも気を遣ってみた。 今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<h... HTML の 〜 内に書くタグの順番にも気を遣ってみた。続きを読む →
-
【jQuery】超簡単に実装できるモーダル・ウィンドウ[Remodal]の使い方 今日は超簡単にポップアップ・ウィンドウを実装できる[Remodal]を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/... 【jQuery】超簡単に実装できるモーダル・ウィンドウ[Remodal]の使い方続きを読む →
-
【WordPress】投稿で「ruby」「rt」「rp」各タグを使えるようにする方法。 どういうことでしょう。 コレ、さっき気づきました。 WordPressのデフォルトの仕様では、投稿および固定ページの編集時に <ruby>、<rt>、<rp> 各タグが使えないんですね。 編集画面で<... 【WordPress】投稿で「ruby」「rt」「rp」各タグを使えるようにする方法。続きを読む →
-
【jQuery】ポリゴン状の背景を描画する[Geometryangle]の使い方 斬新なポリゴン・スタイルの背景を描画する jQuery プラグイン[Geometryangle]を紹介します。 まずはサンプルをご覧ください。 [Geometryangle]:実装サンプル 指定したボックス要素全体に幾何学的な模様を描画し、... 【jQuery】ポリゴン状の背景を描画する[Geometryangle]の使い方続きを読む →
-
【HTML5】address 要素 address 要素は、直近の祖先にあたる article もしくは body 要素に対する連絡先情報を表します。それが body 要素なら、その連絡先情報は、ドキュメント全体に適用されるものとなります。 「address」という単語は日本... 【HTML5】address 要素続きを読む →
-
【CSS3】親要素の大きさに依存して画像の表示方法を変える[object-fit]プロパティの使い方。 CSS3から新たに使えるようになった「object-fit」プロパティについて解説します。 聞き馴れない名前のプロパティかと思いますが、主に画像のアスペクト比に作用して、表示領域に対しての画像の大きさを変更する場合に使います。 ……文章の説... 【CSS3】親要素の大きさに依存して画像の表示方法を変える[object-fit]プロパティの使い方。続きを読む →
-
HTML5の独自データ属性にCSSを効かせる方法。 HTML5から「独自データ属性」または「カスタムデータ属性」と呼ばれる新しい仕様が追加されました。 この機能により、任意のhtmlの要素に接頭語「data-」で始まる属性値を付与することで、プライベートな値を設定できるようになりました。 一... HTML5の独自データ属性にCSSを効かせる方法。続きを読む →
-
【HTML5】ドキュメント宣言は大文字「!DOCTYPE html」か小文字「!doctype html」か、どちらが正しいの? 結論 HTML5のドキュメント宣言は <!DOCTYPE html> という形式で記述します。 仕様上、大文字・小文字の区別はありませんが、一般的には、大文字で「DOCTYPE」を記述するのが通例です。 詳細説明 HTML文書で... 【HTML5】ドキュメント宣言は大文字「!DOCTYPE html」か小文字「!doctype html」か、どちらが正しいの?続きを読む →
-
【.htaccess】拡張子が「.html」のファイルでPHPを動かす方法。 基本的に、PHPを動かすにはファイルの拡張子が「.php」でなくてはいけません。 しかし状況により、拡張子が「.html」のファイルでもPHPを動かしたいことがあります。 単純にファイルの拡張子を「.html」から「.php」に置き換えれば... 【.htaccess】拡張子が「.html」のファイルでPHPを動かす方法。続きを読む →
-
[html5.js]の導入を辞めました。 [html5.js]とは? そもそも[html5.js]とは何か? 一言で説明すると「Internet Explorer 8 以前のブラウザでも HTML5 に対応できるようになるスクリプト」です。 Microsoft が開発している[In... [html5.js]の導入を辞めました。続きを読む →
-
【最新版】HTML Living Standard で規定されている全要素 ジワジワと HTML5 が普及しつつある今日この頃。皆様いかがお過ごしでしょうか。 策定が進められている HTML5 ですが、先日、2014年7月31日に W3C により 最新の仕様が公開されました。 そこで改めて全要素を一覧にしてまとめた... 【最新版】HTML Living Standard で規定されている全要素続きを読む →
-
【HTML5】 p 要素 <p> タグは、文書がひとつの段落(パラグラフ)であることを表す際に使用します。 段落よりもふさわしい要素がある場合には使用するべきではありません。例えば、以下の使用例は誤りではありませんが… <section> &... 【HTML5】 p 要素続きを読む →
-
【HTML5】menu 要素 HTML4 では非推奨だった <menu> タグは、HTML5 から新たに追加され、操作メニューを作成する際に使用します。 サブメニューをメインメニューで入れ子にして、階層メニューにすることもでき、他のタグとの組み合わせによるユ... 【HTML5】menu 要素続きを読む →
-
【HTML5】command 要素 HTML5 から新たに追加された <command> タグは、操作メニューの各コマンドを指定する際に使用します。 <menu>~</menu> で全体が操作メニューであることを定義して、その子要素としてを... 【HTML5】command 要素続きを読む →
-
【HTML5】details 要素 <details>タグは、ユーザーが追加で得ることのできる備考や操作手段などの詳細情報であることを示す際に使用します。 もし、<details>~</details>の子要素として <summary... 【HTML5】details 要素続きを読む →
-
【html 5】video タグを用いて背景全面に動画を再生する方法 最近のウェブデザインのトレンドで背景全面に大胆に動画を配置するケースがよく見られるようになってきました。 つい先日もjQueryを使ってYouTubeの動画を背景として使うプラグイン[jQuery Tubular]を紹介しました。今日はjQ... 【html 5】video タグを用いて背景全面に動画を再生する方法続きを読む →
-
【HTML5】ins 要素 <ins>タグは、追加された部分であることを示す際に使用します。 cite属性には変更について説明する文書がある場合にそのURLを指定します。 cite属性に指定するURLの文書が、例えば、会議の議事録のような長い文書になってい... 【HTML5】ins 要素続きを読む →
-
【HTML5】blockquote要素 <blockquote>タグは、他の情報源からの引用・転載セクションであることを表す際に使用します。 cite 属性には引用元のアドレスが存在する場合にそのURLを指定します。 cite 属性が存在するなら、ユーザーエージェント... 【HTML5】blockquote要素続きを読む →
-
【HTML5】pre 要素 pre要素は、その内容が整形済みのテキストであることを表します。 [pre]とは「preformatted text」の略で、日本語では「フォーマット(整形)済みのテキスト」という意味になります。 読みやすいように半角スペースや改行などで形... 【HTML5】pre 要素続きを読む →
-
【HTML5】nav 要素 nav要素は、HTML5から新たに追加された要素で、ナビゲーションであることを示す際に使用します。 ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。 他のページにリンクした箇所のすべてを<na... 【HTML5】nav 要素続きを読む →