スポンサーリンク

HTML/CSS/JS サイトの小技

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

一般的な記号など 表示実体コード名称や意味 &&&アンパサンド ¦¦¦破断縦線 µµµマイクロ記号 ‰‰‰パーミル ¤¤¤一般通貨記号 €€€ユーロ記号 ¢¢¢セント記号 £££ポンド記号 ¥¥¥...

ドメイン別 CSS の設定方法

CSS ではドメイン別にスタイルを設定することができます。 これを知っていると何かと便利ですので覚えておきましょう。 多く使われる例としては、自サイト内へのリンクの色と、他サイトへのリンクの色を設定するなどがあります。 応用としてはサイトに動画を貼り付ける際に Youtube と Niconico でサイズなどを設定するなどがあります。 以下のように記述します。 タグ名[属性名*="url"]{ 装飾内容記述 } ではリン...

フォントサイズ表 px・em・%

WEBサイト作成用のフォントサイズ一覧です。 レイアウトを調整する際に御利用下さい。 px em % 8px 0.50em 50% 9px 0.56em 56% 10px 0.63em 62% 11px 0.69em 68% 12px 0.75em 75% 13px 0.81em 81% 14px 0.88em 87% 15px 0.94em 93% 16px 1.00em 100% 17px 1.06em 106% 18px 1.13em 112% 19px 1.19em 118% 20px 1....

Twitter ボタンの設定と設置と幅変更など

2014/2 現在の Twitter ボタンの 設置・設定・幅の変更 などに関して纏めたものです。 筆者のお勧め設定も記載しています。 ボタンの作成と設定 公式サイトでボタンをカスタマイズしコードを取得します。 https://about.twitter.com/ja/resources/buttons 作成するボタンを選択 ボタンの設定 リアルタイムプレビュー 取得コード リンクを共有する:設定内容 URLを共有ページのURLを使う:表示中...

Youtubeの埋め込み動画を自動再生や音量ミュートする方法

Youtubeの埋め込み動画を JavaScript によって自動で再生する方法を紹介します。 音量をミュートで再生するなどのオプション設定も可能です。 Script は HTML 内に書き込んでも良いですが 外部 JavaScriptでも機能します。 Youtube の埋め込み動画を制御する際にいくつかやり方があるのですが、主流は2種類で、 iframe API JavaScript Player API のどちらかを使うのが一般的です。 この内現在広く使われているのは ifram...

Youtubeの埋め込み動画をCSSでウィンドウ幅に合わせて可変させる方法

Youtube の動画をサイトに埋め込む際に CSS だけで動画サイズを自動で可変させ、ウィンドウ幅にプレイヤー幅を合わせる方法を紹介します。 筆者はサイトが重くなることが嫌いなため、極力 CSS と JS の記述を減らしたい人間なので、世間一般に使われている手法とは全く違う方法で制御しています。 独自でやってる手法は CSS にたった一行追記するだけです。 設置例はこの様になります。 当サイトの設置では、最大幅 46...

HTML 5 リファレンスと記述例

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

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

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

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 の最上部に貼り付け、その後にオリジナル設定を記述して下さい。 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fi...
スポンサーリンク
_____________________________________________________________________________________________________
net PV