全19件 (19件中 1-19件目)
1
-
[初心者向け]画像の表示のしかた
ご質問があったので、お答えします。日記や、フリーページに画像を掲載する方法について。おおまかにいって次のふたつのステップを踏みます。STEP1.表示する画像を用意し、楽天の画像倉庫にアップロードするSTEP2.表示したいページに、画像表示用のhtmlタグを記述する。■STEP1.画像の登録1>管理トップページへ2>左側のメニューから ページ作成編集＞画像倉庫（画像の登録管理）をクリック3>画面をスクロールして、「参照」と書いてあるボタンを押す。ダイアログが開くので、登録したい画像を選んで、「OK」を押す。4>写真のタイトルを入力する欄に、わかりやすい名前を入力して「選択された画像を登録」ボタンを押す。■STEP2.htmlタグの記述1>登録すると、画像倉庫（画像の登録管理）画面で登録した画像が見える。2>使いたい画像をクリック3>下の方にスクロールするとたとえばこんな風に書いてあるので<IMG SRC="http://plaza.rakuten.co.jp/img/user/60/09/736009/26.gif" width="792" height="611" alt="背景">ここを<から>まで、選択してコピー。（念のために、メモ帳などにペーストしておいても良いでしょう。）4>日記やフリーページの編集画面へ行き、いまコピーしたものをペーストする。以上。やってみてください。わからなかったらご質問受けます。では～。
August 19, 2004
コメント(67)
-
初心者向け配色決定法
新機能について新機能として、上級者用に基本のテーマ以外の部分でいろいろ設定できるようになりましたね。見回っていると、今までのデザインが崩れたりして、強制的にリニューアルせざるを得なくなり、イライラしている人も多いみたい。自由度があがったというところで、どこがというと、本文や項目の配色を選べるようになったということが、見た目の印象を変える要素としてけっこう大きいなと感じています。つまり、デザインする上で、「配色」＝どの色を選ぶか、というのが非常に重要になってきていますね。配色のコツ当然、既存のヘッダ画像やメニュー画像を使う場合には、それに合わせた配色にしたほうが美しいです。（ちなみに、ここはまだテンプレートから選んだだけで、配色などはまだ変えていないんですが。すいません）そこで、配色を決めるときの初心者向けアドバイス。どうやって決めたらいいかわからないという場合。色をたくさん使えば使うほど、かっこよく作るのが、むずかしくなります。逆に少なくした方がかっこいい感じにつくりやすいんですよ～。基本的には。三色で構成することをお勧めします。（二色だと少なすぎて、難しい。）色は、ずばり白、黒プラス好きな色。というのでおすすめしちゃいます。たとえば、・白/黒/赤・白/黒/オレンジ・白/黒/ピンクとか（赤系ばっかりですいません。緑とか、青でもいいですよ。茶色とかも。）ポイントは、白と黒以外の色で選ぶときに、あまりにも白っぽすぎる、あるいは黒っぽすぎる色を選ばないことです。白地にその色で文字を書いてもとりあえず読めるくらいの濃さで、逆に黒地にその色の文字でも一応読めるくらいの薄さの色で。で、三色をバランス良く配置していけば、それなりのデザインになります。配色するときの注意点配置するときの注意点は、もう一色が「真っ赤」などのはっきりしている色の場合には、画面で見たときにあまり、その色が多くなりすぎないようにするということです。目がちかちかして文字が読みにくくなります。白を一番広い部分に持ってくるのが無難です。黒だと、下手をするとちょっと暗い感じになったりします。占いとか神秘系の雰囲気を出す場合には黒はよいでしょう。応用編として白をちょっとうすいピンクにしてみるとか黒を濃い灰色にしてみるとかするとちょっと雰囲気が変わります。いかがでしょうか。やってみてね。ご質問やご要望など受け付けてます。返事が遅くなりがちなのでそれでもいいという方お待ちしてます。
August 6, 2004
コメント(0)
-
デザイン変更で困っているアフィリエイトサイトの皆様へ
えっとね。昨日の日記に悠々粋亭さんから書き込みいただきました。三段のレイアウトで、サイドに来るべきメニュー項目が、日記の下に表示されてしまうという問題です。これは、アフィリエイトなどのテンプレートを使われている方は、テーブルで、たくさんの商品を表示していると思います。で、幅がね、大きすぎるの。今回のリニュで、コンテンツ全体の幅が750pxに固定されました。なので、真ん中の「トップ自由欄」の幅が大きすぎると、その横にメニューが表示できなくて、下に行っちゃうというわけです。この問題は、二段の場合でも起こりえます。回避するには、「トップ自由欄」の表示幅を、二段の場合はだいたい500px以下。三段の場合は300～400pxにするのがよいと思います。とりあえず、一段のテンプレートにしてみるとか（横にメニューをださない）、旧楽天のテンプレートを使うとかすると、たぶんそのままでも大丈夫かもしれません。やってみてないので、確認できませんが。何か間違ってたり、質問などあったら書き込みしてください。ちょっと今週忙しいので、返事が来週になっちゃうかもしれないですが、それでもよければ…。質問受付。あなたのページで何がおかしいのか調べてあげますよ～。困っている方はどしどし応募ください。ではでは。
August 5, 2004
コメント(3)
-
トップ画像の大きさについて。
楽天デザイン機能更新されましたよね。いままでのページの表示が変になってしまったり、新機能の使い方がよくわからなくて、けっこう不評もあちこちで聞きますが…。基本的に、自由度はちょっとアップしているので（一部ダウン）、慣れてみれば、いろいろと変更できて楽しいと思いますよ。で、そのことについて、思いついたことやわかったことなどを書いてみますね！■トップ画像について楽天の説明にもありましたが、今までは、日記と掲示板で別の画像をトップに掲示できましたが、今回のリニュで、トップページの画像をすべてのページで利用することになり、別の画像をはることができなくなりました。そこで、トップページの画像を自分で作る場合…。楽天の説明では、たて150px以内とあったので、たて150pxで作ってみたところ、天地が切れて表示されました！なに～～！てかんじで。楽天のCSSを見ると、height（高さ）80pxで固定されていました。全部のデザインで同じかどうかはまだ確認してませんが、三つぐらいはそうでした。というわけで、自分でトップ画像を作るときには、高さ80pxで作りましょう。ぴったりです。ちなみに、幅は750pxです。ぴったりの画像を作るのには、 750px × 80px です。では～今日はこの辺で。（久しぶりの更新でした。）※このサイト自体もぼちぼち変更して、TIPSを載せますね～。
August 4, 2004
コメント(2)
-
table講座1
や！ 久しぶりです。掲示板その他にあまりレスできなくてすみませんでした。で、テーブルについてです。さっそくです。htmlでテーブル（表のこと）てのは、すごい、もうよく使います。楽天の日記の中では使えないっぽいですが、トップページとか、あとサイドのページでは使えると思います。これは、表を作るだけではなくて、画面をレイアウトしたり配置するのに使えます。とてもおくが深いです。ええ。なので、ゆっくりちょっとずつ解説しますね。まず、テーブルってことで<table></table>と書きます。<table>こちらが開始タグ。</table>こちらが終了タグです。当然ですが、すべて半角英数字で。スペルミスのないように注意してくださいね！！で、テーブルの中に行と列があります。とりあえず、３行２列のテーブルにしてみましょう。行は<tr> こちらが開始タグ。</tr>こちらが終了タグ。これをさっきのテーブルの内側に書きます。<table><tr></tr></table>で、列はですね。<td> こちらが開始タグ。</td>こちらが終了タグ。これを、行の内側に書きます。<table><tr><td></td></tr></table>これで、一行、一列です。で、二列にするには。<td></td>これをもう一個後ろに追加します。<table><tr><td></td><td></td></tr></table>こうです。三列以上にしたい場合も同じように後ろに追加してください。復習です＞行(tr)の中に、列(td)を書きます。で、もともと３行２列のテーブルにするといいました。この行の部分を全部コピーしてもう一個後ろに追加します。つまり。<tr><td></td><td></td></tr>ここ、をコピーして。この後ろにペースト。<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>こうです。３行にするので、もういっちょコピー！<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>これで３行２列のテーブルができました。これで表が表示されます…。がひとつ注意。テーブルの中に文字を書き込みたいときには！<td>このあいだに書きます。</td>で、じつは tdの中身に何も書いていないと、表がきちんと表示されません。<table><tr><td>なまえ</td><td>ひなこ</td></tr><tr><td>せいべつ</td><td>おんなのこ</td></tr><tr><td>しゅみ</td><td>どくしょ</td></tr></table>のように、中身を書いてみます。今日はここまで～～。どう？やってみて～。こんな風になったかな？http://plaza.rakuten.co.jp/hina2/3001このままだともちろん話にならないので、あしたからちょっとずついじっていきます。
June 23, 2004
コメント(0)
-
やらないほうがよいこと
最近ちょっと、更新滞ってました…。今回はちょっと趣向を変えて。タグを覚えたての初心者がやりがち、かつやらないほうが良いことをいくつか。1＞本文をやたらセンタリングする<center> </center>タグで囲まれたところは、文字がセンタリングされます。覚えたものは何となく使ってみたくなるかもしれませんが。ふつうは、読みにくくなるのでやめたほうがよいでしょう。詩とか、タイトルのような、特別な効果をねらった使い方はよいと思いますが、普通の日記の本文などにはあまり適していないと思います。2＞font face で、フォントの書体を変えることができます。ただし、ここで指定したフォントが、閲覧する人のパソコンにインストールされている必要があります。環境によって、どんなフォントがインストールされているかわからないし、マッキントッシュとウィンドウズでもフォントが違います。極力指定しない方がよいでしょう。<FONT FACE="ＭＳ Ｐゴシック,Osaka"><FONT FACE="ＭＳ Ｐ明朝,平成明朝">どうしても使いたい場合は、日本語の場合、上の二種類。上がゴシック系、下が明朝系です。これらのフォントは、ほとんどのマシンに入っているはずなので。カンマで区切って二種類指定しているのは、前がウィンドウズ用のフォント、後ろがマッキントッシュ用です。ま、せいぜい指定は、上の二つくらいにしておきましょう。あ、ちなみに、ブラウザのデフォルトでは、ゴシック系のフォントに指定されているはずなので、ゴシックの指定をしても、見た目一緒かもしれません。やたら、フォントを変えていると、逆に素人っぽいので注意。では、今日はこの辺で。
May 23, 2004
コメント(2)
-
楽天html講座(12)：昨日の訂正
昨日、スパンタグを使ってボタンのようなリンクを作ってみました。こんなの。とりあえずためにに押してみる？↑押すと拍手音がします。BBSより気軽にメッセージを送る方法として考案されたもの。で、このソースです。<a href="URL" target="_blank"style="text-decoration:none;color:black;">&kt;span style="border-top: 1px solid #F6F6F6;border-bottom: 1px solid #919191;border-left: 1px solid #B3B3B3;border-right: 1px solid #B3B3B3;margin: 5px;padding: 2px 20px;background: #DCDCDC;font-size:12px;">ボタンのラベル</span></a>ていうふうにかいてたんですが、実はaタグの中にspanタグで、枠の指定をしなくても、aタグ自体に設定すればよかったということにあとで気づきました。<a href="URL" target="_blank"style="text-decoration:none;color:black; border-top: 1px solid #F6F6F6;border-bottom: 1px solid #919191;border-left: 1px solid #B3B3B3;border-right: 1px solid #B3B3B3;margin: 5px;padding: 2px 20px;background: #DCDCDC;font-size:12px;">ボタンのラベル</a>こんなかんじで。ボタンのラベルあ、ちなみに、楽天日記では改行すると間に表示時にタグが入るので、<a style=" から ">までの間に改行したらだめですよ～。今日はこの辺で～。
March 25, 2004
コメント(0)
-
楽天html講座(11)：ボタンっぽいインターフェース
ちょっと最近、更新滞ってました。今まで、やってきたspanタグの枠の設定、背景色の設定を使ってちょっとしたお遊びです。ボタンのふりこんな風に作ってみるとボタンのふりができます。楽天ではフォームタグが使えないので、ボタンを設置できないのですが、普通のリンクに、こういう枠と背景色をつけると、ちょっとボタンっぽくておもしろくないですか？もっとも、WindowsXPの人やMacの人はformタグのボタン表示がこのCSSとは異なると思うので、それっぽくするのはまたいずれ。で、これを利用して、ボタンっぽくリンクを張った例としてはこんなのがあります。web拍手とかいうのを作ってみました。ご存じじゃない方のために、ちょっと説明すると。掲示板などで発言するのがちょっと敷居が高いな～という場合に、でもこのページ気に入ったよ！という意思表示のために、クリックすると拍手音がするというプログラムです。で、そのページで簡単なメッセージを送れるというものです。とりあえずためにに押してみる？そんな妖しいモンじゃないので。普通のリンクだと面白くないなってときに、使うのも面白いかなとか。で、肝心のこのソースです。<a href="URL" target="_blank"style="text-decoration:none;color:black;">&kt;span style="border-top: 1px solid #F6F6F6;border-bottom: 1px solid #919191;border-left: 1px solid #B3B3B3;border-right: 1px solid #B3B3B3;margin: 5px;padding: 2px 20px;background: #DCDCDC;font-size:12px;">ボタンのラベル</span></a>じつはこっそり登場した新しい記述text-decoration:none;がありまして、これは本来aタグ（リンクを表す）の装飾（下線）を消す（none）表示なんですが、たぶん楽天で設定しているCSSのほうが優先になっているのか、ききません。無効です。あら。今日はこの辺で～。
March 24, 2004
コメント(0)
-
楽天html講座(10)：背景画像を設定してみましょう
今日は、段落に背景を設定してみます。こんな感じです。見るからにださださの背景をあえて設定してみました。ハイそこ、デザイナーのセンスを疑わないように。と、とりあえずまずはタグの説明から楽天で使う場合は、まず背景の画像を画像倉庫に入れます。そして、そのURLをメモ。スタイルシートでbackground-image: url(http://rakuten なんとかかんとか/000.gif);のように指定します。バックグラウンドイメージ、コロン、ユーアールエル念のため、すべて半角英数字で記入ね。空白もカッコもね。あと、url()とhttpとの間に空白を入れないようにね。上記のソースをまとめてかくとね。<p style="padding:15px; border:double 3px #993399; background-image: url(http://comic-arts.net/_img/tmp/heart.gif);">こんな感じです。</p>です。で、ここで、どうですか背景を設定するときには、画像がダサいとやらないほうがましな感じになりますよね？ しかも、しかも、画像によってはとても字が読みにくくなりますよね？初心者にありがちな間違い。楽しく背景設定してみたけど、とても文字が読みにくくなる…。それは。まずは配色。上の例で言うと、ハートのピンクが濃すぎるのね。背景の城とのギャップがおおきいでしょ。(専門用語でコントラストがきついという）逆に言うと、コントラストを下げる、ピンクを薄くするとよいです。たとえば、こんな感じです。どう、ちょっとは読みやすくなったでしょ。とは言ってもですね、まだまだです。というのは、根本的に、大きい画像を背景にすると、どうしても文字が読みにくくなります。文字の下に敷く場合には、ラインとかドットなどの、地味な画像をコントラストを落として使用するほうがよいかな～と。たとえばこんなラインで。は～い。きょうはこの辺で～。
March 23, 2004
コメント(0)
-
楽天html講座(9)：行間をあけてみましょ～
今まで、<p>タグを中心に、スタイルシートを使ったレイアウトについていろいろと書いてきましたが、今日は、行間の設定を行ってみましょう。普通にこう文章を書くと、行と行の間が、このくらいなんですが、スタイルシートでこの行間を設定できます。line-height:160%;です。ラインハイト～行の高さ。という指定です。単位はパーセントで指定します。文字の高さに対する割合として、一行の高さを指定します。160％が一行だとすると、文字が書いてある部分が100％で行間が60％になります。他の単位での指定もありますが、とりあえず一つ覚えればよいでしょう。具体的にどう書くかというと<p style="font-size: 10pt; line-height:160%;border:solid 1px #FF9999; padding: 10px;">ここに段落の内容を書く。<p>ここでは、行間の指定以外にも、今まで講義に登場した他の指定も入れてみます。borderで枠線の指定。 枠の種類、太さ、色paddingで枠からの距離。font-sizeで文字（フォント）の大きさこの指定をした段落を実際に表示するとこんな感じになります。あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああどうでしょうか。文字の大きさや、行間で読みやすさが変わると思います。いろいろと試してみてね。では、今日はこの辺で～。
March 22, 2004
コメント(0)
-
楽天html講座(8)：ちょっとしたhtmlあれこれ
きのうは、スタイルシートで文字の色を変えるのをやりましたが、htmlのタグで替えることもできます。フォントの色と大きさ<font color="#9966FF">このように書くと</font>このように書くとのようになります。このfontタグでは大きさも指定することができます。<font color="#9966FF" size="+2">このように書くと</font>このように書くとのようになります。スタイルシートは、コロンとセミコロンで記述を区切っていましたが、こちらのhtmlタグではイコールとダブルコーテーションで区切りますので注意。シングルコーテーション''でもOKですが。リンクの張り方リンクを張るには、<a href="http://www.aaa.com/bbb.html">リンクをはる</a>のように書きます（このURLはダミー）が、このままだと、別のページにリンクして飛んでいってしまうと、今表示しているページから離れてしまうので、このウィンドウはそのままで、新しく別ウィンドウを開きたいような場合にはtarget="_blank"と付け加えてみましょう。_blankは、ブランクページを開くという意味。ここにたとえばtarget="link"などと適当に書くと、そういう名前のウィンドウとして、別ウィンドウが開きます。まとめてかくとこう<a href="http://plaza.rakuten.co.jp/mangaland/" target="_blank">リンクの例：ひなちゃん1号のホームページへ</a>表示すると、こうなります。リンクの例：ひなちゃん1号のホームページへそれでは今日はこの辺で～。
March 21, 2004
コメント(0)
-
楽天html講座(7)：テキストの色
■昨日までの復習■昨日までで、スタイルシートを利用して、見出しに枠を付けたり、背景に色を付けたり、テキストの大きさを変えたりしてみました。見出しは<h1>と</h1>の間に記入します。ちょっと補足すると。これが一番大きい見出しで、それより小さい見出しは<h2> h3 h4 などと、どんどん数字を大きくしていきます。たとえば第一部 第一章 第一項 のようになっているばあい、第一部（大見出し）がh1で第一章（中見出し）がh2で第一項（正味だし）がh3のように、かくと良いでしょう。たとえば、見出しを<h1>第一部：htmlとは？</h1>のようにかくと、下記のように表示されます第一部：htmlとは？で、このまんまだと不細工なのでh1 style=""のようにスタイルシートで文字や背景について指定することができるのですたとえば<h1 style="border:solid 1px #000000; border-left-width: 10px; background-color:#FFCCFF;padding:3px;font-size:14px;">第一部：htmlとは</h1>のように書いてみると第一部：htmlとはこんな表示に。きのうやったのは font-sizeでフォントの大きさを指定するというものでした。※フォントの大きさを指定するときの留意点があるんですが。また今度■今日の講義■今日は、さらにテキストの色を替えてみましょう。color:#CC3333;のように書けばオッケー。カラー、コロン、色（色は左メニューのwebcolorから）と指定します。たとえば<h1 style="border:solid 1px #000000; border-left-width: 10px; background-color:#FF0099F;padding:3px;font-size:14px;color:#FFFFFF;">第一部：htmlとは</h1>のように書いてみると第一部：htmlとはのようになります。では、今日はこの辺で～。
March 20, 2004
コメント(0)
-
楽天html講座(6)：見出し
■昨日の復習■え～と、今はスタイルシートで段落の回りに枠をつけて、背景色を指定するなどということをやりました。たとえば、こんなもの。こんなみだし～～。ソースはこう。<p style="border:solid 1px #000000; border-left-width: 15px; padding: 3px; padding-left:15px; background-color:#FFCCFF">こんなみだし～～。</p>んん。復習といいつつちょっぴり応用編も含まれてます。まず・border: solid 1px #000000; で、枠線全部を指定。黒い直線の枠を1pxで引く。そのあと・border-left-width:15px; と、左側の枠線の幅だけを上書きしてます。どうように・padding:3px; で、全体のパディング（枠から文字までの距離）を指定してから・padding-left: 15px; と、左側だけあけてます。paddingの場合他の書き方もあるけれど、ちょっとまた今度。これだけが正解というわけじゃなくて、ほかにも同じ表示になるような書き方はいろいろあります。が、いっぺんに色々言うと混乱するかもなので、徐々に小出しにしていきます！さらに応用編としてこんなのは？■見出し～～どうやって書くかは考えてみてね！ 線の種類は doubleだよ。ちなみにdoubleにして1pxだと二重線にできなくてsolidと同じになっちゃうので注意。■今日の講義■いままで、枠をつけるのを全部<p>タグでやってきました。複数の行にまとめて枠をつけるのは、「楽天日記」のなかで使えるタグは<p>タグだけ。日記以外のページとトップページはテーブルタグも使えるのでまたいつか。ですが、見出しを表すのには、本当は<p>タグではなくて、<h1>タグを使います。見出しの初めに、<h1>、終わりに、</h1>。で実際に書いてみましょう。すると。こんなかんじうわ！ぶさいく！ ブラウザで字がでっかくされてます。そういうわけなんで、これもスタイルシートで自分の好きな大きさにしてみましょう。書き方はいままでとおんなじです。<h1 style="">の中に指示を書きます。フォントの大きさはfont-sizeで指定します。いろいろ書き方はあるんですけど。ここはとりあえずfont-size:14pt;14ポイントと指定しましょう。（pxピクセルでもいいけど…）<h1 style="font-size: 14pt;">こんなかんじで</h1>こんなかんじででこれだけだと寂しいので、今まで習った枠などをつけてみたりしてください。たとえばこんなかんじでじゃ～、今日はこの辺で～。
March 19, 2004
コメント(0)
-
楽天html講座(5)：枠5
■昨日までの復習■スタイルシートで、段落の回りに枠をつけるということをずっとやってきています。今回初めてご覧いただく場合は 枠（1）からご覧ください。きのうの最後にこんなのも紹介しました。どうやって書くか、ちょっと考えてみて…。枠線を左側と下側だけにつけますね左側は border-left下側は border-bottomborder-left: solid 20px #666600;border-bottom: solid 2px #336633;こんなふうに、左と下の線の太さと色を変えてみると↑のようになるわけです。ソースを全部書くと<p style="border-bottom: solid 2px #336633; border-left: solid 20px #666600;solid 2px #336633; padding: 5px; margin: 5px;">こんなのも紹介しました。</p>色や太さ、線の種類なども工夫してみると面白いよ。※でも、実際は、こういう風に見出しに枠を付けたい場合は、pタグじゃないものを使った方がいいんだよね。（それについてはのちほどの講義で）★お知らせ＞ウェブセーフカラーの一覧表を2号のサイトにもつけました。←のよこのwebcolorを参照してみて！■今日の講義■枠そのものじゃないんですけど。枠の中、背景に色をつけてみましょうか。色はね。background-color: #FF99CC;のように指定します。どの色が、どういう色かは、ここのウェブセーフカラーの一覧表を見てね。背景色を指定すると、たとえばこんな見出し見出しですはどうでしょうか。 色の組み合わせや線の組み合わせを考えてみてね～。今日はこの辺で～。
March 18, 2004
コメント(1)
-
楽天html講座(4)：枠4
■昨日までの復習■1＞段落を表すのに<p>タグを使います。段落の初めに<p>と書き、段落のおわりに</p>と書きます。2＞段落の回りに枠線を付けるのに、スタイルシートで指定します。指定の仕方は、上の<p>タグのところに <p style="">のように書いて、""の中に指示を書きます。3＞枠線の指示は border:(ボーダー コロン）と記述し、そのあとに、枠線の種類、枠線の太さ、枠線の色 と記述します。たとえば border: solid 2px #336633;です。指示の終わりにはセミコロン(;)をつけます。4＞枠線から枠線内の文字までの距離は padding: 5px;のように記述します。（これも終わりにセミコロン。）5＞枠線から、枠線の外側の文字などの要素までの距離は margin: 5px;のように記述します。（これも終わりにセミコロン。）以上まとめて書くと<p style="border: solid 2px #336633; padding: 5px; margin: 5px;">こんなかんじです</p>表示するとこんなかんじです■今日の講義■枠線についてですが、全体的に枠線をつけたいときは、いままでのとおりですが、下だけ枠線をつけたいとき、右だけ枠線をつけたいとき、それぞれ別に指示することができます。そのばあいはborderとかかずにborder-top：上border-bottom：下border-left：左border-right：右を記述することができます。たとえば<p style="border-bottom: solid 2px #336633; solid 2px #336633; padding: 5px; margin: 5px;">このようにかくと</p>このようにかくとこのようになります。これを応用して、左と下だけとか指定してみたりするとどうでしょうか。見出しの飾りになりますね？色とか工夫すると結構おしゃれな感じにもできますよね？では、本日はこの辺で～～。よかったら、感想とか質問とか、もっとこういう事が知りたいとか合ったらお知らせください。
March 17, 2004
コメント(0)
-
楽天html講座(3)：枠3
■昨日の復習■<p style="border: dotted 3px #FF9933; padding: 5px;">こんなふうに書くと</p>こんなふうに書くとと表示されます。あ、言うの忘れていたけれど、pは段落という意味です。＜注意点＞・スペルミスをしないこと・すべて（空白も）半角で記入・文末にセミコロン（；）・セミコロンとコロンを間違いないようにね～。■今日の講義■＜1＞スパンタグ楽天日記の中で、枠を作るのに使えるタグはいままで説明した<p>タグの他に<span>タグがあります。（日記以外のトップページと、横のページではテーブルタグも使えますが）<span style="border: dotted 3px #FF9933; padding: 10px;">こんなふうに書くと</span>こんなふうに書くとと表示されます。上とまったく同じジャン！！と思うかもしれませんが、違うところが…。それは、中に改行が含まれてしまったときです。<p style="border: dotted 3px #FF9933; padding: 5px;">pタグの場合は、間にこんなふうに改行して書いたとき</p>pタグの場合は、間にこんなふうに改行して書いたときのように表示されますが<span style="border: dotted 3px #FF9933; padding: 5px;">spanタグの場合は、間にこんなふうに改行して書いたとき</span>spanタグの場合は、間にこんなふうに改行して書いたときこんな風に表示されます。やなかんじだね。（笑）＜2＞もういっこのちがいpタグは、段落を表すと書きました。だから、ブラウザが、「うん、ここは段落の切れ目なのね」と、自分で判断して、段落と段落の間をだいたい一行分ぐらい開けて表示します。自動的に。で、自分としては開けてほしくない！つめて表示して！ということがあるかもしれないですね？そういうときにはマージンを使います。margin: 10px;マージン10ピクセル。 この数字を記入することで枠と、その周りの距離を調節できます<p style="border: dotted 3px #FF9933; padding: 5px; margin:10px;">こんなふうに書くと</p>このぐらいの距離感<p style="border: dotted 3px #FF9933; padding: 5px; margin:0px;">こんなふうに書くと</p>このぐらいの距離感もちろんスパンタグにもmargin は設定できます！それでは今日はこの辺で～
March 16, 2004
コメント(0)
-
楽天html講座(2)：枠2
■昨日の復習■えーと、昨日の日記で枠に囲む囲み方を書きました<p style="border: solid 1px #FF6600;">こういうふうにかくと</p>こういうふうにかくとと表示されます。・border 枠という意味・そのあとにコロン:・区切りには半角のスペース・solidは線の種類（その他の種類は昨日の日記を参照）・1pxは線の太さ・#FF6600 は線の色の指定（他の色は昨日の日記参照）・文末にセミコロン;■今日の課題■で、枠をつくったのはいいんだけど、なんか変じゃない？そう、枠線と文字がくっつきすぎよね？ もうちょっと離したい！そこでこういう風に書いてください。さっきのセミコロンの後ろにpadding: 10px;パディング 10ピクセルこの数字で空間の大きさが決まります。<p style="border: solid 1px #FF6600; padding: 10px;">こういうふうにかくと</p>こういうふうにかくとという風になります。今日は以上だよん。
March 15, 2004
コメント(0)
-
楽天html講座（1）：枠
ど～も。ひなちゃん２号があまり日記を書かないので、姉、ひなちゃん１号によるhtml講座でお茶を濁すことになりました。楽天では、htmlの制限が多いので、そのなかで使えるタグやおもにスタイルシートを使ったレイアウトなどについてお勉強しましょう。まずはこんな感じで枠に囲ってみました。これをどうやって書くかというと、枠で囲みたい範囲をまず<p>と</p>で囲ってください。囲いましたか？そしたら、<p style="">と記述を追加。pのあとには、「半角の空白」をいれてください。全角はだめだよ。そのうしろの、スタイルイコール ダブルクォーテーションの間に指示を書きます。border: solid 1px #FF6600solid というのが線の種類です。他にはnone なしdoubledasheddottedgrooveridgeinsetoutsetがあります。で、border: solid 1px #FF6600の二番目の1pxてのは1ピクセルです。この数字を大きくすると線が太くなるよ。で、最後の#FF6600が色です。どの数字がどういう色なのかは1号が作ったwebセーフカラー一覧表をご覧ください。以上まとめて書くと<p style="border: solid 1px #FF6600;">です。・間の空白は半角・borderのあとにコロン：・ダブルコーテーションで囲んでいる前の部分でセミコロン;をつけて。コンピューターは細かいので、ほんのちょっとのスペルミスも見逃してくれないのでよ～くみてね。これだけだと、まだへんなので、もっとかっこよくなるように、続きます。わかりましたか～～？今日はこの辺で。
March 14, 2004
コメント(0)
-
はじめての日記
姉に勧められて、楽天日記を作ってみました。これからだんだん記入していこうと思います。ちなみにおねえちゃんのサイトはこっち＜ひなのマンガランド＞です。マンガ家を目指しているみたいです。興味がある方はぜひ応援してあげてください。おねえちゃんは「ひなちゃん１号」と名乗っているようで、わたしは勝手に２号にされちゃいました。
March 13, 2004
コメント(0)
全19件 (19件中 1-19件目)
1
-
-
- アイフォン・アイポッドの必需品
- スティーブ・ジョブズの死に際に発し…
- (2025-07-14 03:41:24)
-
-
-
- iPad
- 【ミニマリズム】iPhoneを「通信専用…
- (2026-06-25 19:00:46)
-
-
-
- 【楽天市場】☆☆楽天おかいどくお買い…
- ハロウィンに！アサヒ「モンスター …
- (2026-10-03 21:47:47)
-
