WEB制作への一歩

20年ぐらいのブランクで、さっぱり忘れてしまってます。
Web制作で学んだ事や失敗した事など記録して行こうかと思います。
昔は、Internet ExplorerとNetscapeで見れるWEBサイトを、HTMLにサイズや色など直接書いて作ってましたが、最近はCSSで指定してるみたいで、スマホでもなんとか見れるサイトにしようといろいろ探ってみました。
昔のCGIを書き換えながら勉強しようと思いました。

< 目次 >


レンタルサーバーとドメイン登録





HTML5の宣言と文字コードを指定



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

》ここでのつまづき~。

print "<!DOCTYPE html>\n"

では、エラーでした。いろいろ変更した後だったので、何処がおかしいのか、気が付きませんでした。

print <<"__HTML__";
<!DOCTYPE html>
<html lang="ja">
<head>
__HTML__
これでエラーなくなりました。


見事に文字化けしましたw。その部分を書き換えて上書き保存じゃダメですよね。
エディターで名前を変えて保存の時「改行コードをUTF-8」でOKでした。
または、 多言語オンラインエディターさまで、変換したいファイルを選択しUTF-8に変換して貰うとすごく便利でした。

👆に戻る

ページ全体を囲うCSS


昔はtableでページを区切ってレイアウトしてた感じで、今はcssで空間的レイアウトみたいな感じ?
文字や画像など要素ごとの空間のレイアウトって感じてます。
そこでページ全体を囲うスペースを作ってその中に記事を書こう思いました。
》ここでのつまづき~。
レスポンシブを考えて、囲いのpaddingをパーセント指定で、padding: 2%;にしました。
そうすると、記事が増えてドンンドンスクロール幅が増えていき、横はイイけれど上と下のスペースが広がり変な感じです。
上下左右同じパーセントのスペースだから長くなる縦幅につられてスペースもひろがってるのね。あらら^^;
padding: 0 2%;で解決。上下のスペースを0で指定しました。

#kakoi { 
box-sizing: border-box;  /*paddingとborderがwidthとheightの中*/
width: 96%;
margin: 2%;
border-radius: 10px;   /*角の丸み*/
padding: 0 4%;        /*上下と左右*/
border: 1px solid ;
-webkit-box-shadow: 0px 0px 20px rgba(240,225,252,1); /*シャドー*/
box-shadow: 0px 0px 20px rgba(240,225,252,1);        /*上と同じ*/
overflow: hidden;         /*はみ出てしまった部分は隠れて見えない*/
display: block;
}

👆に戻る

忘れないため、記録しときます。


👆に戻る

jacode.pl


昔作ったCGIにとって、まさに神!ですねw。
metacpan.org様でダウンロードできます。バージョンアップされているようなので、確認してください。
》ここでのつまづき~。
メールCGIではかなり失敗し、エラーや送られてくるメールの文字化けが続きました。そんな時にjacode.plに救われました。
require './jcode.pl';----→ require './jacode.pl';
&jcode'convert(*name,'sjis');----→ &jcode'convert(*name,'UTF-8');
&jcode'convert(*value,'sjis');----→ &jcode'convert(*value,'UTF-8');
$msg .= "Content-type: text/plain; charset=ISO-2022-JP\n";----→ $msg .= "Content-type: text/plain; charset=\"UTF-8\"\n";
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-sjis">----→ <meta charset="UTF-8">
変更したメールCGIファイルを保存するときに、改行コードをUTF-8に設定して、やっと文字化けが直りました。


👆に戻る

CSS Flexbox


最近はTABLEタグではなく、CSSのFlexboxでレイアウトしてるようなので、さっそく画像表示CGIで試してみることにしました。
今のところの完成を記録しておきます。

/*--------子2つで折り返しのCSS例-----------------------*/
.f-container
{
display:flex;
/*--左から右へ 下へ折り返し複数行に上から下に---*/
flex-flow: row wrap; /*----2つのプロパティ設定-----*/
justify-content: space-around;   /*--間隔--*/
}
.f-item 
{
width: 46%;  /*---子1つの幅-92%とかにすると子1つで折り返します。*/
background:rgba(255,130,216,0.9);  /*----子の背景色----*/
box-sizing: border-box;   /*----調整しやすい用に-----*/
flex-direction: column;    /*----子は縦並び-----*/
display:flex;
margin-bottom: 15px;
color: rgba(230,242,255,1);
padding: 6px 6px;
border-radius: 6px;
box-shadow: 0px 0px 10px rgba(255,255,255,1);
overflow: hidden;  /*----追加-飛び出たものは表示しない---*/
} 
span
{
margin-top: auto; /*--下のNew画像位置を調整してくれます。--*/
}



👆に戻る

AN HTTPDとXAMPP


昔自分がどんなCGIを作っていたのか知りたくて、CGI(Perl)の動作テストをお家のPC(Windows10)でするとこにしました。
サーバーにUPしないでプログラムやCSSの変更テストができるので便利ですね。 あれれ、見れるCGIとエラーがでて見れないCGIがあります。
原因がわかりません。次、次、行ってみます。 ^^) _旦~~
またまた、見れるCGIとエラーがでて見れないCGIがあります。どうしよう^^;


👆に戻る

multipart/form-dataの境界文字列


私は長い間BIGLOBEさんのサーバーでCGI使ってきましたが、2021年の6月ぐらいにCGIが無反応になりました。
エラーは出ないけど書き込みはできない状態です。昔のCGIは動かなくなってしまったんだと、そろそろ閉鎖するかなと思いました。
しばらくしてから、なんかのきっかけでちょっと興味が湧きまして、TESTしてみることにしました。
結果、昔のCGIでも正常に動いているものと、動かないものがありました。
動かないCGIは、ファイルをアップロードするタイプのCGIです。
pealのこともすっかり、忘れてしまってます。少しづつ勉強ですね。

👆に戻る

レスポンシブでの単位


paddingや、margin、font-sizeを設定する単位がいろいろあるんですね。
いろいろ使い分けるのが正解でしょうが、覚えることが多すぎなもんで、自分に使いやすいのを記録しようと思います。
これから先、ここの記事も増えていけば良いなと思ってます。

👆に戻る

display:grid


display:grid、便利なCSSが出てきましたね。ページや画像のレイアウトでFlexboxと使い分けでしょうか。
gridのお勉強に、20年以上前に作った画像表示CGIがまたもや大活躍です。^^
縦横とグリッドレイアウトは広がりますが、今回はレスポンシブで気になる横(ビューポート)の設定の記録です。
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
ラッパー(親)の、grid-template-columnsで、分けられたエリア数よりコンテンツ(子)の数が増えると折り返します。


👆に戻る

<a href="#top">TOP</a>


いつの間にか、href="#top"が、リンク先をidで指定しなくても自動的にページの先頭へのリンクになってます。@@
<div id="top">ページのトップ</div>という移動先を指定しなくても<a href="#top">TOP</a>のみで、 ページトップへジャンプするようです。
実は<div id="top">をつけていたタイトル画像を削除した際に指定するのを忘れてまして、「あれ?なぜ?動いてるんだ?」という事がきっかけで、知りました。

それからページの右下隅によくある、スクロールしても位置が変わらない『上に戻るボタン』を作りました。
すこしページをスクロールしたら、ボワ~と現れるようにしているページが多いです。
初めから表示してても良いような気もしますが。
スクロールしたら表示されるようにするために、はじめは表示されないようにCSSでセットします。
スクロールが一定の長さ以上になると表示されるようにCSSを上書きするCSSも用意します。
その上書きCSSを呼び出すために、javascriptを使います。

上に戻るボタンも、スマホ使用の為なんでしょうかね~。
スマホ出たばかりの時は、指先でぴゅーっと画面をスクロールさせるCMとかあったようなきがします。
今、指先器用な人増えてるんじゃ~?まぁ~でも、ページ内リンクって必要なんでしょうね。w

👆に戻る

制作中


コピペですぐ使えるようにするためです。そろそろ記事のタイミングかも。


制作中




CGIのダウンロードページだよ