Entries


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-件のコメント

コメントの投稿

新規

※設定NGワードは『http』です

投稿した内容は管理者にだけ閲覧出来ます

-件のトラックバック

トラックバックURL
http://pugiemonn.blog6.fc2.com/tb.php/1226-8844c807

職業訓練:Webデザイン制作,HTMLとCSSコーディング


HTMLはHTML4で一度開発が中止しています.

方針としてはXHTMLで行くはずだったのですが,XHTMLの開発が頓挫しまして,現在はHTML4とXHTMLを併せ持ったHTML5へと向かっています.

HTML5にW3Cの勧告が出るのは2020年頃になると思われますが,実際にHTML5を使うとするなら2012年頃になるでしょう.

CSSでのレイアウトについて


floatプロパティについて

CSSのfloatプロパティを使用して左右にレイアウトを行います.floatは左と右しか指定できません.ボックスは幅とマージンを指定することにより,レイアウトを行います.marginがかぶった際は大きいほうが優先されます.margin-right:40px;とmargin-left:30px;がかぶるとmargin-right:40px;になるということです.floatの段組は100段くらいまでは組めるようです.

グローバルメニューを作成する場合

ulやliで作りましょう.display:inline;と設定します.改行がなくなるので横に並び,paddingでレイアウトします.しかし画像を使用する場合はうまくいきません.隙間が開いてしまいます.画像を使うならここにfloat:left;を設定すると隙間が空かなくなります.

角丸を作成する場合

方法は30通りくらいあります.

画像を上,真ん中,下と画像を分けるのが一般的です.

テキストの行間を指定

.text{line-height:1.5;}

とします.

単位は付けないことです.

リストの文頭に画像を指定する場合

background-imageを指定しましょう.
padding-leftに画像のサイズを指定します.

画像にレイアウトを施す場合

imgは本来ブロック要素ですが,明示的にdisplay:block;を指定してあげることが望ましいです.
imgを中央ぞろえする場合はdisplayを変えてからmargin-leftとmargin-rightにautoを指定します.

テキストを中央にそろえる場合について

中央揃えはtext-align:center;とします。これはテキストにのみ使用してください。
text-alignではDivなどが中央になりませんのでご注意ください.

DWの使い方,コーディングの実践



Wordの段落スペースのクリーンアップとチェックし,ペーストスペシャルします.
Wordで見出し設定をしておけば,実際にペーストされた際にその設定を引き継いでくれます.ulやliはタグで囲って表示されます.

皆さんからの質問について



ブロック要素とインライン要素の違いは

インライン要素はwidthやheightを利用できません.ブラウザで無視されます.インライン要素はpaddingが使えmarginは使えません.
使い分ける必要がありますので,覚えてください.

displayプロパティを使うことで相互に変換可能です.

よく使うプロパティは

プロパティはdiplayやwidth,heightなどありますが,特にこれといって覚えたほうがいいというものはありません.みんな使えるようになってください.絞り込まずにどんどん使ってください.30サイトくらい作ればCSSプロパティを覚えられるのではないでしょうか.

授業の感想について


授業はかなり駆け足な印象を受けました.一度遅れてしまうと追いつくのは大変なのではないでしょうか.短時間の授業に詰め込む感じになりますので仕方ないのかもしれません.


0件のコメント

コメントの投稿

新規

※設定NGワードは『http』です

投稿した内容は管理者にだけ閲覧出来ます

0件のトラックバック

トラックバックURL
http://pugiemonn.blog6.fc2.com/tb.php/1226-8844c807

Appendix

プロフィール

川崎修

  • Author:川崎修
  • インターネット大好き!
    調布周辺で自宅警備してます



    メール:pugiemonn@gmail.com
    skype:pugiemonn
    twilog:Twilog
    mixi:mixi
    facebook:facebook
My Profile by iddy
FC2ブログ

カレンダー

06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -

最近の記事

Twitter

コミュニティ

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

Adsense

月別アーカイブ

はてぶ数

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。