タグ「ホームページカスタマイズ」がつけられているブログ記事

お知らせ

作って覚えるPHP+MySQLアプリケーション 2008年6月24日

作って覚えるPHP+MySQLアプリケーション」が発売されました。
PHP+MySQL+Smartyを使って、ブログ/ショッピングサイト/マッシュアップの3つのWebアプリケーションを作る方法を解説しています。

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

最近、あちこちのホームページで「Favicon」を見かけることが多くなりました。
そこで、当方のBlogにもFaviconを設置してみました。

先日のエントリーで書いたように、現在スタイルシートのリファレンス本を書いています。
その際に、W3CのCSSのサイトを参考にしていますが、そこには次期CSSの「CSS3」の情報も出ています。

Webページにできるだけ多くの情報を入れるには、フォントサイズを小さくするのが簡単です。
ただ、字があまりに小さすぎると、人によっては見にくいこともあります。

Webブラウザには、文字のサイズを変える機能があります。文字を大きくして表示することができます。
例えば、Internet Explorerなら、[表示]→[文字のサイズ]メニューです。
ただ、この機能だと文字のサイズだけが変わり、画像等はサイズが変わらないので、ページのレイアウトが崩れることもあります。
また、スタイルシートで文字サイズを決めうちにしていると、この機能を使っても文字サイズが変わらない場合もあります。

Operaにはページ全体を拡大/縮小する機能がありますが、Internet Explorerでもそれに近いことを行うことができます。
Internet Explorerでは、CSSに「zoom」という独自のプロパティがあり、それを使うとWebページ上の要素を拡大/縮小することができます。
このプロパティはbody要素にも適用することができ、それによってWebページ全体を拡大/縮小することもできます。

So-netが「ミニホームページ」というサービスの正式版を開始しました。
ミニホームページは無料ホームページサービスの一種で、登録するだけで掲示板や日記などの機能を使うことができます。

ミニホームページのサイトはこちら

前回のエントリーに続いて、スタイルシートのPHP化を紹介します。

前回のエントリーでは、PHP化したスタイルシートをHTMLファイルの中に組み込む形になっています。
しかし、linkタグを使って、スタイルシートをHTMLファイルと別ファイルにすることも多いです。

そのようにしたい場合、以下のような手順を取ります。

Blogをはじめとして、スタイルシートを使ってWebページをデザインすることが多くなってきました。

スタイルシートを作っていると、「ある箇所を変更すると、それに連動して他の箇所も変更する」ということがよくあります。
例えば、以下のようなスタイルシートを考えてみてください。幅700ピクセルの「container」の中に、幅200ピクセルの「left」と、幅500ピクセルの「contents」を、2段組で配置することを想定しています。

<style type="text/css">
<!--
#container { width : 700px; }
#left      { width : 200px; float : left; }
#contents  { width : 500px; float : left; }
-->
</style>


ここで、「left」の幅を100ピクセル増やして、300ピクセルに変えるとしましょう。すると、それに連動して、「container」の幅も100ピクセル増やすことが必要になります。
ただ、このような変更は、忘れたり間違えたりすることも多いです。それが原因で、Webページの表示が意図しないものになることも、よくあることです。

このような問題は、スタイルシートをPHPで出力することで、解決することができます。ある変更が他の箇所に影響する場合は、それらの箇所をすべてPHPのスクリプトで出力するようにすればOKです。
例えば、先程の例の場合だと、幅を出力する部分を、以下のようにPHPのスクリプトに置き換えます。

<?php
$left_width = 200;
$contents_width = 500;
$container_width = $left_width + $contents_width;
?>
<style type="text/css">
<!--
#container { width : <?php print($container_width); ?>px; }
#left      { width : <?php print($left_width); ?>px; float : left; }
#contents  { width : <?php print($contents_width); ?>px; float : left; }
-->
</style>


この状態で、「left」の幅を300ピクセルに変える場合、「$left_width = 200;」の文を「$left_width = 300;」に変えます。
「container」の幅($container_width)は、「$container_width = $left_width + $contents_width;」の文で計算していますので、$left_widthを変更することで、$container_widthにも変更が反映されることになります。

スタイルシートが出来上がるまでにはいろいろと試行錯誤が必要ですが、上記のようにスタイルシートをPHP化することで、完成までの時間を短縮することができると思います。
また、1つのスタイルシートをベースにして、スクリプトで場合分けをして、複数のスタイルシートを作り出すようなことも考えられます。

ホームページ上にアニメーションを表示する方法として、Flashが良く使われています。ただ、Flashを作るためのソフトは高価で、手が出しにくいものでした。
しかし、「SWiSH」という安価なソフトが出てきました。入門版の「SWiSH2」と、上級者向けの「SWiSHmax」があります。
SWiSHのサイト(日本語)はこちら

入手して使ってみましたが、低価格な割に機能は十分という感じです。

アーカイブ

ブログパーツ

ステータス