こういうページ自分で作った事無かったので手探りででしたけども;;;
ま、大体は先生の見本をパクリましたけど(殴
でも、見本だけで、タグは殆んどいただいておりませんw
分からないところだけ参考にしただけw
画像や、コンテンツタイトル、線種、レイヤースタイルなどはオリジナルですけどねw
ブラシとか、探してきたやつだからねw
素材元が分からないので本体は載せず画像でw
大丈夫だとは思うんですが、一応念のため。
クリックで拡大。
またはじかれたので、ちょっと雑に縮小かけてます(^▽^;)
「これどうやってるの?」とかは個別に聞いてください。
色彩感覚に関してのツッコミは無しの方向でお願いします;;;
尚、住所等架空です(そりゃそうだ
+トップ
+店舗案内
+商品メニュー
+アクセス情報
サンプル
↓で説明したCSSを使ったページになります。
参考程度に。
今地道に作ってるページの一部。
中途半端ですが、そこは作成段階なのでスルーでお願いします( ̄▽ ̄;)
リンクとか繋げてますが、繋がってないのでクリックしても意味無いです(え
右クリック→ソースの表示で見てください。
他にも書いててごちゃごちゃしてて見難いですが、そこはお許しを;;;
他の部分も参考にしてもらって構いません。
ちなみに、縦ラインで使ってる画像↓
手作りです。
学校でDTPの時間にフォトショ使ってたので、目を盗んでちまちま作りました。
透過済みのせいか、このブログでは背景が真っ黒で表示されちゃうみたいです( ̄▽ ̄;)
+++
どうでも良いですが、これをアップする時、新アップローダーを使ったんですが、相性が悪くて固まった(TωT)
先が不安だなぁ・・・。
いきなり飛んじゃいますが、一応答えておきましょう^^
しかし、これはCSSを使用しますので、若干専門知識になってくるかな( ̄▽ ̄;)
CSSを使用してやります。
<style type="text/css">
<!--
body{background-image:url("画像名");
}
-->
</style>
これを<head>~</head>に書きます。
赤い部分が、CSSを書くという定義部分になります。
青い部分が、ページ全体の背景画像を定義するCSSになります
☆画像名について
画像名は、予め半角英数で名前をつけておきます。
WEBにおいて、ファイル名はすべて半角英数で付けるのが決まりです。
<img>タグも<a href=>~</a>タグそうですが、拡張子まで書きましょう。
(例:gazouという名前の拡張子gifの画像を貼る時:gazou.gif)
また、別フォルダの画像を持ってこれるようにする方法もありますが、説明が難しいのと、ややこしいので、最初は同じファイル内に置いてやりましょう。
+貼り方を指定したいとき
<style type="text/css">
<!--
body{background-image:url("画像名");
background-repeat:値;
}
-->
</style>
先程の記述の下に、紫色の部分を記述してください。
☆値の部分で設定できるもの
repeat:並べて表示されます
repeat-x:横方向のみ並べて表示されます
repeat-y:縦方向のみ並べて表示されます
no-repeat:1つだけ表示されます
使用例:background-repeat:repeat-x;(横方向に並べて表示されるように設定しました)
右下固定とか、そちらを求めている場合はまた言ってください。
( ´△`)アァ-
自分説明下手すぎる;;;
※スペルミスあるかもしれません(え
ご了承下さいm(_ _)m
まず、何から書いたら良いのやら・・・(苦笑
文字装飾からいってみようかなw
よく使うものをw
<h1>~</h1>:見出しを指定できます。
ちなみに、これは<h1>~<h6>まであります。
数字が小さいもの程、大きく字が表示されます。
でも、先生曰く、<h1>から順番に使うのが規則との事。
凄い大きいですが、CSSを使えばサイズが指定できるので問題ないです。
<p></p>:段落が指定できます。
文章を一塊に出来ます。
CSSつかう場合は、ここにクラスを指定したりします。
<br>:強制改行・・・なんだそうです(え
専門学校入るまでこれしか使ってなかった私はびっくりですが( ̄▽ ̄;)
<hr>:水平線が引けます。
<b>~</b>:文字を太字にします。
ブログなんかでも使ってあるので、ソースが表示されるモードにして見てみると良いかもw
文字装飾でよく使われるのが<font></font>タグです。
この中に入れて使えるものをご紹介しますw
※分かりやすいように、fontも書いておきます。
<font size="値">~</font>:文字サイズを指定できます。
値の数字が大きいほど、大きい字になります。
3が標準サイズ・・・だった気がする(え
2ぐらいが読みやすいサイズだと、個人的には思います。
<font color="カラーコード・色名">~</font>:文字色を指定できます。
コードは#から6桁で。
色名は、『red』や『blue』など指定可能。
色と値をまとめて指定する場合は、<font size="1" color="red">のように、スペース1つ空けて入力しましょう^^
これだけに限らず、他のタグもそうですw
☆ちなみに
ページ全体を統一して設定する場合は、<basefont size="">(size部分はcolor等でも可能・・・だと思います(殴
多分、どんなページでも出来ると思います^^
某人が困ってるので( ̄▽ ̄;)
触りだけ。
説明下手なので役に立たないと思うけど、一応ねw
メモ帳で作る場合、保存の際は半角英数で任意の名前を打った後に、拡張子『.html』を打ちこんで保存する必要があります。(例:index.html)
すべて半角英数入力です(これしないとテキスト形式のままになります)
これで、HTML形式になります。
この際、文字コードをいじったりもするようですが、そのままでも十分いけるのでこのまま。
ページを確認するにも、これが出来ないとはじまらないので、まずはここから覚えましょう^^
タグを編集する際、IE8.0以降、変わってます。
保存したHTMLファイルを右クリック→プログラムから開く→notepad
↑この手順でやると、ソースがメモ帳形式で出てくると思いますw
続いて、WEBページ作成基本構成タグはコレ↓
<html>
<head>
</head>
<body>
</body>
</html>
+ちょこっと解説
<html>~</html>:「これはHTMLですよ!」と宣言するものです。
すべてのタグはこの中に書いていきます。
<head>~<head>:ページには表示されない部分。
<title>~</title>でタブに表示されるページのタイトルを設定したりできます。
検索避け、CSSなんかもこの間にタグを書きます。
<body>~<body>:WEBページに表示される部分です。
ここに内容を書いていきます。
これは、ページを作るうえで大事になるので、覚えましょう^^
10/05/12~
@airibaloverさんのツイート
●ディズニー垢(@airi_tdls)
15/07/07~
@airi_tdlsさんのツイート
11/03/27~
嵐垢設立。
最早病気状態。
大野さん中心に愛を注いでますが、ゴコイチが一番!
5年目突入しましたが、まだまだ学習中。
至らない点がまだまだ多いです。
BW福岡1/14参戦
アラフェス2012 9/21参戦
LOVE福岡12/21参戦
DIGITALIAN福岡 11/16参戦
YUIも大好き。
気づいたらファン歴7年。
『LIFE』で知って『Rolling star』でファンになりました。
コンは未経験。
休止しても愛さめず。
最近は趣味でひとりTDLにはまる。
遠方なので回数が少ないため、いつまで経ってもビギナーの予感。
BLEACHは、影から見守る見守り役に徹っすることにしてます。
何でも、のんびりまったりがモットー。
☆ツイッター
日常用アカウント:airibalover
嵐専用アカウント:airi_ara4
ディズニー専用アカウント:airi_tdls