Secret 002 ＨＴＭＬ
Secret 002 ＨＴＭＬ
「レイアウトを考えよう。紙と色鉛筆を配るから、簡単な配置を書いてくれ」
「はい」
「分かりました」
これは、短時間でさっと描けた。
「これから、使うテキストやイメージをまとめてフォルダに入れたい。倉橋さんは、マシロデザインカンパニーホームページ・クラハシの『mdhp_k』で、室生さんは、同じくムロウの『mdhp_m』にして新規フォルダを作って欲しい。それから、画像はまとめたいので、『images』フォルダもその中に頼むな」
カタカタ。私に仕事なんてできるのかな？
「早速、ＨＴＭＬで書いてみようか。画面上でウィンドウズアクセサリのメモ帳を使う。テキストエディタとは今後これを指すと思ってくれ」
――――――――――――
<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UTF-8”>
</head>
<body>
マシロデザインカンパニー
</body>
</html>
――――――――――――
室生さんが、私の右隣に来て、テーブルに手をついた。
「できたか。倉橋さん」
「え、ええ。何を表しているのかは分かりませんが」
「はは、しっかりしてくれよ。『head』が見えない部分、『body』が見える部分と思ってくれ。『meta』は、文字化け防止だ。日本語サイトになる」
「兄さま」
「室生さんは、括弧内をｍにしてくれな」
「できたら、メモ帳のまま『index.html』で、先程の『mdhp_k』内に保存してくれ。拡張子が『html』だから、『txt』にならないように注意な。そこまで来たら、初の一ページが出来上がりだよ。ブラウザで確認してみよう」
file:///C:/Users/user/Desktop/mdhp_k/index.html
「投稿前のＵＲＬは、こうなっているはずだ。そして、画面には、『マシロデザインカンパニー』と左上に黒い文字であれば、大成功だよ」
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
マシロデザインカンパニー
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
参照 http://caxap.life.coocan.jp/index_001.html
（http://uhi.sa-suke.com/md001.jpg）
「や、やった！ 何か、できた感じ。これで田舎に帰れるわ」
「これ位は、できませんとね、兄さま。田舎になら、帰ってくれます？」
「今、お仕事始めたばかりだろう？ 無茶はダメだ」
「では、ＵＲＬの意味は分かるかな？」
「Uniform Resource Locatorの略ですわ」
「そうだね。倉橋さん、意味は？」
「Web上の住所ですね」
「はい、分かりやすい答えですね」
「むう。兄さま、差別です」
――――――――――――――――
<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UTF-8”>
<title>マシロデザインカンパニー福祉部（Ｋ）</title>
</head>
<body>
マシロデザインカンパニー
</body>
</html>
――――――――――――――――
参照 http://caxap.life.coocan.jp/index_002.html
（http://uhi.sa-suke.com/md002.jpg）
「何か変わった所はないかな？」
「あ、上のタブに『マシロデザインカンパニー福祉事業部（Ｋ）』と書かれています」
「そうだな。これはページの名前だな。これも『head』の部分に書く。その際、『title』から『/title』を『head』から『/head』の中にきちんと入れよう。これも『index.html』でのことだ」
「少し長い感じがします。『マシロ福祉部』にしてもよろしいでしょうか？」
「倉橋さんの自由な発想はいいね。そうしてみよう」
――――――――――――――――
<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UTF-8”>
<title>マシロ福祉部</title>
</head>
・
・
――――――――――――――――
参照
（http://uhi.sa-suke.com/md003.jpg）
やったわ。『マシロ福祉部』になっている。
「正式名称ではないけれども、伝えたい要素が入っている。それって大切なことかも知れないわね」
あ、雷音さんがジト目で私をマークするし。
まあ、次のお仕事で払拭すべし。
――――――――――――――――
<!DOCTYPE html>
<html lang=“ja”> （＊１）
<head>
<meta charset=“UTF-8”>
<title>マシロ福祉部</title>
</head>
<body>
<h1>マシロデザインカンパニー</h1>
<h2>新着情報</h2>
<h3>新商品のご案内</h3>
<h3>東京水道橋展示場</h3>
<h3>カタログのご案内</h3>
</body>
</html>
――――――――――――――――
これを画面で見ると、余計な文字がなくなるのね。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
マシロデザインカンパニー
新着情報
新商品のご案内
東京水道橋展示場
カタログのご案内
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
参照 http://caxap.life.coocan.jp/index_003.html
（http://uhi.sa-suke.com/md004.jpg）
「あ、文字の大きさが違うわ」
「そうだな。<h1>マシロデザインカンパニー</h1>が、一番大きい、次いで、<h2>新着情報</h2>、ここで一番小さいのは、<h3>以下の三つだな。最低<h6>まであるよ」
「HTML、エイチティーエムエル、Hyper Text Markup Languageの入り口に立ってみてどうだ？ やる気が起きてくれるといいんだが」
「勿論です！」
「今日のラスト、ここの文章を入れてな。『body』の部分だけ変更する」
――――――――――――――――
<body>
<h1>マシロデザインカンパニー</h1>
<h2>新着情報</h2>
<h3>新商品のご案内</h3>
<p>
食器のご案内です。人気を博しているぐりっぷスプーンに新色が登場しました。春らしい桜色と萌えるような緑です。さじの先が曲がっており、握り手の太さが丁度よく、握力が少なくても使いやすいものです。
</p>
<h3>東京水道橋展示場</h3>
<p>
東京都の都営マロ線水道橋駅から徒歩三分の所に自助具の展示場があります。是非、食器の使いやすさや、靴の履き心地を体験なさってください。車いすなどもございます。
</p>
<h3>カタログのご案内</h3>
<p>
下記の電話番号、ＦＡＸ、メールでお届け先をお伝えくださいますと、マシロデザインカンパニー２０１９年春号をお届けさせていただきます。遠方の方、又、ギフトにもどうぞお申しつけください。
XX-XXXX-XXXX mashiro_design@xxxxxx.co.jp
</p>
</body>
</html>
――――――――――――――――
参照 http://caxap.life.coocan.jp/index_004.html
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
マシロデザインカンパニー
新着情報
新商品のご案内
食器のご案内です。人気を博しているぐりっぷスプーンに新色が登場しました。春らしい桜色と萌えるような緑です。さじの先が曲がっており、握り手の太さが丁度よく、握力が少なくても使いやすいものです。
東京水道橋展示場
東京都の都営マロ線水道橋駅から徒歩三分の所に自助具の展示場があります。是非、食器の使いやすさや、靴の履き心地を体験なさってください。車いすなどもございます。
カタログのご案内
下記の電話番号、ＦＡＸ、メールでお届け先をお伝えくださいますと、マシロデザインカンパニー２０１９年春号をお届けさせていただきます。遠方の方、又、ギフトにもどうぞお申しつけください。XX-XXXX-XXXX mashiro_design@xxxxxx.co.jp
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
参照
（http://uhi.sa-suke.com/md005.jpg）
「やってみないと分からないところが分からないってよく聞くけど、本当だわ。参照しながら、がんばっていこう」
――――――――――――――――
脚注（＊１） 初稿の『shift_jis』から『UFT-8』に変えてあります。
＊＊＊ 実験小説 ＊＊＊
参照にあるＵＲＬをバーにはってご覧になれるように自分のサイトにアップロードしてあります。
例）参照 http://caxap.life.coocan.jp/index_003.html
（http://uhi.sa-suke.com/md004.jpg）
上記のように明記してあります。
本文中でいいますと、『＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝』で始まり、ホームページの画像の様子を文字で表し、『＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝』で終わっています。
ホームページの内容としては、『新商品のご案内』、『東京水道橋展示場』などここの文章で画面を模したものが見られます。
また、パソコン入力画面は、省略もしてありますが、実際のＣＳＳとＨＴＭＬです。
本文中でいいますと、『――――――――――――――――』で始まり、英数字が続いた後に、『――――――――――――――――』で終わっています。
お楽しみください。
新規登録で充実の読書を
- マイページ
- 読書の状況から作品を自動で分類して簡単に管理できる
- 小説の未読話数がひと目でわかり前回の続きから読める
- フォローしたユーザーの活動を追える
- 通知
- 小説の更新や作者の新作の情報を受け取れる
- 閲覧履歴
- 以前読んだ小説が一覧で見つけやすい
アカウントをお持ちの方はログイン
ビューワー設定
文字サイズ
背景色
フォント
組み方向
機能をオンにすると、画面の下部をタップする度に自動的にスクロールして読み進められます。
応援すると応援コメントも書けます