■
URL(Uniform Resource Locator)「ユニフォーム・リソース・ロケータ」
インターネット上に存在する情報資源(文書や画像など)の場所を指し示す記述方式。インターネットにおける情報の「住所」にあたる。情報の種類やサーバ名、ポート番号、フォルダ名、ファイル名などで構成される。
URI(Uniform Resource Identifier)「ユニフォーム リソース アイデンティファイア」
インターネット上に存在する情報資源の場所を指し示す記述方式。インターネットにおける情報の「住所」にあたる。URIは包括的な概念であり、現在インターネットで広く用いられているURLはURIの機能の一部を具体的に仕様化したものである。
◎自分の力量で作れるサイトを何件も作ってみること！
文字サイズmedium 100.0% 1.000em 16px
0,875emは14px
2012年11月30日
CSS練習問題：縦ナビ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>正しく構造化されたHTMLの例（CSSが適用されている場合）</title> <!--href="フォルダーに合わせる" media=" /* スクリーン及び紙媒体向けスタイルシート */"--> <link rel="stylesheet" href="css/style1.css" media="screen, print"> </head> <body> <!--div id=わくの線"shopping"認識させる中身の文字はCSS合わせる。--> <div id="shopping"> <h2>今日買った物</h2> <ul> <li>豚肉</li> <li>じゃがいも</li> <li>たまねぎ</li> <li>にんじん</li> </ul> </div> </body> </html>
@charset "UTF-8";
/*すべてのリセット*/
* {
margin: 0;
padding: 0;
}
/*border線 solid途切れのない線 small（スモール）文字小さい。marginは上右下左 外側。paddingは１つだけなら上右下左 内側、全体に指定してる。２つなら上下 左右 width わくの幅 idが(＃)でclassが(.)を最初に書く。*/
#shopping {
border: 1px solid #ccc;
font-size: small;
margin: 50px 0 0 50px;
padding: 10px;
width: 400px;
}
/*font-weight(ウェイト）:normal(ノーマル）文字の太さが普通;*/
#shopping h2 {
background-color: #06c;
padding: 3px;
color: #fff;
font-size: small;
font-weight: normal;
}
/*list-style-type:none;(リスト・スタイル・タイプ）（ノーン)･を取る*/
#shopping ul {
list-style-type: none;
}
/*dotted点線（ボーダーで調べたらでる）*/
#shopping li {
border-bottom: 1px dotted #ccc;
padding: 3px;
}
【CSS12】
HTMLの入力に不安がある人は入力から
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>エコロジー＆環境問題</title> <link rel="stylesheet" href="css/style2.css" media="screen, print"> </head> <body> <!--id=1回だけ class=複数してい--> <div class="box"> <h1>エコロジーへの取り組み</h1> <p> エコロジーや環境問題への関心は、年々高くなっています。<br> Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。<br> 専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 </p> <p> また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。<br> リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。 </p> <address>Copyright (C) Computer Technology Groups. All rights reserved.</address> </div> </body> </html>
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 1.0em;
text-align: center; /* IE6対策 コンテンツの中央揃え */
}
/*width: 480px 横幅をしていする単語。height高さの単語。;margin: 0 auto;0だから中央揃え*/
.box {
width: 480px;
margin: 0 auto;
}
/*padding緑の枠を広げているのが*/
h1 {
font-size: large;
color: #fff;
margin: 20px 0;
padding: 20px 0;
background-color: #9acf9c;
}
/*1emは1文字分*/
p {
font-size: 0.875em;
line-height: 1.5;
color: #555;
text-align: left;
margin: 0 0 20px 0;
}
/*border-top(境界線の上側を)*/
address {
font-size: 0.7em;
font-style: normal;
color: #55924f;
padding-top: 8px;
border-top: solid 9px #9acf9c;
}
【CSS13】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>デザインと色</title> <link rel="stylesheet" href="css/style3.css" media="screen, print"> </head> <body> <div class="box"> <h2>デザインの話</h2> <div> <p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p> <p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p> </div> </div> <div class="box"> <h2>パッケージの色</h2> <div> <p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。</p> <p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。</p> </div> </div> </body> </html>
@charset "UTF-8";
* {
margin: 0;
padding: 0;
font-size: 1.0em;
font-family:
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
Meiryo,
"メイリオ",
Osaka,
"MS P Gothic",
"ＭＳ Ｐゴシック",
sans-serif;
}
.box {
width:560px;
margin:30px 0;
}
/*float:left;隣に並べたいとき、横に並べる。*/
h2 {
width: 140px;
font-size: 1.1em;
color: #000;
text-align: right;
background-color: #6F6;
float:left;
}
.box div{
margin-left:150px;
border-left:solid 4px #ff7f00;
padding-left: 10px;
}
p{
text-align: justify;
line-height: 1.5;
font-size: 0.875em;
color:#888;
}
【CSS15】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>縦ナビメニュー</title> <link rel="stylesheet" href="css/style4.css" media="screen, print"> </head> <body> <div class="nav"> <ul> <li><a href="#">メニューのリンク１</a></li> <li><a href="#">メニューのリンク２</a></li> <li><a href="#">メニューのリンク３</a></li> <li><a href="#">メニューのリンク４</a></li> <li><a href="#">メニューのリンク５</a></li> </ul> </div> </body> </html>
@charset "UTF-8";
.nav {
font-size: 0.875em;
}
.nav li {
margin: 0 0 8px 0;
line-height: 1.2;
color: #f00;
}
/*text-decoration(テキストデコレーション）none線が消える*/
.nav li a {
color: #000;
text-decoration: none;
}
/*text-decoration(テキストデコレーション）underlineポインターがいったら出るようになっている。*/
.nav li a:hover {
color: #f80;
text-decoration: underline;
}
