ホームページ制作 埼玉県 アデジナーレ

ブログ記事でHTMLソースやスタイルシートを説明する際に、奇麗に見やすく表示することが意外と難しいです。

そんな時は、【SyntaxHighlighter】を利用するとブログの記事でソースコードのを紹介する際に、キレイに分かりやすく表示すること出来ます。

ソースを別ウィンドウで表示したり、印刷やクリップボードへの保存も可能です。多くの方が利用されているので、一度は目にしたことがあるかと思います。

▼こんな感じでhead部分に記述を追加します。

<script type="text/javascript" src="/blog/scripts/shCore.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushXml.js"></script>
<link href="/blog/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="/blog/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/blog/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

「Feature List」は、画像のフェードイン、フェードアウトをなめらかに表現できるjQueryプラグインです。HTMLソースもULタグがLIタグでシンプルに記述されているので、カスタマイズや更新を行いやすいので、かなり広範囲に渡り使用できるかと思います。弊社では、「Feature List」カスタマイズしトップページのメインビジュアルに採用しています。

角丸にしたい際、CSS3の「border-radius」を使えれば簡単に角丸を作れるのですが、ブラウザごとの対応も異なっているので、現状はまだ難しいですよね。

そんな時に便利なのが、DD_roundiesです。DD_roundiesは、画像を使用せずに角丸を表現できるJavascript（JS）ライブラリです。軽量かつ角丸のサイズを簡単に個別指定できるところが魅力です。jQueryなどを利用せずDD_roundies単体で動作します。

ウィンドウサイズに合わせてコンテンツが再配置され可変するレイアウトが、流行ってきているようですね。今時期は「Fluid Grid Layout」と呼ぶようです。

当社の非公開実績ページを制作しており、こちらで使ってみました。
非公開の実績はご紹介できないので、サンプルを下記にアップしました。
（見ないと感じが掴めないと思うので…）
http://labs.adesignare.com/ajax_js/fluid_grid/

最初から全部作るのは大変なので、xluneさんサイトを参考にさせていただきました。
http://blog.xlune.com/2009/09/jqueryvgrid.html

以下、覚え書きです。