HTML&CSS

target疑似クラスを使う〜CSS3

target疑似クラスを使うと、id名を利用したページ内リンクをクリックしたときに、リンク先に対してCSSを適用させることができます。 工夫次第でスクリプトを使用せずにちょっとした仕掛けを作成できます。 E:target {プロパティ名:値;} Eはリンク先の要素を指定するのがポイントです。 次のサ  >>続きを読む

HTML5〜コンテンツモデル

HTML5におけるコンテンツモデルとは、ある要素の中に何を含めることができるかを定義したものです。 例えば次のようなHTMLがあったなら、コンテンツモデルから正しい書き方かどうか判断できます。 <div> <h1>見出し1</h1> </div> di  >>続きを読む

PHP基礎 (15) ファイルの入出力

ファイルを1行ずつ読み込む ファイルを開く PHPでファイルを読み書きするには fopen 関数でファイルを開きます。引数には「ファイル名」と「モード」を指定します。fopen 関数でファイルを開くとファイルポインタ(ハンドルともいう)が返されます。 ファイルの取り扱いが終了したら、 fclose   >>続きを読む

パララックス 円運動をさせる〜jQuery

パララックス効果の中で円運動をさせるスクリプトを書いてみました。 円運動は円の半径を決めてその角度を少しずつ変化させることで実現できます。 x座標とy座標を数式で表すと次のようになります。 rが半径でradianが角度(ラジアン)です。 x = r*cos(radian) y = r*sin(rad  >>続きを読む

Ajaxでモーダルウインドウ内にテキストを読み込む〜jQuery

今回のサンプルは、モーダルウインドウ内に別のHTML文を表示し、読み込んだHTML文から更に別HTMLを読み込む仕組みです。(中級者向け) モーダルウインドウは半透明のレイヤーをブラウザの表示領域いっぱいに広げて現在のページを隠します。そして、画像などを表示する領域をブラウザの中央部に置くものです。  >>続きを読む

ダブルクォートで囲まれた文字列の変数展開〜PHP

PHPのダブルクォートの使い方の説明です。 ダブルクォートで囲まれた文字列の変数展開は便利な機能ですが、使い方によっては誤解を生じたり思ったとおり動作しなかったりします。 変数展開のいくつかの例を確認してみてください。 基本的にはダブルクォートで囲まれた文字列の中に直接変数を埋め込めば展開されます。  >>続きを読む

hover()とanimate()を使ったボタン〜jQuery

animateを使用すれば幅や高さ、あるいはマージンなどを簡単にアニメーションさせることができます。 次のスクリプトはマウスを重ねると幅が100pxから200pxへと変化します。また、マウスが外れると幅はもとの大きさになります。 また、背景色をアニメーションさせています。 background-co  >>続きを読む

イメージ画像のテキスト作成のポイント〜Photoshop

イメージ画像にテキストを置く場合、可読性が問題になります。 せっかく良い画像を用意したけれども、テキストの可読性が悪いためしっくりとこない場合も多いです。 簡単なパターンを試してみました。サンプルにした写真は東南アジアのある町の風景です。これに「Life」というテキストを入れて試します。 テキストカ  >>続きを読む

gifアニメの作成〜Photoshop

gifアニメーションの作成方法です。 今回の題材はMac版のFirefoxの初期画面に現れるキツネ君に勝手に協力してもらいました。 オリジナルのものは実はping形式になっておりgifアニメではありません。 もともとの画像はこんな風になっています。 これをバラバラにしてgif形式にしてみます。 スラ  >>続きを読む