「CSS」カテゴリーアーカイブ

日本語などの文字を { のような実体参照の数字で表す方法

日本語や、中国語や特殊文字、記号、ドイツ語などのウムラウト文字などをHTML 実態参照文字に変換

実体参照文字への変換器

実体参照文字コンバーター
実態参照と記載する場合もあるが、これは実体参照の誤字。

 
Wordなどでは表示可能だが、HTMLで表記する時にテキストやメモ帳に書くと勝手に「?」に置き換えられちゃったりする。

一例をあげると、中国語の発音を表す記号の、ピンイン(拼音)。
ピンインで「東京」と表記すると、
Dōngjīng
となる。

しかしこれをメモ帳などにコピペすると文字化けして
D?ngj?ng
となってしまう。

それを防ぐには、「ō」や「ī」の部分をテキスト上で、

実体参照文字で記述する必要がある。

例えば、「馄饨」は実体参照文字では、

になる。

実態参照文字への変換器を使って、文字列を特殊参照文字に置き換え、HTMLに記述するようにしておこう。

実態参照文字への変換器が便利

実態参照文字コンバーター

画像バナーや画像リンクをCSSでキラキラ光らせてアニメーション化し目立たせるフラッシーバナー方法

CSSだけで、jQueryもJavaScriptも使わずにバナーをキラキラしたアニメーションで修飾しよう

画像のアニメーションバナーのデモはこちら
 

必要なもの

flashystyle.css

 ↓まとめてダウンロード↓
デモセットのダウンロード

 

記述例

HTML

<head>と</head>の間で、cssとjQueryを呼び出す。

バナーを表示したい場所に、下記の記述を。

これだけ。
「#」は、リンク先を指定すること。banner.pngは任意の画像ファイルに変更可能。

 

フラッシーバナーの解説

・shinySpeed は光のエフェクトが動くスピード
・interval は光のエフェクトが出てこない時間帯の長さ
・{left:’+=630px’},shinySpeed).animate({left:’-120px’} ここは、画像バナーの横幅に合わせて変更すること。

 

flashystyle.css の
.button a
.button a span.shiny
の2か所の width:height:left:top:、のサイズも画像バナーに合わせて変更すること。

画像のアニメーションバナーのデモはこちら

CSSだけでバナーやボタンを,アニメーションでキラキラさせる方法

CSSだけで、jQueryもJavaScriptも使わずにバナーをキラキラしたアニメーションで修飾しよう

アニメーションバナーのデモはこちら
 

必要なもの

button.css
・fontセット font-awesome.zip
DL元:fontawesome.io

 ↓まとめてダウンロード↓
デモセットのダウンロード

 

記述例

HTML

<head>と</head>の間で、cssとフォントを呼び出す。

バナーを表示したい場所に、下記の記述を。

これだけ。
「#」は、リンク先を指定すること。

 
青いバナー、キラキラ、矢印が動くバナーはこんな感じで↓

青いバナー、キラキラ、矢印が動くバナーのデモはこちら。
 

バナー修飾のクラス(class)解説

クラス名(記述) 説明
btn-yuya 基本クラス(色指定しなければ緑)
is-red 赤色バナー
is-blue 青色バナー
is-black 黒色バナー
is-reflection キラキラ
is-trembling バナー右の矢印を動かす
is-bounce バウンド
is-purun ぽよぽよ動く

赤色で、全てのクラスを指定して動かすアニメーションバナーのデモはこちら

 

カスタマイズ

バナーのサイズ、フォントの大きさ、バナーの色やグラデーションをカスタマイズするには、 button.css の各クラスの部分をカスタマイズすればOK。