CSSのcontentで絵文字(emoji)を使う

ホームページを作っているときや、ブログを書いているときに、アイキャッチ、またはアイコンとして、ちょっとした装飾をリスト(UL)や定義文(DL)に追加したい、ということは割とよくあることだと思います。
でもそのために画像を用意するのはちょっと面倒くさい、ということも割とよくあることだと思います。

そこで、そのアイキャッチ・アイコンに、絵文字を使う、というのはどうでしょうか。

絵文字(emoji)は2009年3月にユニコードコンソーシアムに提案され、その一部がUnicode 6.0.0に収録されています。
以下の環境であれば、文字化けすることなく、絵文字が表示されます(Wikipediaからの引用)。つまり、実質的に絵文字が表示されない環境は無い、と言って差し支え無いです。


💻 パソコン

  • Microsoft Windows:Windows 7 にて Unicode 6.0 の絵文字に対応した。Windows 8 より絵文字のソフトウェアキーボードが搭載された。Windows 8.1からカラー絵文字が実装され、Windows 上でもカラーの絵文字が利用できるようになった。Windows 10では各種アップデートで最新の絵文字に対応している。
  • Apple macOS:Mac OS X Lion以降で Unicode 6.0 の絵文字に対応している。

📱 モバイル端末

  • Google Android:2012年6月リリースのAndroid 4.1 で Unicode 6.0 の絵文字に対応、2013年10月リリースの Android 4.4 からはカラー絵文字になる。その後もAndroidのアップデートでUnicodeに追加収録された新たな絵文字に対応しており、2017年8月リリースの Android 8.0 では Unicode 10.0 の絵文字に対応している。
  • Apple iOS:iOS 4 より絵文字に対応しているが、iOS 6 より、Unicode 6.0 での絵文字に対応。その後もメジャーアップデートでUnicodeに追加収録された新たな絵文字に対応する。

絵文字を文章に入力する方法

HTMLで絵文字を文章に入力する方法は、2通りあります。

  1. 「😜」のように、直接絵文字を書く。Windows PCでの出し方は、キーボードから[Windows]+[.(ピリオド)]です。
  2. HTMLの文字参照(実体参照)で入力する。「<」を&lt;と書く方法と同じです。

Windows 7はEOLを迎え、また、Windows 10であれば標準のメモ帳ですらUnicodeに対応しているので、主要なテキストエディタはUnicodeに対応している…はずです。
つまり、日本語や、機種依存文字である丸数字(①など)を直接HTMLソースコードに入力するのと同じで、絵文字を直接書いても問題ありません

それでも、ちょっと気持ちが悪い、という場合は、文字参照を使うと良いでしょう。
絵文字の実体参照の一覧はUnicodeのサイトにあります。

入力の方法は、「&#x + コード」です。
例えば、一番上にあるU+1F600(😀)であれば、&#x1F600で😀が表示されます。


CSSのcontentで絵文字(emoji)を使う

CSSのcontentの値で絵文字を文字参照で使いたい場合、上記のHTMLと同じように&#x1F600「&#x + コード」…ではうまくいきません。
「\0 + コード」です。例えば、😀は、「content: "\01F600";」のように記述します。

以下に、いくつかサンプルコードを記載しておきます。


test
<div id="sample01">test</div>
<style type="text/css">
#sample01:before {
content: "\01F600";
padding-right: 3px;}
</style>


いちご
いちごの説明
みかん
みかんの説明
<div id="sample02">
<dl>
<dt>いちご</dt>
<dd>いちごの説明</dd>
<dt>みかん</dt>
<dd>みかんの説明</dd>
</div>
<style type="text/css">
#sample02 dl dt:first-child:before {
	content: "\01F353";
	padding-right: 3px;
	color: #666;
}
#sample02 dl dt:before {
	content: "\01F34A";
	padding-right: 3px;
	color: #666;
}
</style>


お知らせ

過去記事の見直しに伴い、投稿日付がぶれています。
適宜修正しますので、日付はとりあえず無視でお願いします。

ピリオドの彼方に(http://period.ek-pro.com/)
雑文中心のブログ。

イイラボ(http://labo.ek-pro.com/)
ウェブサイトを構築するにあたっての知識を集めたウェブサイト。

ピカリンク(http://pikalink.net/)
リンク用HTMLを自動的に生成するWEBサービス。


可変BOXで上下中央揃えをするHTMLとCSS(flexbox使用)

いくつか嘘記事に惑わされたり惑わされなかったりしたものの、stack overflow の Flexbox: center horizontally and vertically 記事にもある通り、以下が正しく、かつ、簡単な上下中央揃えです。

■CSS

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;

}
.item {
text-align: center;
}


■HTML
<div class="container">
<div class="item">
<p>
<img src="sample.png">
</p>
<p>これはサンプルテキストです</p>
</div>
</div>


ファイル末尾の連続する改行を取り除くサンプルスクリプト

ファイルの末尾の空改行をすべて削除し、上書き保存するサンプルスクリプトです。

open(DATA,"<$tmpfilename") or die $!;
my $content = do {local $/; <DATA>};
close(DATA);

while (1) {
if (substr($content,-1) ne "\n"){
last;
}
chomp ($content);
}

open(DATA,">$tmpfilename") or die $!;
print DATA $content;
close(DATA);


DQFAQの再構築にあたって、ファイルの末尾に改行がついてたり、ついていなかったり、という不統一を修正する過程で、探してもなかなかサンプルスクリプトがなかったのでメモ。


jQuery 3 でfadeInとfadeOutが使えない対策CSS

ドラクエ攻略FAQ(https://www.dqfaq.com/)のデザインをBootstrapを使って更新しようとしています。

せっかく新しくするのだからBootstrap4をもとに作成しているのですが、そのバージョンではjQuery3系が利用されています。そして、jQuery3ではfadeInとfadeOutが効かず、使えなくなっていることに気づきました、今更ながら。

ということで、なんとか「fadeInとfadeOutが使えなくなった」問題に対処しようと思い、はじめはjavascriptでfadeIn/fadeOutを実装してもいいかな、と考えたのですが、そういう見た目部分はCSSが、特にCSS3でできたよなぁと思い、いろいろ探してみたところ、以下のページですでにばっちり実験されていました。
【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】
20180815.png


うん、もうこれでいい。というか、最強なんだからこれがいい。
ありがとうございます。大変役立ちました。