サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
www4.nasuinfo.or.jp/~gushioda
CSS初心者の人にも親切な、スタイルシートエディタです スタイルシート(CSS)のソースを書いてくれるエディタがあるページ エディタの利用方法は「トップページ」に書いてあります。 ◆ 半透明プレート 背景の画像も残しながら、文字を読みやすくするための半透明プレートを作成します。通常、半透明プレートの上に文字を書きますと文字も半透明になって読みにくくなりますが、このエディタで作成しますと、文字は半透明になりません。 ◆ 半透明プレート作成エディタ サンプルは、白地に黒文字と、黒地に白文字の2タイプ配置していますが、多くの場合、黒地に白文字のほうが読みやすいようです。カラーは選択できますので、暗い背景色と明るい文字の組み合わせを選択するのが良いでしょう。(エディタで作成される半透明プレートの透明度は、50%です)
CSS初心者の人にも親切な、スタイルシートエディタです 「CSSソースを書いてくれるエディタがあるページ」にあるCSSエディタ一覧表
CSS初心者の人にも親切な、スタイルシートエディタです スタイルシート(CSS)のソースを書いてくれるエディタがあるページ エディタの利用方法は「トップページ」に書いてあります。 ◆ JavaScriptを使わずにロールオーバーボタン 今まで多くの人は、ロールオーバーボタンを画像で作成したときに、JavaScriptを使って操作していたと思います。しかし、JavaScriptのソースを書けない人は、ホームページ作成ソフトに依存していました。 ここでは、同じ操作をスタイルシートでやってしまおう、というページです。このページへ来れば何時でもソースは書いてくれますが、それほど難しいソースではないので、覚えてしまうこともできるでしょう。この下がサンプルボタンです。クリックしてください。 ◆ ロールオーバーボタン作成エディタ 上のボタン画像は、3つのボタンが並んでいますが、1枚の画像です。(幅=33
サムネイル画像をクリックすると、拡大写真が表示されます。表示された写真をクリックすると、元に戻ります。スタイルシート(CSS)主体のシンプルなソースですから、簡単に利用できます。 サンプルは、サムネイル画像をクリックするようになっていますが、テキストをクリックして表示させることも可能です。その場合は、サムネイル画像の<img>タグ部分をテキストに書き換えてください。 ここをクリックで画像表示 このようにテキストをクリックしても表示できます。 ◆ Lightbox作成エディタ 配置する写真の名前、幅と高さ、サムネイル画像の幅と高さの数値を入力すればソースが書かれますが、複数枚の画像を配置する場合は、写真のサイズを同じにしてください。 また、複数枚の写真を配置する場合、IDネームを変えてください。1枚目は「1」、2枚目は「2」、3枚目は「3」と入力してください。 【注意】写真の表示位置が決まっ
ワンランク上のページを作るための、ちょっとお洒落な「CSS」と「JavaScript」のソースを紹介します。 「CSS」、「JavaScript」に関して、最初にこちらのページをご覧になってから、ご利用になると一層分かりやすいと思います。 ページの<head>部に挿入する場合、CSSは左のソース、JavaScriptは右のソース内に書き込んでください。CSS(.css)ファイル、JavaScript(.js)ファイルを作成し、そこに書き込み、外部リンクから読み込む場合は、必要ありません。 このページのソースを利用するには
CSS初心者の人にも親切な、スタイルシートエディタです スタイルシート(CSS)のソースを書いてくれるエディタがあるページ エディタの利用方法は「トップページ」に書いてあります。 ◆ スタイルシートでページをレイアウト テーブルレイアウトに依存せず、スタイルシートでページのレイアウトを作ります。見ている人の画面サイズに合わせて作るには「%」、作り手側の意図するデザインにしたいときは、「px」で指定します。 「クールなレイアウト」では、「px」指定のレイアウトになりますが、コンテンツ部分を先に書くソースで、SEO、アクセシビリティにも配慮したページ作りができます。(このページで全てのページレイアウトができますが、「%」で作るときは、このページ、「px」で作るときは、「クールなレイアウト」ページをお勧めします。) 複数枠の作成方法が詳しく書いてある「複数枠を作るための解説」ページは、ページの部
CSS初心者の人にも親切な、スタイルシートエディタです スタイルシート(CSS)のソースを書いてくれるエディタがあるページ エディタの利用方法は「トップページ」に書いてあります。 ◆ スタイルシート入門 ・・・ 実は、スタイルシートって簡単なんです。 ホームページは、HTMLで書かれていますが、HTMLはコンピュータに情報を伝達するための手段(言語)です。コンピュータが理解し易いものと、人間が理解し易いものは同じではありません。そこで、人間が見ても分かり易くページをデザインするために、考えられたのがスタイルシート(CSS)です。つまり、HTMLでコンピュータに理解してもらい、スタイルシートで人間に理解してもらおうと、分業化されるようになりました。しかし、残念ながら現在、未だ多くのページがHTMLだけでページを作っています。今、スタイルシートを使ってページを作ることは、HTMLだけでページを
スニペットを使いこなす スニペット(snipet)の「snip」とは、「鋏でチョキンと切る」と言う意味です。何度も利用するソースを部分的に、「スニペット」に保存しておいて、ワンタッチで何度でも使い回しが出来る便利なツールです。スニペットにソースを保存しておくと、「デザイン」上でも「コード」上でも一瞬にしてやりたいことを「HTML」に書いてくれます。 「ウィンドウ」→「スニペット」で右下図のパネルを表示。赤丸「新規スニペット」ボタンをクリックしますと、左図のダイアログボックスが表示されます。 (名前)どんな内容のスニペットか、分かりやすい名前をつけます。 (詳細)後で見たときに分かるよう、コメントを書いておきます。 (スニペットの種類)<center>文章</center>のように,開始タグと終了タグで囲む時は「選択範囲を囲む」を、<link href="mystyle.css" rel=
CSS初心者の人にも親切な、スタイルシートエディタです スタイルシート(CSS)のソースを書いてくれるエディタがあるページ エディタの利用方法は「トップページ」に書いてあります。 ◆ CSSで作るスクロールバー スタイルシートで、多くのスタイルを指定できますが、その中でも人気のスタイルです。また、フレームセットからの移行を考えている人は、「CSSスクロールバーで作るページ」を参照してください。 これが、「スクロールバー」です。「幅」400px、「高さ」100pxで作っています。「スクロールバー」を使う頻度は、それほど多くないと思いますが、何かの時に知っていると便利なアイテムです。「スクロールバー」と似たものに、「テキストエリア」がありますが、この二つは、基本的に使う目的が全く違いますので、使い分けた方が良いでしょう。 ソフトをインストールするときに、「使用承諾書」がありますが、このような文
このページから入ってきた人の head部のソース function preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.p=new Array(); var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i body部のソース <a href="index.html"><img src="btn1.jpg" alt="スワップボタン" name="btn" width="
◆ エディタの利用方法 1. これから出てくるエディタへの入力は、「半角英数字」で入力します。 2. 例外として、「ドロップシャドウ」での文字入力などがあります。 3. 指定するアイテムの緑ボタンは必ずクリックして赤くしてください。 4. 色指定のところは、「#」を付けずに、入力します。 5. 「Name」とある枠には、「半角英数字」で好みの名前を付けます。 6. 必要事項を入力したら、「CSS Source Stage」ボタンをクリック。 7. head部と、body部の各ボタンをクリック(ソース選択)して、「Ctrl」+「C」→「Ctrl」+「V」で貼り付けます。(Firefox、Mozilla、Netscape、Opera用のフラッシュプレーヤーでは、「Ctrl」+「C」でコピーが出来ないときがあります。その場合は、選択したソースの上で右クリックして、「コピー」を選んでく
ドリームウィーバーで簡単にホームページ作成。スニペット、ビヘイビアの使い方も説明しています。Dreamweaverを、簡単に扱えるように、このページは作られました。初心者の人は勿論、以前からDreamweaverを使っている人にも参考になるページだと思います。 しかし、DreamweaverCS3になってから、それまでのバージョンとは、違う部分がかなりありますので、その点も考慮に入れながら、説明していきたいと思います。 Dreamweaverは、素晴らしいソフトなのですが、画像を扱うことができません。画像を扱うソフトとしては、Photoshop、もしくは、Fireworks等のソフトがあります。ホームページを作る上で、画像ソフトはどうしても必要になります。 フラッシュ画像で、マウスが指しているところは、これから説明していく上で、何度も出てきますから、場所を覚えておいてください。 それでは、
Dreamweaverを、簡単に扱えるように、このページは作られました。初心者の人は勿論、以前からDreamweaverを使っている人にも参考になるページだと思います。 しかし、DreamweaverCS3になってから、それまでのバージョンとは、違う部分がかなりありますので、その点も考慮に入れながら、説明していきたいと思います。 Dreamweaverは、素晴らしいソフトなのですが、画像を扱うことができません。画像を扱うソフトとしては、Photoshop、もしくは、Fireworks等のソフトがあります。ホームページを作る上で、画像ソフトはどうしても必要になります。 フラッシュ画像で、マウスが指しているところは、これから説明していく上で、何度も出てきますから、場所を覚えておいてください。 それでは、早速「サイトの新規作成」から始めることにします。 姉妹ページ 「あなたの知りたいクールな手
このページを最初にブックマークしてみませんか?
『Dreamweaverで作成するホームページ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く