何年振りかでホームページ作ってアップしたけど、浮沈子向きの作業でないことは確かだな ― 2019年09月27日 23:24
何年振りかでホームページ作ってアップしたけど、浮沈子向きの作業でないことは確かだな
まだ、トップページ（index.htm）くらいしか作っていない。
工事中のページとかも作ったが、それもまた工事中みたいなもんだ。
（浮沈子の部屋←なんてクサいネーミングなんだ！）
https://www.ne.jp/asahi/kfujito/fuchinshi/
参考にしたのはこのページ。
（HTML+CSSによるウェブページ制作例）
http://www.htmq.com/csskihon/401.shtml
ＣＳＳは、ほぼコピペして調整したり削除しただけ。
（CSSでフッターをウィンドウ最下部に固定する方法【初心者向け】）
https://techacademy.jp/magazine/19410
コンテンツが少ないので、フッターがフッターにならなかったので、最下端になるようにした。
（著作権表示、コレが正解！「©」や「All Rights Rserved」正しい表記と意味全解説）
https://nandemo-nobiru.com/om-6265
よく分らなかったので、全部書いた（！）。
書かなくても、問題はないようだけどな。
書いてあると、コンテンツに箔が付く感じがするからな（そうなのかあ？）。
まあいい。
要するに、ＣＳＳを使って、見映えのするホームページを作ろうということだな。
苦手だ・・・。
見かけなんて、どーでもいーじゃないの・・・。
情報は、見たい奴が探して見ればいい。
見て頂くものでも、お見せするものでもない。
この与太ブログがいい例だな。
書いている本人が読むことが、最大の目的で（いや、書くことそのものが目的か）、人様が読むことなど二の次三の次だ。
やれやれ・・・。
それでも、チャラいホームページを作って、こんなもんかという感じにならなければ、痩せ我慢と言われてしまう（減量中の身としては、むしろ言われてみたいもんだがな）。
で、やってみて分かったのは、浮沈子向きの作業ではないということだ。
アサヒネットのホームページは、浮沈子のショボイ契約では、１０Ｍバイトしかくれない（今時、ショボ過ぎ？）。
仕方ないから、画像置き場はＦＣ２サーバーをお借りして、アルバムメーカーとかいうダサいネーミングのオンラインツールで貼り付けた（およそ１ＧＢまで無料：アルバムメーカーで５０ＭＢ食うようです）。
５０枚もアップしてないのに、８Ｍバイト以上食ってる。
無料で使えるサーバーを片っ端から使って、リンクでコンテンツを扱うしかないな。
背景画像は、そこからリンクして貼り付けているが、動的リンクが遅くて画像が出ないことがある。
ったく・・・。
商業的に利用するわけではなく、画像置き場にすらならない感じだ。
それで十分だろう。
ブログのように、いつどこに書いたか忘れてしまうこともなく、比較的更新頻度が低いパーマネントコンテンツを置いておくにはちょうどいい。
無料で使えるクラウドストレージがいくらでもある時代だ。
鬱陶しい広告を我慢すれば、サービスはタダで手に入る。
それが資本主義経済というもんだろう。
スクリプトを埋め込んで、動的ページを作ることも可能だ。
先日作ったジャバスクリプトの計算式とかも、簡単に置くことができるだろう。
ＣＧＩとかはサーバー側で制限があるようだが、テキストベースのスクリプトだからな。
何を書かれるか分かったもんじゃない。
セキュリティ上の問題は残る。
素人の書く怪しげなコードには、何の保証もない。
悪意がなくても、穴がある可能性は否定できない。
もっとも、そういう仕掛け的なコンテンツは、まだ先の話だ。
今日書いたのはこれだけ。
ＨＴＭＬファイル：ここからーーーーーーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sample.css" />
<title>浮沈子の部屋</title>
<body>
<div id="pagebody">
<!-- ヘッダ -->
<div id="header"><h1><a href="index.htm">浮沈子の部屋</a></h1></div>
まだ工事中（いつまで！？）
<!-- メインメニュー -->
<ul id="menu">
<li id="menu01"><a href="index.htm">ほーむ</a></li>
<li id="menu02"><a href="koujityu.htm">ごあいさつ（工事中）</a></li>
<li id="menu03"><a href="koujityu.htm">アルバム（工事中）</a></li>
<li id="menu04"><a href="koujityu.htm">リンク（工事中）</a></li>
</ul>
<!-- サブメニュー（左カラム） -->
<div id="submenu">
<div id="submenu_header">
<h2>アルバム</h2>
</div>
<ul id="submenu_body">
<li><a href="https://fuchinshi.web.fc2.com/fc2-imageviewer/?aid=1&iid=1">2019プエルトガレラ</a></li>
<li><a href="https://fuchinshi.web.fc2.com/fc2-imageviewer/?aid=1&iid=2">2019ケアンズ</a></li>
</ul>
</div>
<!-- サブメニュー（右カラム） -->
<div id="submenu2">
<div id="submenu_header">
<h2>リンク</h2>
</div>
<ul id="submenu_body">
<li><a href="http://kfujito2.asablo.jp/blog/">ブログ「kfujitoの徒然by浮沈子」</a></li>
<li><a href="https://tokyo-ame.jwa.or.jp/">東京アメッシュ</a></li>
</ul>
</div>
<!-- フッタ -->
<div id="footer"><address>(C)2019 Copyright 浮沈子 All Rights Reserved.</address></div>
</div>
</body>
</html>
ここまでーーーーーーーーーーーーーーーーーーー
工事中のページは、これのサブセットになっているだけ。
苦労したのは、こいつをＣＳＳでどう見せるかというところだ。
ＣＳＳファイル：ここからーーーーーーーーーーー
@charset "utf-8";
/*============================================
全般的なスタイル
============================================*/
* {
margin:0; padding:0; /*全要素のマージン・パディングをリセット*/
line-height:1.5; /*全要素の行の高さを1.5倍にする*/
color:#333333; /*文字色*/
}
body {
background-image:url("https://fuchinshi.web.fc2.com/fc2-imageviewer/1/1/17.jpg?_=1569589751"); /*ページ全体の背景画像*/
text-align:center; /*IE6以下でセンタリングするための対策*/
}
div#pagebody {
width:900px; margin:0 auto; /*内容全体をセンタリング*/
text-align:left; /*テキストの配置を左揃えにする*/
background-repeat:repeat-y; /*背景画像を縦方向に繰り返す*/
background-color:#ffffff; /*内容全体の背景色*/
}
/*============================================
ヘッダ
============================================*/
div#header {
height:85px; /*背景画像のサイズに合わせてボックスの高さを指定*/
background-color:#cccccc; /*ヘッダ部分の背景色*/
}
h1 {
padding:23px 0px 0px 10px; /*見出し内容の位置調整*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
h1 a {text-decoration:none;
} /*リンクの下線を無くす*/
#header a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
メインメニュー
============================================*/
ul#menu {
height:46px; background-color:#eeeeee; font-weight:bold;
}
li#menu01,li#menu02,li#menu03,li#menu04,li#menu05 {
float:left; /*リスト項目を横に並べる*/
display:inline; /*リスト項目をインライン表示にする*/
list-style-type:none; /*リストマーカー無しにする*/
}
li#menu01 {
width:100px; height:42px;
}
li#menu02 {
width:250px; height:42px;
}
li#menu03 {
width:250x; height:42px;
}
li#menu04 {
width:200px; height:42px;
}
ul#menu a {
display:block; /*リンクをブロック表示にする*/
height:42px; padding-top:4px; text-align:center;
text-decoration:none; /*リンクの下線を無くす*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
ul#menu li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー（左カラム）
============================================*/
div#submenu {
width:440px; /*幅の指定*/
margin:10px 10px 10px 0px; /*位置調整（IE6のバグに注意）*/
display:inline; /*IE6のマージン算出のバグ対策*/
float:left; /*サブメニューのカラムを左寄せにする*/
}
/*サブメニューのヘッダ部分（余白調整・背景色・文字サイズなど）*/
div#submenu_header {
height:26px; padding:4px 0px 0px 0px;
background-color:#cccccc;
font-size:60%; font-weight:bold; text-align:center;
}
/*サブメニューのボディ部分（余白調整・背景色）*/
ul#submenu_body {
padding-bottom:6px;
background-color:#cccccc;
}
ul#submenu_body li {
font-size:90%; /*文字サイズを90%にする*/
list-style-type:none; /*リストマーカー無しにする*/
display:inline; /*リスト項目をインライン表示にする*/
}
ul#submenu_body li a {
display:block; /*リンクをブロック表示にする*/
margin:0px 4px 0px 4px; /*サブメニュー項目のマージン*/
padding:2px 0px 2px 20px; /*サブメニュー項目のパディング*/
background-color:#eeeeee; /*サブメニュー項目の背景色*/
text-decoration:none; /*リンクの下線を無くす*/
}
ul#submenu_body li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
ピックアップ（右カラム）
============================================*/
div#submenu2 {
width:440px; padding-top:10px; /*幅の指定と位置調整*/
float:right; /*カラムを右寄せにする*/
}
div#pickup ul {
margin-left:10px; /*左マージンを10px空ける*/
font-size:60%; /*フォントサイズを90%にする*/
}
div#pickup li {
list-style-type:none; /*リストマーカー無しにする*/
line-height:1.8; /*行の高さを1.8倍にする*/
}
/*============================================
フッタ
============================================*/
.wrapper{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom: 42px;/*←footerの高さ*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
div#footer{
width:900px;
background-color: #cccccc;
clear:both; /*回り込みを解除する*/
text-align: center;
padding: 5px 0;
position: absolute;/*←絶対位置*/
bottom: 0; /*下に固定*/
}
address {
font-style:normal; /*フォントスタイルを標準にする*/
font-size:small; /*フォントサイズを小さくする*/
padding:5px 0px 5px 0px; /*要素内容の位置調整*/
}
ここまでーーーーーーーーーーーーーーーーーーー
書いたというよりは、コピペして消したというほうが近いかも。
まあ、それでいいんですが。
明日には、もうちっとマシなことができるようになっているかもしれない。
そうすれば、痩せ我慢と言われずに済むからな・・・。
（応用55. カラーの透明度の値（rgba, transparent）：追加）
https://web-manabu.com/html-css55/
フッターの背景を反騰目にすることに成功！。
まだ、トップページ（index.htm）くらいしか作っていない。
工事中のページとかも作ったが、それもまた工事中みたいなもんだ。
（浮沈子の部屋←なんてクサいネーミングなんだ！）
https://www.ne.jp/asahi/kfujito/fuchinshi/
参考にしたのはこのページ。
（HTML+CSSによるウェブページ制作例）
http://www.htmq.com/csskihon/401.shtml
ＣＳＳは、ほぼコピペして調整したり削除しただけ。
（CSSでフッターをウィンドウ最下部に固定する方法【初心者向け】）
https://techacademy.jp/magazine/19410
コンテンツが少ないので、フッターがフッターにならなかったので、最下端になるようにした。
（著作権表示、コレが正解！「©」や「All Rights Rserved」正しい表記と意味全解説）
https://nandemo-nobiru.com/om-6265
よく分らなかったので、全部書いた（！）。
書かなくても、問題はないようだけどな。
書いてあると、コンテンツに箔が付く感じがするからな（そうなのかあ？）。
まあいい。
要するに、ＣＳＳを使って、見映えのするホームページを作ろうということだな。
苦手だ・・・。
見かけなんて、どーでもいーじゃないの・・・。
情報は、見たい奴が探して見ればいい。
見て頂くものでも、お見せするものでもない。
この与太ブログがいい例だな。
書いている本人が読むことが、最大の目的で（いや、書くことそのものが目的か）、人様が読むことなど二の次三の次だ。
やれやれ・・・。
それでも、チャラいホームページを作って、こんなもんかという感じにならなければ、痩せ我慢と言われてしまう（減量中の身としては、むしろ言われてみたいもんだがな）。
で、やってみて分かったのは、浮沈子向きの作業ではないということだ。
アサヒネットのホームページは、浮沈子のショボイ契約では、１０Ｍバイトしかくれない（今時、ショボ過ぎ？）。
仕方ないから、画像置き場はＦＣ２サーバーをお借りして、アルバムメーカーとかいうダサいネーミングのオンラインツールで貼り付けた（およそ１ＧＢまで無料：アルバムメーカーで５０ＭＢ食うようです）。
５０枚もアップしてないのに、８Ｍバイト以上食ってる。
無料で使えるサーバーを片っ端から使って、リンクでコンテンツを扱うしかないな。
背景画像は、そこからリンクして貼り付けているが、動的リンクが遅くて画像が出ないことがある。
ったく・・・。
商業的に利用するわけではなく、画像置き場にすらならない感じだ。
それで十分だろう。
ブログのように、いつどこに書いたか忘れてしまうこともなく、比較的更新頻度が低いパーマネントコンテンツを置いておくにはちょうどいい。
無料で使えるクラウドストレージがいくらでもある時代だ。
鬱陶しい広告を我慢すれば、サービスはタダで手に入る。
それが資本主義経済というもんだろう。
スクリプトを埋め込んで、動的ページを作ることも可能だ。
先日作ったジャバスクリプトの計算式とかも、簡単に置くことができるだろう。
ＣＧＩとかはサーバー側で制限があるようだが、テキストベースのスクリプトだからな。
何を書かれるか分かったもんじゃない。
セキュリティ上の問題は残る。
素人の書く怪しげなコードには、何の保証もない。
悪意がなくても、穴がある可能性は否定できない。
もっとも、そういう仕掛け的なコンテンツは、まだ先の話だ。
今日書いたのはこれだけ。
ＨＴＭＬファイル：ここからーーーーーーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sample.css" />
<title>浮沈子の部屋</title>
<body>
<div id="pagebody">
<!-- ヘッダ -->
<div id="header"><h1><a href="index.htm">浮沈子の部屋</a></h1></div>
まだ工事中（いつまで！？）
<!-- メインメニュー -->
<ul id="menu">
<li id="menu01"><a href="index.htm">ほーむ</a></li>
<li id="menu02"><a href="koujityu.htm">ごあいさつ（工事中）</a></li>
<li id="menu03"><a href="koujityu.htm">アルバム（工事中）</a></li>
<li id="menu04"><a href="koujityu.htm">リンク（工事中）</a></li>
</ul>
<!-- サブメニュー（左カラム） -->
<div id="submenu">
<div id="submenu_header">
<h2>アルバム</h2>
</div>
<ul id="submenu_body">
<li><a href="https://fuchinshi.web.fc2.com/fc2-imageviewer/?aid=1&iid=1">2019プエルトガレラ</a></li>
<li><a href="https://fuchinshi.web.fc2.com/fc2-imageviewer/?aid=1&iid=2">2019ケアンズ</a></li>
</ul>
</div>
<!-- サブメニュー（右カラム） -->
<div id="submenu2">
<div id="submenu_header">
<h2>リンク</h2>
</div>
<ul id="submenu_body">
<li><a href="http://kfujito2.asablo.jp/blog/">ブログ「kfujitoの徒然by浮沈子」</a></li>
<li><a href="https://tokyo-ame.jwa.or.jp/">東京アメッシュ</a></li>
</ul>
</div>
<!-- フッタ -->
<div id="footer"><address>(C)2019 Copyright 浮沈子 All Rights Reserved.</address></div>
</div>
</body>
</html>
ここまでーーーーーーーーーーーーーーーーーーー
工事中のページは、これのサブセットになっているだけ。
苦労したのは、こいつをＣＳＳでどう見せるかというところだ。
ＣＳＳファイル：ここからーーーーーーーーーーー
@charset "utf-8";
/*============================================
全般的なスタイル
============================================*/
* {
margin:0; padding:0; /*全要素のマージン・パディングをリセット*/
line-height:1.5; /*全要素の行の高さを1.5倍にする*/
color:#333333; /*文字色*/
}
body {
background-image:url("https://fuchinshi.web.fc2.com/fc2-imageviewer/1/1/17.jpg?_=1569589751"); /*ページ全体の背景画像*/
text-align:center; /*IE6以下でセンタリングするための対策*/
}
div#pagebody {
width:900px; margin:0 auto; /*内容全体をセンタリング*/
text-align:left; /*テキストの配置を左揃えにする*/
background-repeat:repeat-y; /*背景画像を縦方向に繰り返す*/
background-color:#ffffff; /*内容全体の背景色*/
}
/*============================================
ヘッダ
============================================*/
div#header {
height:85px; /*背景画像のサイズに合わせてボックスの高さを指定*/
background-color:#cccccc; /*ヘッダ部分の背景色*/
}
h1 {
padding:23px 0px 0px 10px; /*見出し内容の位置調整*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
h1 a {text-decoration:none;
} /*リンクの下線を無くす*/
#header a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
メインメニュー
============================================*/
ul#menu {
height:46px; background-color:#eeeeee; font-weight:bold;
}
li#menu01,li#menu02,li#menu03,li#menu04,li#menu05 {
float:left; /*リスト項目を横に並べる*/
display:inline; /*リスト項目をインライン表示にする*/
list-style-type:none; /*リストマーカー無しにする*/
}
li#menu01 {
width:100px; height:42px;
}
li#menu02 {
width:250px; height:42px;
}
li#menu03 {
width:250x; height:42px;
}
li#menu04 {
width:200px; height:42px;
}
ul#menu a {
display:block; /*リンクをブロック表示にする*/
height:42px; padding-top:4px; text-align:center;
text-decoration:none; /*リンクの下線を無くす*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
ul#menu li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
サブメニュー（左カラム）
============================================*/
div#submenu {
width:440px; /*幅の指定*/
margin:10px 10px 10px 0px; /*位置調整（IE6のバグに注意）*/
display:inline; /*IE6のマージン算出のバグ対策*/
float:left; /*サブメニューのカラムを左寄せにする*/
}
/*サブメニューのヘッダ部分（余白調整・背景色・文字サイズなど）*/
div#submenu_header {
height:26px; padding:4px 0px 0px 0px;
background-color:#cccccc;
font-size:60%; font-weight:bold; text-align:center;
}
/*サブメニューのボディ部分（余白調整・背景色）*/
ul#submenu_body {
padding-bottom:6px;
background-color:#cccccc;
}
ul#submenu_body li {
font-size:90%; /*文字サイズを90%にする*/
list-style-type:none; /*リストマーカー無しにする*/
display:inline; /*リスト項目をインライン表示にする*/
}
ul#submenu_body li a {
display:block; /*リンクをブロック表示にする*/
margin:0px 4px 0px 4px; /*サブメニュー項目のマージン*/
padding:2px 0px 2px 20px; /*サブメニュー項目のパディング*/
background-color:#eeeeee; /*サブメニュー項目の背景色*/
text-decoration:none; /*リンクの下線を無くす*/
}
ul#submenu_body li a:hover {
background-color:#ffffff; /*リンクにマウスが乗ったら色を変える*/
}
/*============================================
ピックアップ（右カラム）
============================================*/
div#submenu2 {
width:440px; padding-top:10px; /*幅の指定と位置調整*/
float:right; /*カラムを右寄せにする*/
}
div#pickup ul {
margin-left:10px; /*左マージンを10px空ける*/
font-size:60%; /*フォントサイズを90%にする*/
}
div#pickup li {
list-style-type:none; /*リストマーカー無しにする*/
line-height:1.8; /*行の高さを1.8倍にする*/
}
/*============================================
フッタ
============================================*/
.wrapper{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom: 42px;/*←footerの高さ*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
div#footer{
width:900px;
background-color: #cccccc;
clear:both; /*回り込みを解除する*/
text-align: center;
padding: 5px 0;
position: absolute;/*←絶対位置*/
bottom: 0; /*下に固定*/
}
address {
font-style:normal; /*フォントスタイルを標準にする*/
font-size:small; /*フォントサイズを小さくする*/
padding:5px 0px 5px 0px; /*要素内容の位置調整*/
}
ここまでーーーーーーーーーーーーーーーーーーー
書いたというよりは、コピペして消したというほうが近いかも。
まあ、それでいいんですが。
明日には、もうちっとマシなことができるようになっているかもしれない。
そうすれば、痩せ我慢と言われずに済むからな・・・。
（応用55. カラーの透明度の値（rgba, transparent）：追加）
https://web-manabu.com/html-css55/
フッターの背景を反騰目にすることに成功！。
コメントをどうぞ
※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。
※なお、送られたコメントはブログの管理者が確認するまで公開されません。
※投稿には管理者が設定した質問に答える必要があります。