HTML / CSS / JS

Youtube の埋め込み動画をアスペクト比を保ってでウィンドウ幅に合わせて可変させる方法

Youtube の埋め込み動画をアスペクト比を保ってでウィンドウ幅に合わせて可変させる方法
2018年現在の Youtube の仕様と、アスペクト比 4:3 の動画をほぼ見かけることが無くなったこともあり、16:9 専用の内容に記事を訂正しました。 Youtube の動画をサイトに埋め込む際に CSS だけで動画サイズを自動で可変させ、ウィンドウ幅にプレイヤー幅を合わせる方法を紹介します。 設置例はこの様になります。 では設置方法を紹介します。 Youtube の共有タグをコピーしたものを、ブロック要素一つで囲み... 記事を見る >>

HTML の記号や特殊文字の「実体・文字コード・名称」一覧

HTML の記号や特殊文字の「実体・文字コード・名称」一覧
自分用というのもありますが、ブログやホームページで文章を書いてる人であれば、記号はそのまま入力せずに実体で入力しなければならないことはご存知かと思います。 特にサイトのレイアウトも自分で行う人は実体入力を正確に行わなければ正常なページを作成できません。 頻繁に使う記号は覚えられますが、タグの入力で使わないような記号は毎回調べることになってしまいます。 そのようなときにこのリストを利用していただけれ... 記事を見る >>

CSS をドメイン別にスタイル設定する方法

CSS をドメイン別にスタイル設定する方法
CSS ではドメイン別にスタイルを設定することができます。 これを知っていると何かと便利ですので覚えておきましょう。 多く使われる例としては、自サイト内へのリンクの色と、他サイトへのリンクの色を設定するなどがあります。 応用としてはサイトに動画を貼り付ける際に Youtube と Niconico でサイズなどを設定するなどがあります。 例としてリンク先によってテキストの色を変える設定を説明します。 「http://helpsu... 記事を見る >>

Youtube の埋め込み動画を自動再生やループ再生やプレイリストを再生する方法

Youtube の埋め込み動画を自動再生やループ再生やプレイリストを再生する方法
サイトに Youtube の埋め込みプレイヤーを貼り付ける方法は二つあります。 一般的なのは Youtube の再生ページから貼り付けコードを取得したときに使われる、iframe の HTML5 のコードです。 他に Java Script Player API という様々なパラメータを使える貼り付け方があるのですが、こちらはコードが長く一般的ではありません。 大半のパラメータは iframe HTML5 のプレイヤーで使用できるので、こちらのタイプでの設定方法を紹... 記事を見る >>

Facebook のシェア画像のキャッシュを削除する

Facebook のシェア画像のキャッシュを削除する
サイトを運営している方は大抵 Facebook などの「いいね」「シェア」ボタンを設置しています。 Facebook の「いいね」「シェア」ボタンを設置している際に、訪問者がシェアなどをした場合にサイト名や URL と一緒に画像も公開されます。 この画像を指定するタグは <head>~</head> 内に以下のように設定します。 <meta property="og:image" content="画像のURL"> このように... 記事を見る >>

HTML5 リファレンスと記述例

HTML5 リファレンスと記述例
近年のスマートフォンの普及と Windows XP のサポート終了間近ということが影響し、これからのサイト作成の主流となる HTML 5 + CSS 3 というスタイルのサイトが増えてきました。 またこれまでの主流だった HTML 4 に代わり今後の主流と思われてきた XHTML が活動終了になったことも、HTML 5 に移行する後押しになったとも思われます。 これからサイト作成を覚えようという方は HTML 5 + CSS 3 で覚えましょう。 HTML 5 は... 記事を見る >>

フォントサイズの指定方法 px・em・% はもう古い

フォントサイズの指定方法 px・em・% はもう古い
これまではフォントサイズの指定といえば「px」「em」「%」の3種類が使われてきました。 また様々なブラウザに対応するために html に px 指定し、それ以降の要素に % 指定するという方法が一般的でした。 px 指定 最も古くから使われている指定方法で、近年でもデザイン重視のサイトなどでは使われていましたが、ユーザビリティにおいて問題がありました。 以前から IE8 までの場合文字の大きさ設定出来ない問題から、知... 記事を見る >>

XHTMLとHTMLの廃止・非推奨タグリスト

XHTMLとHTMLの廃止・非推奨タグリスト
HTML4.0/4.01以降の非推奨タグと、XHTMLで廃止されたタグと非推奨タグを纏めたものです。 一時期は今後 XHTML 主流とされてきましたが、XHTML の活動停止宣言とスマートフォンの HTML5+CSS3 の採用により、今後は HTML5 が主流となる見込みです。 近い将来のことを考慮し今後は HTML5 の規格に合わせたサイト作成をお勧めします。 HTML4.0/4.01 HTML4.0/4.01以降では、色・フォント・配置といったタグや属性の使用を推奨して... 記事を見る >>

CSS リセット

CSS リセット
CSS リセットとは、ブラウザ毎に違うデフォルトスタイルやレンタルサーバーなどで独自に設定されてるスタイルを無効にし、閲覧者の環境を問わず共通のレイアウトで表示するためのものです。 従ってリセット後に全ての要素を自分好みで設定する必要があります。 以下の記述は、筆者が作成し使用している CSS リセットです。 ご利用の際は CSS の最上部に貼り付け、その後にオリジナル設定を記述して下さい。 下7行の px や色... 記事を見る >>