せっかく久々にコードを書いたので（コピペしただけですが）、さわりのところをアップしておく ― 2019年09月27日 01:08
せっかく久々にコードを書いたので（コピペしただけですが）、さわりのところをアップしておく
グーグルの自動翻訳に通して日本語化したコンテンツを、英文だけ隠して日本語だけ見えるようにする仕掛けを作った。
コンテンツは非公開なので、コードのところだけ書いておく。
（クリックで表示・非表示の切り替えができるボックスをcssのみで実装する）
https://blog.niketcha.com/website-css-display-switch-box/
ーーーーーここからーーーーー
<html>
<HEAD>
<meta charset="UTF-8">
<style type="text/css">
<!--
/*ボックス全体*/
.switchbox {
margin: 10px 0;
padding: 0;
}
/*ラベル*/
.switchbox label {
color: #808080;
cursor :pointer;
}
/*チェックボックスを非表示にする*/
.switchbox input {
display: none;
}
/*中身を非表示にしておく*/
.switchbox div {
height: 0;
overflow-y: hidden;
opacity: 0;
}
/*クリックで中身を表示*/
.switchbox input:checked + label + div {
height: auto;
opacity: 1;
}
-->
</style>
</HEAD>
<body>
<div class="switchbox">
<input type="checkbox" id="label1" />
<label for="label1">en.</label>
<div>
ここに、隠したいコンテンツ１を書く<br>
</div>
</div>
ここに、表示したいコンテンツ１を書く<br>
<div class="switchbox">
<input type="checkbox" id="label2" />
<label for="label2">en.</label>
<div>
ここに、隠したいコンテンツ２を書く<br>
</div>
</div>
ここに、表示したいコンテンツ２を書く<br>
</body>
</html>
ーーーーーここまでーーーーー
元は、チェックボックスがあったんだが、必要ないのでラベルクリックするだけにした。
何か、余分なコードが残っているかもしれない。
ラベル名を、ユニークにしておく必要がある。
ラベルは英語表記の表示・非表示だったので「en.」とした。
ここは、何でもいいらしい。
資料にはなかったが、先頭に目次を付けて、ページの途中からトップに戻れる仕掛けも仕込んだ。
（上に戻るボタン ：参考にしたページ）
http://toretama.jp/return-top-button-scroll.html
内容は、コピペしただけなので割愛する。
jQueryというネット上にあるライブラリファイルを、都度ダウンロードするらしいので、ネット環境がないとだめかもしれない。
ローカルにコピーして動作させる方法もあるようだが、そこまでは調べなかった。
（jQuery）
https://ja.wikipedia.org/wiki/JQuery
「jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。」
そう、ＣＳＳとジャバスクリプトを織り込んでみたわけだ。
使えさえすれば、何でもいい。
ガス計画で使用する計算式などは、さすがにジャバスクリプトで書いた。
単なる四則演算だが、「＋」演算子については注意が必要だ。
（値を入力して計算してみよう）
http://js.k-sakabe.com/calc_input.html
「数値などの値を入力するにはフォームを使います。そして計算を開始するボタンを用意し、クリックされたら計算するようにします。」
「その1」を実行すると、文字の連結になる。
で、フォームの値が数になるようにeval関数で変換して計算する。
ちなみに、このページのコードにはバグがあって、そのままコピペしても動かない。
ーーーーーここからーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<SCRIPT language="JavaScript">
function Add1(){
document.fm1.C.value =eval(document.fm1.A.value) + eval(document.fm1.B.value);
}
function reset1() {
document.fm1.reset();
}
</SCRIPT>
</head>
<body>
<FORM name="fm1">
<INPUT size="20" type="text" name="A" value="10">+
<INPUT size="20" type="text" name="B">
<INPUT type="button" value="=" onclick="Add1()">
<INPUT size="20" type="text" name="C">
<INPUT type="button" value="リセット" onclick="reset1()">
</FORM>
</body>
</html>
ーーーーーここまでーーーーー
動くようにしたコードだが、ジャバスクリプトセクションとフォームセクションにおいて、ファンクション名「Add1」やフォームの名前「fm1」をマッチさせておかないとな。
追加で、フォーム「A」にデフォルト値「10」を入れておく。
これはリセットしても残っている。
完全にクリアすることも出来るらしいが、今回は支障ないので試さなかった（上書きで変えられます）。
再読み込みすればそれ以外の数字は消えるけど、リセットボタンも付けた。
実際書いたコードでは、「if」分による条件分岐もしたけど、値を放り込む変数を１つ作るだけで済んだ。
あとは、リファレンスを見ながら、テキトーに書いただけ。
典型的なスパゲティプログラムになったが、スクリプトなんて、所詮、そんなもんだろう（そうなのかあ？）。
人様に使っていただくプログラムではなく、表計算ソフト代わりにフォームに放り込んだ数字を、計算式書いて弄るだけだからな。
何か不都合があれば、自分で書いているだけにすぐ分かる（カッコの数が違うだけで、簡単に動かなくなるし）。
やれやれ・・・。
フォームから取得した値を、ちゃんと変数に入れて管理した方が見通しは良くなるんだが、今回はせいぜい２０個程度だったので、そのまま使った。
トータルでも、１００行に満たない小さなプログラムだ。
何かを揃えたり、見やすくするのは、もう少しデカいのからでいい。
スクリプト系のプログラムは、直ぐに動作が確認でき、書いては直し、動かないと嘆いてはまた書くのが正しい。
動けば嬉しいし、動かなければ動くようになるまで、うんうん唸りながら弄るのも、また楽しい。
プログラミングも楽しいが、ガス計算などの数式を理解することも楽しい。
ははあ、そういうわけだったのかと、自分で式を書きながらようやく納得する。
テキストに書いてある式に必死に数字を代入して、電卓叩いて答え出しても、なかなか理解するところまでは行かない。
計算にエネルギー取られて、肝心の数式の方まで気が回らないのだ（浮沈子だけかあ？）。
エクセルでも何でもいいから、そこに式を書き込んで、自動計算する仕掛けを作ればたちどころに理解できる。
不自然な値が出た時でも、何が原因かが分かる。
今回は、そんな効用も感じることができた。
この他には、ＨＴＭＬの表組の記述（浮沈子、苦手です！）にチャレンジしてみた。
ーーーーーここからーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<body>
<table border="1" cellspacing="0" bordercolor="#333333">
<tr>
<th>ヘッダー１</th>
<th>ヘッダー２</th>
<th>ヘッダー３</th>
<th>ヘッダー４</th>
<th bgcolor="#ffff00">ヘッダー５</th>
<th bgcolor="#ffff00">ヘッダー６</th>
<th bgcolor="#ffff00">ヘッダー７</th>
<th bgcolor="#ffff00">ヘッダー８</th>
</tr>
<tr>
<td>データ１１</td>
<td>データ２１</td>
<td>データ３１</td>
<td>データ４１</td>
<td rowspan="4">データ５</td>
<td rowspan="4">データ６</td>
<td rowspan="4">データ７</td>
<td rowspan="4">データ８</td>
</tr>
<tr>
<td>データ１２</td>
<td>データ２２</td>
<td>データ３２</td>
<td>データ４２</td>
</tr>
<tr>
<td>データ１３</td>
<td>データ２３</td>
<td>データ３３</td>
<td>データ４３</td>
</tr>
<tr>
<td>データ１４</td>
<td>データ２４</td>
<td>データ３４</td>
<td>データ４４</td>
</tr>
</table>
</body>
</html>
ーーーーーここまでーーーーー
項目名やデータは変えたが、表組自体は同じだ。
セルの背景色も付けてみた。
ささやかなチャレンジ・・・。
素人の楽しみとしてのコーディング。
テキストで書くことができ、ブラウザーで動ごかせる。
この程度のコードなら、エディタの支援がなくても何とかなる。
エクリプスのような、統合開発環境がなくてもいい。
そっちの使い方の方が、難しかったりするしな。
（【ゼロからわかる】Eclipseのインストールと初歩的な使い方）
https://eng-entrance.com/java-eclipse-install
「EclipseとはいわゆるIDE（統合開発環境）だ。統合開発環境というと難しく聞こえるが、テキストエディタが進化しすぎたものくらいに考えておけば最初はわかりやすい。」
エクリプスの開発者が卒倒しそうな見解だな。
まあいい。
浮沈子の場合、コードを書くのは手段であって目的ではない。
今回の作業も、用が済めば忘れてしまうだろう。
この記事は、自分の記憶を留めておくためのものだ。
内容は、日々古くなり、やがて朽ち果てていく。
書かれたコードを再利用することもなく、ハードディスクの肥やしになるだけだ。
プログラムは、耐久消費財のようなもので、やがて置き換えられ、更新され、用が済めば捨てられていく。
金属やガラスやプラスチックやゴムならば、素材として再生することができるかもしれないが、苦労して書かれたコードは消え去るのみだ。
膨大な人間の営為が、そうして消えていく。
スマホやパソコンをいじりながら、ささやかな欲望を仮想世界で叶えるために。
２０世紀のコンピューターの世界には、人間の単純作業を機械に置き換えていくという真っ当な正義があった。
解放された人間は、真に人間らしい、探求や創造などの生き生きした活動のために生涯を捧げることができるのだと。
２１世紀初頭の状況は、とても正義に基づくものとは思えないな。
目的と手段が入れ替わり、あるいは混沌として、やはり同じように単純作業に追い込まれている。
ゲームとかな。
で、プログラミングは機械を動かすためというより、機械が人間を動かすために行われているようにも見える。
人間は、プログラムされた機械の言いなりになっていくだけの存在だ（そうなのかあ？）。
機械仕掛けや人間の組織に限らず、浮沈子は、システムは運用の奴隷だと考えている。
ミッションを成功させるためには、必要なシステムを構築するしかないが、それを動かすのは人間だ。
人間の意志の介在なしに動くシステムはない。
人間が作った世界は、未だにそこまで統合されてはいないからな。
ただ一つ、この宇宙だけは人間の存在如何に関わらず、動き続けるシステムだ。
その中に人間を取り込みつつ・・・。
話が発散した。
数兆年後、熱的死を迎えた宇宙の中で、その究極の自律システムもまた終焉を迎えるのだろうか・・・。
＜コードを実行（表示）する方法：追加＞
内容をコピペしてテキストファイルとして保存したのち、ファイルの拡張子をhtmまたはhtmlに変更してブラウザーに読み込ませるか、テキストファイルの拡張子（txt）のまま、右クリックで「プログラムから開く」からブラウザーを選択して開く。
グーグルの自動翻訳に通して日本語化したコンテンツを、英文だけ隠して日本語だけ見えるようにする仕掛けを作った。
コンテンツは非公開なので、コードのところだけ書いておく。
（クリックで表示・非表示の切り替えができるボックスをcssのみで実装する）
https://blog.niketcha.com/website-css-display-switch-box/
ーーーーーここからーーーーー
<html>
<HEAD>
<meta charset="UTF-8">
<style type="text/css">
<!--
/*ボックス全体*/
.switchbox {
margin: 10px 0;
padding: 0;
}
/*ラベル*/
.switchbox label {
color: #808080;
cursor :pointer;
}
/*チェックボックスを非表示にする*/
.switchbox input {
display: none;
}
/*中身を非表示にしておく*/
.switchbox div {
height: 0;
overflow-y: hidden;
opacity: 0;
}
/*クリックで中身を表示*/
.switchbox input:checked + label + div {
height: auto;
opacity: 1;
}
-->
</style>
</HEAD>
<body>
<div class="switchbox">
<input type="checkbox" id="label1" />
<label for="label1">en.</label>
<div>
ここに、隠したいコンテンツ１を書く<br>
</div>
</div>
ここに、表示したいコンテンツ１を書く<br>
<div class="switchbox">
<input type="checkbox" id="label2" />
<label for="label2">en.</label>
<div>
ここに、隠したいコンテンツ２を書く<br>
</div>
</div>
ここに、表示したいコンテンツ２を書く<br>
</body>
</html>
ーーーーーここまでーーーーー
元は、チェックボックスがあったんだが、必要ないのでラベルクリックするだけにした。
何か、余分なコードが残っているかもしれない。
ラベル名を、ユニークにしておく必要がある。
ラベルは英語表記の表示・非表示だったので「en.」とした。
ここは、何でもいいらしい。
資料にはなかったが、先頭に目次を付けて、ページの途中からトップに戻れる仕掛けも仕込んだ。
（上に戻るボタン ：参考にしたページ）
http://toretama.jp/return-top-button-scroll.html
内容は、コピペしただけなので割愛する。
jQueryというネット上にあるライブラリファイルを、都度ダウンロードするらしいので、ネット環境がないとだめかもしれない。
ローカルにコピーして動作させる方法もあるようだが、そこまでは調べなかった。
（jQuery）
https://ja.wikipedia.org/wiki/JQuery
「jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。」
そう、ＣＳＳとジャバスクリプトを織り込んでみたわけだ。
使えさえすれば、何でもいい。
ガス計画で使用する計算式などは、さすがにジャバスクリプトで書いた。
単なる四則演算だが、「＋」演算子については注意が必要だ。
（値を入力して計算してみよう）
http://js.k-sakabe.com/calc_input.html
「数値などの値を入力するにはフォームを使います。そして計算を開始するボタンを用意し、クリックされたら計算するようにします。」
「その1」を実行すると、文字の連結になる。
で、フォームの値が数になるようにeval関数で変換して計算する。
ちなみに、このページのコードにはバグがあって、そのままコピペしても動かない。
ーーーーーここからーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<SCRIPT language="JavaScript">
function Add1(){
document.fm1.C.value =eval(document.fm1.A.value) + eval(document.fm1.B.value);
}
function reset1() {
document.fm1.reset();
}
</SCRIPT>
</head>
<body>
<FORM name="fm1">
<INPUT size="20" type="text" name="A" value="10">+
<INPUT size="20" type="text" name="B">
<INPUT type="button" value="=" onclick="Add1()">
<INPUT size="20" type="text" name="C">
<INPUT type="button" value="リセット" onclick="reset1()">
</FORM>
</body>
</html>
ーーーーーここまでーーーーー
動くようにしたコードだが、ジャバスクリプトセクションとフォームセクションにおいて、ファンクション名「Add1」やフォームの名前「fm1」をマッチさせておかないとな。
追加で、フォーム「A」にデフォルト値「10」を入れておく。
これはリセットしても残っている。
完全にクリアすることも出来るらしいが、今回は支障ないので試さなかった（上書きで変えられます）。
再読み込みすればそれ以外の数字は消えるけど、リセットボタンも付けた。
実際書いたコードでは、「if」分による条件分岐もしたけど、値を放り込む変数を１つ作るだけで済んだ。
あとは、リファレンスを見ながら、テキトーに書いただけ。
典型的なスパゲティプログラムになったが、スクリプトなんて、所詮、そんなもんだろう（そうなのかあ？）。
人様に使っていただくプログラムではなく、表計算ソフト代わりにフォームに放り込んだ数字を、計算式書いて弄るだけだからな。
何か不都合があれば、自分で書いているだけにすぐ分かる（カッコの数が違うだけで、簡単に動かなくなるし）。
やれやれ・・・。
フォームから取得した値を、ちゃんと変数に入れて管理した方が見通しは良くなるんだが、今回はせいぜい２０個程度だったので、そのまま使った。
トータルでも、１００行に満たない小さなプログラムだ。
何かを揃えたり、見やすくするのは、もう少しデカいのからでいい。
スクリプト系のプログラムは、直ぐに動作が確認でき、書いては直し、動かないと嘆いてはまた書くのが正しい。
動けば嬉しいし、動かなければ動くようになるまで、うんうん唸りながら弄るのも、また楽しい。
プログラミングも楽しいが、ガス計算などの数式を理解することも楽しい。
ははあ、そういうわけだったのかと、自分で式を書きながらようやく納得する。
テキストに書いてある式に必死に数字を代入して、電卓叩いて答え出しても、なかなか理解するところまでは行かない。
計算にエネルギー取られて、肝心の数式の方まで気が回らないのだ（浮沈子だけかあ？）。
エクセルでも何でもいいから、そこに式を書き込んで、自動計算する仕掛けを作ればたちどころに理解できる。
不自然な値が出た時でも、何が原因かが分かる。
今回は、そんな効用も感じることができた。
この他には、ＨＴＭＬの表組の記述（浮沈子、苦手です！）にチャレンジしてみた。
ーーーーーここからーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<body>
<table border="1" cellspacing="0" bordercolor="#333333">
<tr>
<th>ヘッダー１</th>
<th>ヘッダー２</th>
<th>ヘッダー３</th>
<th>ヘッダー４</th>
<th bgcolor="#ffff00">ヘッダー５</th>
<th bgcolor="#ffff00">ヘッダー６</th>
<th bgcolor="#ffff00">ヘッダー７</th>
<th bgcolor="#ffff00">ヘッダー８</th>
</tr>
<tr>
<td>データ１１</td>
<td>データ２１</td>
<td>データ３１</td>
<td>データ４１</td>
<td rowspan="4">データ５</td>
<td rowspan="4">データ６</td>
<td rowspan="4">データ７</td>
<td rowspan="4">データ８</td>
</tr>
<tr>
<td>データ１２</td>
<td>データ２２</td>
<td>データ３２</td>
<td>データ４２</td>
</tr>
<tr>
<td>データ１３</td>
<td>データ２３</td>
<td>データ３３</td>
<td>データ４３</td>
</tr>
<tr>
<td>データ１４</td>
<td>データ２４</td>
<td>データ３４</td>
<td>データ４４</td>
</tr>
</table>
</body>
</html>
ーーーーーここまでーーーーー
項目名やデータは変えたが、表組自体は同じだ。
セルの背景色も付けてみた。
ささやかなチャレンジ・・・。
素人の楽しみとしてのコーディング。
テキストで書くことができ、ブラウザーで動ごかせる。
この程度のコードなら、エディタの支援がなくても何とかなる。
エクリプスのような、統合開発環境がなくてもいい。
そっちの使い方の方が、難しかったりするしな。
（【ゼロからわかる】Eclipseのインストールと初歩的な使い方）
https://eng-entrance.com/java-eclipse-install
「EclipseとはいわゆるIDE（統合開発環境）だ。統合開発環境というと難しく聞こえるが、テキストエディタが進化しすぎたものくらいに考えておけば最初はわかりやすい。」
エクリプスの開発者が卒倒しそうな見解だな。
まあいい。
浮沈子の場合、コードを書くのは手段であって目的ではない。
今回の作業も、用が済めば忘れてしまうだろう。
この記事は、自分の記憶を留めておくためのものだ。
内容は、日々古くなり、やがて朽ち果てていく。
書かれたコードを再利用することもなく、ハードディスクの肥やしになるだけだ。
プログラムは、耐久消費財のようなもので、やがて置き換えられ、更新され、用が済めば捨てられていく。
金属やガラスやプラスチックやゴムならば、素材として再生することができるかもしれないが、苦労して書かれたコードは消え去るのみだ。
膨大な人間の営為が、そうして消えていく。
スマホやパソコンをいじりながら、ささやかな欲望を仮想世界で叶えるために。
２０世紀のコンピューターの世界には、人間の単純作業を機械に置き換えていくという真っ当な正義があった。
解放された人間は、真に人間らしい、探求や創造などの生き生きした活動のために生涯を捧げることができるのだと。
２１世紀初頭の状況は、とても正義に基づくものとは思えないな。
目的と手段が入れ替わり、あるいは混沌として、やはり同じように単純作業に追い込まれている。
ゲームとかな。
で、プログラミングは機械を動かすためというより、機械が人間を動かすために行われているようにも見える。
人間は、プログラムされた機械の言いなりになっていくだけの存在だ（そうなのかあ？）。
機械仕掛けや人間の組織に限らず、浮沈子は、システムは運用の奴隷だと考えている。
ミッションを成功させるためには、必要なシステムを構築するしかないが、それを動かすのは人間だ。
人間の意志の介在なしに動くシステムはない。
人間が作った世界は、未だにそこまで統合されてはいないからな。
ただ一つ、この宇宙だけは人間の存在如何に関わらず、動き続けるシステムだ。
その中に人間を取り込みつつ・・・。
話が発散した。
数兆年後、熱的死を迎えた宇宙の中で、その究極の自律システムもまた終焉を迎えるのだろうか・・・。
＜コードを実行（表示）する方法：追加＞
内容をコピペしてテキストファイルとして保存したのち、ファイルの拡張子をhtmまたはhtmlに変更してブラウザーに読み込ませるか、テキストファイルの拡張子（txt）のまま、右クリックで「プログラムから開く」からブラウザーを選択して開く。
何年振りかでホームページ作ってアップしたけど、浮沈子向きの作業でないことは確かだな ― 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/
フッターの背景を反騰目にすることに成功！。
最近のコメント