HTML5のタグを整理してみる

今さらですが、HTML5の追加タグについて、解説書やブログ記事など人によって使い方がことなるので、もう一度整理してみることに。

DOCTYPE宣言や文字コード指定、IE旧バージョンやスマホ対応など、<head>タグ内の設定については割愛します。
当方で利用している headタグのテンプレはこちらでご確認を。

まずはややこしいセクショニングのタグについて。

main / article / section / aside

どう組み合わせてもだいたい正常に表示されますが、ブラウザや検索エンジンにページ構成を正しく理解させるためには、正しく使う必要があるらしいです。

“HTML5のタグを整理してみる” の続きを読む

Webデザインの進化?2015

このサイトは備忘録サイトなので、昔のデザインも残してます。

例えば当サイトこちらのページのメイン画像。
2010年頃までは、Flashがまだよく使われていたので、こんな感じのデザインになってました。このアニメーションもモバイル端末じゃもう見えないのでしょう。

“Webデザインの進化?2015” の続きを読む

制作の参考になる?良いサイト?

「デザイナーから見て良いサイトはどこですか?」
という質問をよくいただくのでちょっとメモっときます。

私が良いと思う・・・というか・・・一番好きなサイトは・・・

こちらです。

“制作の参考になる?良いサイト?” の続きを読む

Googleカレンダーの埋込とカスタマイズ

サイトにGoogleカレンダーを埋め込んでスケジュール表のようにする方法です。

たいした改良はできませんが、デフォルトよりはマシになると思います。

「gcalendar-wrapper.php」がマルウェアと判断されるようになったため、純粋なGoogleの埋め込みコードにしたほうが良さそうです。(2017/01/14追記)

Googleサービスの仕様が変わると正しく表示されなくなるかもしれませんのご注意ください。

“Googleカレンダーの埋込とカスタマイズ” の続きを読む

Googleマップの埋込とカスタマイズ

サイトにGoogleマップを埋め込んでちょっとカスタマイズする方法です。

現在、多くのサイトではGoogleマップを埋め込んで、所在地やイベント会場などの地図として利用しています。簡単に設置できて便利ですもんね。
でもデフォルトだとサイトのデザインに合わないってこともよくあるので、今回はサイトの雰囲気に合わせてちょっとカスタマイズする方法をご紹介したいと思います。

Googleサービスの仕様が変わると正しく表示されなくなるかもしれませんのご注意ください。

【2016.06.01追記】Google マイマップの作成と埋め込みについてはこちら

“Googleマップの埋込とカスタマイズ” の続きを読む

jPlayer

今回はサイト上で音楽や動画を再生できる『jPlayer』の設置方法をご紹介します。

ネット上に動画や音楽をアップするには、静止画像よりも複雑に著作権が絡みあってくるので、個人的にはなるべく避けたほうが良いかと思います。
使用許可のあるものを再生したり、ご自身で作詞・作曲・演奏などされる場合は参考にしてみてください。
著作物の無断使用は絶対にやめましょう!

毎度のことですが、この記事を参考になさる場合は、予めこちらの「ご利用規約」も確認してください。

“jPlayer” の続きを読む

Syntax Highlighter

記載したソースコードを見やすくしてくれるやつです。
プログラムなどの解説サイトなどでよく使われているますね。

こんな感じの。

<p id="code">
   表示したいHTMLソース
</p>
p#code:before {
   content:"表示したいCSSソース";
}
var msg = '表示したいJavaScriptソース';
document.getElementById("code").innerHTML = msg;

一般のサイトではあまり使わないと思いますが参考までに。

通常のHTMLページに「Syntax Highlighter」を導入する方法はこちらのサイトなどを参考にしてください。

通常(HTML)版のサンプルはこちら

“Syntax Highlighter” の続きを読む