初心者でもわかりやすい/WEBデザイン勉強ノート -3ページ目

初心者でもわかりやすい/WEBデザイン勉強ノート

WEBデザイン勉強中、ひよっこWEBデザイナーの勉強ブログです。

こんにちわ!

りんごです。

ブログはじめの自己紹介でお話しましたが、
私はWEB経験ゼロでWEBデザイナーになりました。

そんな私が独自で勉強してたのが


photo:01

です。

【送料無料】現場のプロから学ぶXHTML+CSS は、
当時まったくWEBがわからない私にも、簡単にわかるように説明してあります。


photo:02

アンダーラインとかいっぱいひいてありますw

たしか一ヶ月で5回は読み直しました。

全部読むのではなくさらさら 大事だな~ と思うところを中心として読んだり。


photo:03


自分独自でメモを記入したりしました。





いまでも、みなさんにどうわかりやすく伝えられるかなあ・・・って時に参考にしたり。
わからないところは、読み返して復習に使ったりしてます。


「WEBデザイン勉強したいです」とのたくさんのコメントをいただき、
今日は、この本を紹介させていただきました!^^


【送料無料】現場のプロから学ぶXHTML+CSS

【送料無料】現場のプロから学ぶXHTML+CSS
価格:2,940円(税込、送料別)


WEBの入門書
として、皆さんのお勉強に役立ててください!
レンタルサーバー「クイッカ」

サイト制作するならクイッカ がおススメですよ!!^^

初心者でもわかりやすい/WEBデザイン勉強ノート

さてさて、今日はbodyのお話です。




















前回の復習をしたいという方は、過去日記を見てくださいね!


初心者でもわかりやすい/WEBデザイン勉強ノート
<body>
<h1 タイトル・小見出しなど>
<a インライン要素>
<img 画像>
</a>
<h1>
</body>



< >で囲み< />で終わるのが基本というお話覚えているでしょうか?


ブロックレベル要素


h1~h6 見出し (アメブロでいう日記タイトルとか)
p 段落
リスト ulやol
表 table
フォーム form要素などがあります。


ブロックレベル要素はひとつの大きな塊のことです。


インライン要素

a アンカー
img 画像
strong 強調


インライン要素は大きな塊の内部です。


<Div>がわかれば大体大丈夫です。

divってなーに?

ページ内のコンテンツはヘッダー・ナビゲーション・メイン・サイド・フッターでわけられます。
このような範囲を示すために<div>タグでくくります。
またdiv要素にidを振り、「ここはこうゆう範囲」というここりをつけます。

つまりヘッダーを指定するには

<div id="header"></div>

と指定してあげます。
id以外にもclass指定の方法もあり、これは多数のタグにつけ同じ指定をしてあげることが
出来ます。

描き方は

<div id=" "></div>
<div class=" "></div>


という描き方をしてあげましょう。


OKですか??


サイト制作をするなら!





こちらの本もおススメです!


では!明日もお楽しみに^^


レンタルサーバー「クイッカ」
こんにちわっ 

りんごです。

今日はちょっと作業現場の紹介でも・・・・

photo:01

こちらが、まいパソコンくん。
WinのVistaを使っています。

基本的にパソコン作業はすべてペンタブで行っています。
かれこれ5年くらいずっとペンタブなので、マウスより使いやすいです^^♪



photo:02

こちらが参考書の一部。


かなり参考書があるんですが・・・。
最近買ったものです。

写真レタッチ・加工の参考書です。

【送料無料】ほめられデザイン事典写真レタッチ・加工


photo:01

中は、すぐに使える写真加工の方法が1からわかりやすく書いてあります。

【送料無料】ほめられデザイン事典写真レタッチ・加工 には、およそ148もの
写真加工方法が載ってるんです!

たとえば。。。
マスキングテープ風の加工も、こんな感じに記載されています(^^)!


photo:02

わかりやすいんですよー♪


表紙はこんな感じ↓



この表紙みたいな加工方法もわかりやすく紹介されていますよ!






初心者でもわかりやすい/WEBデザイン勉強ノート













さて、今日はheadのお話です。
(前回を見てない人は→htmlの構造 で復習してね♪)

head

トップページタイトルや、個別ページのタイトルが入ります

初心者でもわかりやすい/WEBデザイン勉強ノート








この場合

<head>
<title>記事を書く|Ameba(アメーバ)</title>
</head>


となります。ですので、上記のような描き方でタイトルを明記させればOKです。

またtitle要素のほかにmeta要素があります。
meta要素はそのページ全体に関わる基本情報です。
(meta情報はtitleより先に指示しましょう)

細かいmeta要素については記述できないくらい多いので、自分にあったものを
検索してmetaで指定してあげてください。
質問があれば受けます。


また、CSSもheadでlink指定します。


「CSS・・・・?」

新しい単語です。css。htmlと同じくらい重要な単語になります。
簡単にいってしまえば、cssは装飾です。
htmlでページの構成をつくりcssで装飾していきます。

アメブロにもcss編集ページがあるので、なんとなーくわかる人も
いらっしゃるとおもいます。

(要望がありましたらアメブロのカスタマイズ方法も記述します)

話を戻しまして。

他にはflashなどを使用した場合も、このheadで指定します。

長くなりそうなので、次回はbodyの本文の構成の説明。

次回の説明が終わりましたら、実際に簡単なHPを参考に一緒に制作して
いきたいと思います!

HP制作をはじめるかたはレンタルサーバー10G でサーバーレンタルどうぞ!

ライブドア大容量サーバ、破格の大セール☆ のサーバーも現在セール中です^^


WAPPY  

わんわん!



保険マンモス⇒イラスト図表で保険料を3~4割安くする”ビジュアル生命保険サイト”
↑ ↑ ↑
応援クリックお願いします
↓ ↓ ↓
リフィート 脚痩せ

いつもありがとうございます!励みになります!

では、次回もお楽しみにしててください!




最安値に挑戦!詳しくは気になる画像をクリック!







ソフト+講座セット 66%OFF


最後までご愛読ありがとうございます!

次回をお楽しみに~
こんにちわ(-^□^-)

今日は月額98円から使えるレンタルサーバー「クイッカ」 の紹介です。

自分のサイトに必要なサーバ。
高いのでは????と考えてしますかもしれませんが・・・

朗報です(なになにー?^^

98円で使えるレンタルサーバを見つけました。


レンタルサーバー「クイッカ」 です。



HP制作の方法は随時ブログのほうでお勉強していきましょう!

とにかく安いので、登録しておいても損はないと思います。


おススメですのでご参考にどうぞっ



レンタルサーバー「クイッカ」

↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ 
お申し込みはこちらからどうぞ~



WAPPY


イラストレーター・デザイナー・写真家さんなど・・・容量多い方は
こちらもご参考にどうぞ~


では!
WEBのお勉強のほうも今日も頑張っていきましょう!



エステ  足やせ
Dreamweaver とは?


初心者でもわかりやすい/WEBデザイン勉強ノート

AdobeHP制作ソフトです。

メモ帳でもタグ打ちはできますが、このソフトを使えばタグと制作HPが
一緒に見れるので、慣れれば使いやすいですよ~


初心者でもわかりやすい/WEBデザイン勉強ノート

こんな感じです!!(画像は私が今制作しているエステサイトです)


↑ ↑ ↑ ↑ ↑ ↑
こちらからお求めください


またフレッツ光新規加入でDreamweaver CS5.5 日本語 Windows版が最安値!!詳しくは0120976809まで¥ ... ですと
3800円で購入できますよ!!

3万円くらいする商品なので、これは安いです。


【ポイント5倍セール】 2012/03/05 9:59まで【送料無料】Dreamweaver 5.5 MAC 日本語 UPG版 ...
2万円を切る値段なので・・・・安い!!


本格的にHP制作をしたい方にはおススメのソフトです!!


参考書もどーぞ♪



またHPやブログを持っている人はアフィリエイトB がおススメです。
アフィリエイトB に無料登録するだけで、簡単に副収入をGETのチャンスです!
みなさんのブログにアフィリエイトB の広告を貼るだけですよ!!



ではっ♪


【送料無料】ポネックホットパック

【送料無料】ポネックホットパック
価格:3,800円(税込、送料込)

読者様・訪問者の皆様こんにちわ!

ポートフォリオを印刷しようとしたら・・・インクが切れた・・・・

各種黒インク99円均一!≪半額インク≫  黒インクが安い・・・
インクって地味に高いから出費ですよね(/TДT)/・・・
ここなら送料もかからないからお店で買うよりお得ですよ~


さて、インクの話はさておき。
今日はXHTMLの構造のお話です。


WEB勉強ノート


前回「タグ」についてお話しましたが、

今日は構造!!

ホームページ全体は ↑ のような仕組みでできています。

①XML宣言ってなーに?
XML宣言は、このXHTMLがXMLであることを宣言しています。
XMLとは拡張可能マークアップ言語の一種であることを指定しています。
またこの宣言の記述をすると、IE6が描写モードとして相互変換してしまうため、記述なしのHPもあります。
しかし、IE6のシェアが低下している現在では、記述するサイトも増えています。

難しいと思いますが・・・

とりあえず(?)宣言しておけば問題ないです←


②文書型宣言
どのバージョンのXHTMLを使うかを記述します。
実務的には「XHTML 1.0 Transitional」を採用するのが一般的です。

記述方法は
<!DOCTYPE PUBLIC "ここに私用する文書">

またドリームウィバーのソフトを使えば簡単ですよ。



 【送料無料】Adobe DreamweaverCS5パ-フェクトマスタ-
価格:2,940円(税込、送料別)

【送料無料】Adobe DreamweaverCS5パ-フェクトマスタ-





初心者さんも、HPを制作したい方も、勉強したい方にも

おススメの本です。

私もCS5を使っているので持っています(^^)

ぱらぱら見るだけでも「こうなってるんだ~」みたいな発見が

あると思います。



③html要素

html要素は、ページのすべての基点となる大切な要素です。

html要素は「body要素」と「head要素」から成り立っています。

皆さんが見ているブラウザは、「body要素」です。画像も、文章もすべて、
このbody要素に記述されたものです。

body・・・つまり体!すべてなのです!

また、「head要素」。つまり頭の部分ですね!
ここには、例えば「日本語を使いますよ~」とか「タイトルは○○ですよ~」とか
「このHPは、こんなです。(例えば、横浜のペットショップのHPです。)」とかを記述するところです。


OKですか?



簡単にいってしまえば、XML宣言・文書型宣言は定型のものを記述。
html要素で、HPを作り上げていく・・・・

そんな感じです!

大体の構造はわかっていただけましたでしょうか?
質問がありましたら、お気軽にお願いします(-^□^-)



レンタルサーバ。借りるならこちら
↓ ↓ ↓ ↓ ↓

レンタルサーバーならライブドア


ブログでお金をかせぐなら
↓ ↓ ↓ ↓ ↓

アフィリエイトで稼ぐなら、アフィリエイトB



次回は、「head要素」について、もう少しお話します♪

また入門編以外にも、WEB小ネタ編・こまったときのWEBメモ帳など・・・
コンテンツも増やしていく予定です!


ではっ♪
「WEB制作って」難しい!
「初心者じゃHPなんてつくれないよ!!」

そんな声が友人の間からもちらほら・・・

もちろん、1年前の私もそうでした。


WEB勉強ノート











ただの英語の羅列に見えていました。

しかし、HTMLの構造を勉強すれば、それはもう
英語の羅列ではなくなっていた!!!!・・・のです(^^)v

1つ1つに意味があり、とても大切!

WEB勉強ノート



















<html>や<head>などのように<>でかこまれたものをタグといいます。

タグの基本としては、

<html>・・・・・</html>

のように、

<開始タグ>・・・・・</終了タグ>

を指定するのが基本のやり方です。
しかし、img(画像指定をするときに使うタグ)など終了タグを使わない例外もあります。

これが、基本的なタグのうちかたです。

ホームページを右クリック→ページのソースを表示で、
そのページのタグが見れます。
英語の羅列に見える・・・かもしれませんが、
<開始タグ></終了タグ>を見つけてみましょう!


では、XHTMLの構造の話はまた次回に!


高速大容量レンタルサーバ10G


Xbit





応援クリックお願いします!!
↓ ↓ ↓

クチコミで広まった生命保険の無料相談

↑ ↑ ↑
安さで選ぶなら・・・これがおススメ!
【みんなのレンタルサーバ】

WAPPY

とにかく安いので、初心さんやHPを気軽に始めてみたい人にはおススメですっ!




【ビジネス向けの安定性と信頼性を追求したレンタルサーバ】


ラピッドサイト

~特徴~
・ビジネス利用にも快適な、万全のセキュリティ対策

・はじめてでも安心、充実サポート

・目的に合わせて選べる、国内/国外データセンター

・やりたいことがすぐできる アプリケーションインストール済み



【ライブドアのレンタルサーバ】


レンタルサーバーならライブドア

980円から使用できますっ!
初心者にも安心のレンタルサーバです。




【WADAX】

WADAX

高機能&安心のレンタルサーバです!
はじめまして。りんごです。
はじめに、WEBデザイナーになったきっかけをお話したいと思います。


美術大学進学

子供の頃からイラストを描くのが大好きで、図工の時間が大好きな子供時代。
そのかいあって、念願の美大へ進学することが出来ました。
4年間、課題と自分への作品に悩み・学びました。

・・・あっとゆうまに4年生。

立ち向かってくるもの・・・

そう「就職」です。

やはり、イラストが大好きな私。イラストやデザインに関係した職業で
働きたいと強く思いました。
就活をはじめ何社も何社もデザイン事務所の面接をしますが・・・ダメ。。。

なかなか就活が上手くいかず、諦めていたとき・・・

「WEBデザイナーとして採用」の電話がかかってきました。

実は、WEBデザイン経験ゼロの私だったのですが、
幸運なことに私のイラストや制作したデザインを気にってもらえ合格になりました。



WEBデザイン経験ゼロでWEBデザイナーに

就職先が決まったからといって、うかうかしてられませんでした。
WEBの知識がまったくないのに、WEBデザイナーとして採用されたんですから・・・!

HTML? CSS?? Divってなーに???

そんな感じで、私のWEBデザイナーとしての第一歩が始まったのです。