タイトル画像

レンタルサーバーとドメイン登録
HTML5の宣言と文字コードを指定
ページ全体を囲うCSS
<head>~</head>の記録
jacode.pl
Flexboxの今のところ
AN HTTPDとXAMPP
20年ぐらいのブランクで、さっぱり忘れてしまってます。Web制作での失敗談など記録して行こうかと思います。
昔は、Internet ExplorerとNetscapeで見れるWEBサイトを、HTMLにサイズや色、マージンなど直接書いて作ってましたが、最近はCSSで指定してるみたいでスマホでもなんとか見れるサイトにしようといろいろ探ってみました。昔のページを書き換えながらお勉強しようと思いました。

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




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


》ここで失敗談。 レスポンシブを考えて、囲いの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で試してみることにしました。
》ここで失敗談。といきたいとこですが、失敗だらけで書ききれませんね。w
今のところの完成を記録しておきます。

/*--------子2つで折り返しのCSS例-----------------------*/
.f-container
{
display:flex;
/*--左から右へ 下へ折り返し複数行に上から下に---*/
flex-flow: row wrap; /*----2つのプロパティ設定-----*/
justify-content: space-around;   /*--間隔--*/
}
.f-item 
{
width: 46%;  /*------子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があります。どうしよう^^;


👆に戻る

制作中


コピペですぐ使えるようにするためです。


制作中




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