Secret 003 ＣＳＳ
Secret 003 ＣＳＳ
「最後はこれ、『Copyright』、著作権な。『©』で©マークが出る。忘れずに入れてくれ。後がややこしい」
「はい。それから、電話番号とメールアドレスに改行を入れると見やすいと思います」
「倉橋さん、改行の『<br>』でもいいと思うけれど」
「ら、雷音さん……。本当は、優しいのですね」
「ふ、普通よ！ 誤解しないようにね」
――――――――――――――――
遠方の方、又、ギフトにもどうだぞお申しつけください。<br>
XX-XXXX-XXXX<br>
mashiro _design@xxxxxx.co.jp
</p>
<small>Copyright © マシロデザインカンパニー All Rights Reserved.</small>
</body>
</html>
――――――――――――――――
参照 http://caxap.life.coocan.jp/index_005.html
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
遠方の方、又、ギフトにもどうだぞお申しつけください。
XX-XXXX-XXXX
mashiro _design@xxxxxx.co.jp
Copyright © マシロデザインカンパニー All Rights Reserved.
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
参照
（http://uhi.sa-suke.com/md006.jpg）
「はい、お昼に行って来て。自分は、用があるからこれで」
室生天結は、何するでも素早く、もういなかった。それに私が気が付いた途端に、私のお腹が正直になった。
きゅうう……。
「やっだあ！ 倉橋さん。お腹が空いてたの？ 私は社員食堂はあまり行かないの。外で食べるわ。どうされます？」
「お弁当があるから……。中庭にしますね」
「分かったわ。一時三十分に戻って来てくださる？」
私の返事より素早く、彼女も社外へ食べに行ってしまった。
さて、私はのんびりとあたたかな中庭のベンチでお弁当の風呂敷を広げた。
「ふう……。仕事が急に変わって、私もちょっと変わったりしていないかな？ あ、お弁当を食べたら化粧室でちょっとリップを変えてみようかな。春らしく、桜色がいい。
いつものんびり食べているのに、今日は私なりに急いで食べた。そして、春の新色から一つ、素敵な桜色を身にまとった。何か、どきどきとして、再び、緑のブースへと戻った。
「ごめんなさいね、倉橋さん。兄さまが少し遅れるとメールがあったの。進めてくれって」
「えっと、分からないことはどうしたら……」
「ネットで調べて欲しいそうです」
「分かりました。別々に進めますか？ それとも、相談しながらかしら？」
「適当にね、倉橋さん」
蕾音さんからウインクをされて、どきどきした。私は、室生天結さんにウインクされたかったな。リップは、明日……。明日気が付いて貰えたらいいな。
カタカタと検索をする。『HTML』、『ホームページ作成』、こんなキーワードかしら。あら？ 『ＣＳＳ』とは、何でしょう？ ＣＳＳとは、Cascading Style Sheets、カスケーディング・スタイル・シートで、装飾に使うのね。先ずは基本から。これを『style.css』で保存ね。
――――――――――――――――
@charset "UTF-8";
――――――――――――――――
次に文字のサイズっと。大きめの方が見やすいでしょう。２０ｐｘに指定して、変化が分かりやすいように、赤も指定してみよう。
――――――――――――――――
@charset "UTF-8";
p{font-size:20px; （＊２）
color:red;}
――――――――――――――――
これでは、まだ、ＨＴＭＬファイルとＣＳＳファイルが関連してないから、仲良しにするのね。
――――――――――――――――
<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UTF-8”>
<link rel="stylesheet" href="./style.css"> （＊３）
<title>マシロ福祉部</title>
</head>
<body>
<h1>マシロデザインカンパニー</h1>
・
・
――――――――――――――――
参照 http://caxap.life.coocan.jp/index_006.html
（http://uhi.sa-suke.com/md007.jpg）
◇◇◇ 初稿と異なります。以下削除◇◇◇
これでオッケーかな。うん。なかなか楽しいお仕事だわ。他にフォントとかも決めた方がいいみたいね。『body』のフォントをＭＳ ゴシックか、なければサンセリフ系にしなさいとの指示ね。
――――――――――――――――
@charset "UTF-8";
body {
font-size:110%;
font-family: "ＭＳ ゴシック",sans-serif;
}
――――――――――――――――
参照 Ａ。
それから、行間も読み易く開いてみよう。ぎっちぎちよりいいと思うな。
――――――――――――――――
@charset "UTF-8";
body {
font-size:110%;
font-family: "ＭＳ ゴシック",sans-serif;
line-height:1.5;
}
――――――――――――――――
参照 Ｂ
文字色を変更。オシャレな濃いグレーにしましょう。十六進法のナンバーで指定していいわね。
――――――――――――――――
@charset "UTF-8";
body {
font-size:110%;
font-family: "ＭＳ ゴシック",sans-serif;
line-height:1.5;
color:#808080;
}
――――――――――――――――
参照 Ｃ。
それから、ＣＳＳの指示が分からなくならないようにコメントを隠して入れてみようっと。
――――――――――――――――
@charset "UTF-8"; （＊４）
body {
font-size:110%; /* フォントサイズを110%にする */
font-family: "ＭＳ ゴシック",sans-serif; /* フォントの種類をゴシック系にする */
line-height:1.5; /* 行の高さを1.5倍にする */
color:#808080; /* 文字色を濃いグレーにする */
}
――――――――――――――――
参照 http://caxap.life.coocan.jp/index_006.html
◇◇◇ 初稿と異なります。以上削除 ◇◇◇
文字色を変更。オシャレな濃いグレーにしましょう。十六進法のナンバーで指定していいわね。
――――――――――――――――
@charset "UTF-8";
body {
color:#808080;
}
p {
font-size:20px;
color:red;
}
――――――――――――――――
それから、ＣＳＳの指示が分からなくならないようにコメントを隠して入れてみようっと。
――――――――――――――――
@charset "UTF-8";
body {
color:#808080; /* ボディーの文字色を灰色にする */
}
p {
font-size:20px; /* 段落の文字を２０ｐｘにする */
color:red; /* 段落の文字色を赤にする */
}
――――――――――――――――
参照
（http://uhi.sa-suke.com/image/md008.jpg）
ＣＳＳによりＨＴＭＬが変わっているので、『index.html』は、そのままで大丈夫みたい。
上手く行っているわ。もう、蕾音さんが何をやっているかなんて考えなくてもいいみたいな感じ。私は、のほほんと調子がよく、お茶を飲みにブースから出ようとした。前方不注意の為、妖怪ぬりかべに当たってしまったようだ。
「あちゃー……」
――――――――――――――――
脚注 （＊２）、（＊３）、（＊４）は、初稿と異なります。
新規登録で充実の読書を
- マイページ
- 読書の状況から作品を自動で分類して簡単に管理できる
- 小説の未読話数がひと目でわかり前回の続きから読める
- フォローしたユーザーの活動を追える
- 通知
- 小説の更新や作者の新作の情報を受け取れる
- 閲覧履歴
- 以前読んだ小説が一覧で見つけやすい
アカウントをお持ちの方はログイン
ビューワー設定
文字サイズ
背景色
フォント
組み方向
機能をオンにすると、画面の下部をタップする度に自動的にスクロールして読み進められます。
応援すると応援コメントも書けます