更新履歴 2009.04.13 一言メルフォ修正。 2008.10.26 一言メルフォ設置。素材サイトリンク追加。 2008.10.25 空とその他に画像追加。 2008.05.29 追加画像アップ。素材メニューとサイトデザイン一部変更。 2008.05.22 画像アップ開始。利用規定一部変更。 2008.05.19 サイトデザイン修正。コンテンツ追加までもうしばらくお待ちください。 2008.05.18 とりあえずオープン。コンテンツは現在準備中です。

2023 著作権. 不許複製 プライバシーポリシー

jQueryを用いたスライドショーはたくさんのライブラリーが存在していますのでどれを使ったらいいか選ぶのも大変だと思います。わたくしが使ってきた中でも設置がとても簡単だったのがこのFlexSlider2でした。記述も短く簡単に設置できると思いますのでみなさんチャレンジしてみてください！ FlexSliderホームページからファイル一式をダウンロードします。 下図のFlexSliderホームページに移動します。 左下の「Download FlexSlider」ボタンをクリックします。 ダウンロード後必要なのは、「jquery.flexslider.js(もしくはjquery.flexslider-min.js)」です。必要に応じて「flexslider.css」も利用します。 スライダーのボタンも使う場合は「theme」の中に「bg_control_nav.png」と「bg_directi

ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor

メニューバー 横に棒状に配置されたメニューをメニューバーといいます。メニューの各項目を左寄せしてメニューバーを作成します。 画面端から画面端（ページサイズがある場合はページの端から端）まで背景色をつけるとバーのように見えます。 この例は、前回の反転メニュー(2)を元にしています。横に並べる場合には、各ボタンの領域がわかるように、しきり線を入れます。 しきりの付け方もいろいろとありますが、ここでは各項目の右にしきり線をいれ、メニュー全体の左にもしきり線を入れています。 1 メニューバー　menu.htm #menu { background-color:#9999ff; /* バーに背景色。端まで塗るため幅はulに指定。 */ } #menu ul { width:650px; /* ボタンの数の幅を確保 */ height:22px; /* バーの高さを確保 */ margin-left:

Fireworks 拡張アレコレ追加メモ Fireworks用にいろんなサイトで配布されているスタイルやパターンなどなど、いろんな素敵なものを追加するためのメモです。自分で作ったものを登録しておく方法の説明は今回は省略してます。 各素材等はmxp形式で配布されているものも多いので、その場合はExtension Managerでインストールしてください。下記はそうでない場合についてのお話です。 また、私の使用しているバージョンはCS4(Win用)なので、それに基づいてのメモとなります。バージョンやOS違いの場合は自分の環境に置き換えて確認してください。 スタイルを追加する スタイルパネルのオプションメニューで「スタイルライブラリを読み込み」を選択、スタイルライブラリの名前と場所を選択します。 「スタイルを読み込む」と「スタイルライブラリを読み込み」の違いは、前者の場合は現在のドキュメントに対

フッターメニュー区切りを画像でやってみる サンプル01 サンプルサンプルサンプルサンプルサンプルサンプル 普通にテキスト間に「 | 」を画像化してリスト背景として表示。 今回は li タグの右側に背景画像をつけるというやり方にしてあるので、左側に1つ「| 」が足りなくなるため、最初のテキストに対して span で一番左に同じ背景画像が出るように指定してみた。 フッターメニュー区切りを画像でやってみる サンプル02 サンプルサンプルサンプルサンプルサンプルサンプル テキスト間に適当な画像をリスト背景として表示。 背景画像が「 | 」の場合は1ピクセルなのであまり気にならないが、当然背景画像の幅が大きくなればそれに合わせてcssでpaddingをうまいこと合わせてやる必要がある。 フッターメニュー区切りを画像でやってみる サンプル03 サンプルサンプルサンプルサンプルサンプルサンプル 上記サン

このページはAjax (JavaScript) 関連ライブラリ一覧を掲載しています。 ライブラリのサンプル（例文）に関しては新JavaScript例文辞典にも掲載しています（新しいライブラリなどにも対応しています）。 ミスや間違い、リンクエラーなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。

404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved

Fireworksは、Adobe Systemsのウェブ用の画像を作成するためのソフトウェアです。Adobe SystemsにはPhotoshopやIllustratorといった画像加工ソフトがあるので、Fireworksよりも高機能なため、そちらを使えるのであればFireworksを覚える必要はないと思います。 Fireworksは元は、Macromediaという会社の製品で、Dreamweaver、Flashなどの一連のウェブ関連のオーサリングソフトのうちの一つという位置づけでした。2005年にAdobe SystemsがMacromediaを買収したため、画像加工ソフトが微妙な立ち位置で増えてしまったという感じがします。しかし、Dreamweaverとの連携は優れており、ウェブ用の画像ならば大抵のものは労せずしてつくれることなどは、Fireworksの利点でしょう。実際、サイトを運営

「ボタンをつくる（矩形）」のときのようなボタン画像を、同じフォーマットで複数つくりたいときには、ひとつずつ作って書き出すよりも、いっぺんにすべての画像をつくってから書き出した方が、時間短縮になります。 今回は、一度に複数の画像を書き出す方法を解説します。 まず、「ボタンをつくる（矩形）」のような画像を3つつくり、3連の画像にします。 キャンバスサイズは横300ピクセル、高さ50ピクセルにして、ひとつのボタン画像は横100ピクセル、高さ50ピクセルにします。 以下のような画像にしました。 一番左のボタン画像を構成しているオブジェクトをすべて選択します。 [編集]->[挿入]->[矩形スライス]を選択します。 「複数のアイテムが選択されています。シングルアイテムとしてスライスを作成しますか？」という質問が表示されたら、[ひとつ]をクリックします。 左側のボタン画像にスライスが設定されました。

WordPressを使い始めた頃は、テンプレート階層、テンプレートファイルの上手な使い方などは、全く考えずに Webサイトを作ってました。 いまではもっと効率的に、もっとスマートにサイトを構築できるようになったかも！そのためにちょっと覚えておきたい、テンプレートファイルについてのあれこれをご紹介します。 WordPress というと、ブログ構築のための CMS（コンテンツマネージメントシステム）というイメージが強いですけど、一般的な Webサイトを作るの時にもとっても便利です。私も仕事で Webサイトを作る時に、WordPress で作成することがとても多いです。 WordPress はバージョンも 3.0 になって、カスタム投稿タイプやカスタムメニューなど、さらに CMS としても充実してきたように思います。 ブログと違って一般的な Webサイトは、そのサイトによって仕様が様々です。コン

Fireworksを使ってみよう！基礎から小技までいろいろ。画像を書き出してみよう～♪ ※サンプルでは、チューリップの写真を書き出します。 １、まずは長方形スライスを挿入します。 　　 ２、写真なのでjpgで書き出します。 　　書き出す形式をjpgに設定します。 　　 ３、書き出す画質を、書き出す前に確認できます。 　　タブの「2アップ」または「4アップ」のところをクリック。 　　分かれた画面をそれぞれ選択して、画質を変えて確認できますね。 　　 　　 ４、オリジナル画面に戻ってスライスを選択、 　　「選択したスライスの書き出し」で 　　最適な画質で書き出してくださいね。 　　 　　 ※GIFやPNGで書き出す場合も同様です。 特に、バナーなどで容量が限られている場合は 画質を見ながら、最低限の色数に抑えつつ 容量を減らします。