独学!Webサイト構築日誌

18日目:ふつうスタート。

9:00

よし。phpやるぞ。
どう考えてもphpを使えるようになれば、圧倒的に作業が楽になるので、学ばないという選択肢はないですね。
本日の目標は故知覧。
  1. PHPの基礎を学ぶ。
  2. iframeをphpに置き換え。

1.PHPの基礎を学ぶ。

昨晩のうちに、良さげなサイトを3つピックアップしておいた。

1は辞書的な役割で使って、ひとまず2で学ぶことにします。3つ目のサイトは、2で物足りないときと、別言語を今後学ぶときに使いましょう。

※2021/01/12追記。
書籍で学びたい方はコチラが良かった。
【説明】ちゃんとphpメインの本。htmlなどの記述は最小限で良い。 本文は緑と黒の2色だけの構成だが、図やプログラムは適切で、余白も十分に取ってあるので分かり易い。ただ、初心者がこれを1冊買って組めるようになるかと言われると難しい。テーマごとに分かり易くまとめてあるので、組み始めたあと「上手く行かんな」「これどういう意味かな」て時にザックリ把握するには最適。少なくとも私は、何日も考えた疑問が2つも解消された。原因が分からなかったので、これは大きい。

少し先のMySQLで使用することになったが、コチラも参考になった。
【説明】オールカラーで見やすく、実際のプログラムも難しくないが、ちょいちょい説明が省略されているので、もう一歩知りたいとなると難しい。記載されている内容を実現するのは簡単だが、自分で何かしようと思って読んでも得られるものは少ない。が、MySQLの立ち上げには非常に役に立った。

9:30

第1回終了。JavaScript理解できてるなら、入りは問題無さそう。

10:00

第2回終了。変数宣言が$だけという非常にシンプルな形。場合によっては、変数型をメモしておいた方が分かり易いかも?

10:30

第3回終了。第2回の理由から、変数型が混在した配列を扱うときに楽ね。配列キーは文字列でもOKというのは、自由度高いね。
第4回終了。演算子はJSと似てるかな。変数は{}より.で明示した方が良さそうね。

11:00

頭痛いアル。ちょっと寝てくる。

12:00

お腹減ったアル。ちょっと昼飯食ってくる。

13:00

頭もお腹も落ち着いたアル。ちょっと勉強してくる。

第5回終了。if/switch文は一般的な使い方と同じ。caseをまとめる方法は便利ね。多分if文に不等号条件使っちゃうけど。三項演算子は嫌いです。
第6回終了。for/while文は一般的な使い方と同じ。foreachというのを使ったことが無いが、while含めてfor文でゴリ押しすれば大丈夫でしょう。breakも使おうね。
第7回終了。関数の使い方はJSと似てますね。今まで参照渡しがよく分かってなかったので、今回理解できたことは大きい。デフォルト引数てのも便利なので、どこかで使ってみたいですね。

13:30

第8回終了。なんと第8回にして、お問い合わせフォームのひな形のようなものが出てきましたね。悪さ防止策を練る必要がありますが、これは楽しみです。

14:00

第9回終了。何となく理解していたcookieをちゃんと理解できました。「cookie=リピーターを判定するもの」て感じかな。
第10回終了。なるほど。Sessionという機能を使えば、次のページに移ったときに、前のページの情報を引き継げるという訳か。

14:30

さて、基礎中の基礎は全10回で抑えたので、早速やってみよう。

2.iframeをphpに置き換え。

お問い合わせフォームを先に設置したいところだが、ちょっと調べただけでも大変なのが分かるので、簡単そうなところから攻めてみる。まずはスライムから、いきなり竜王に挑むほどバカじゃない。

ひとまずこのサイトを参考にして、外部ファイルを作成してみましょう。
はい。意気揚々と.phpファイルを保存したら、早速右下にエラー出た。

16:00

なるほど、分かったぞ。

Visual Studio Code使ってる人なら、同様のエラーが出たと思うので、ココを参考に対処してほしい。「デバッグ」ていう構文チェックをプログラムが勝手にやってくれる素敵機能が付きます。無くてもどうにかなりそうだけど、あると超便利。むしろ今まで無くて困ってた。

※余談ですが、私は基本的に余分な機能を付けたくない人なので、適宜必要になったとき追加していく派ですが、多分XAMPPなんかを使った方が楽なんだと思う。


さて。
気を取り直して、phpの記述を始めましたが、全く参照できない。どういう事よ、と調べたらこういう事でした。記事数も多くないので、.html→.phpに手作業で変えようかと思いましたが、拡張子をphpに変えてしまうと、Visual Studio Codeの仕様上htmlでの入力補助が受けられないようなので、.htaccessというのを触ってみようと思います。

18:00

ちゃんと動作しねぇじゃねぇか、この野郎。と思っていたら、親切な人がまとめてくれていました。php書き始めるまでに体力持ってかれた。腹減った。先に夕飯だ。

20:30

見てください、この圧倒的シンプル感を!
after
※左:Befor 右:after

お世話になっていたとは言え、見ため的に邪魔だったiframeが無くなり、さも真面目にhtmlを記述しているかのように見えますよ!
実際の記述は下記。
            
html ※一部抜粋。
<body>
<!-- ヘッダー --><?php include("../php/header.php"); ?>
<div class="middle-body">
            
        

素晴らしい...予定通りに動いてくれることがこんなにも嬉しいとは。感動ですね。
フッターもサクっと変えちゃいます。

cssが反抗期なのでちょっと弄ります。
ヘッダーをhoverするとピクピク下に動いちゃいますが、大体いい感じなので、現在のhtml/cssをすべて公開します。
            
html ※日誌のひな形です。
<!DOCTYPE html><!--HTML使用宣言-->
<html>
<head>
<link rel="stylesheet" href="../other/style.css">
<meta charset="utf-8">
<title>独学!Webサイト構築日誌</title>
<meta name="description" content="html/css/JavaScript 未経験の管理人が、Webサイトを独学で学びながら、実際に構築していくまでの日誌。構築中に得た知識や技術をすべて無料で公開。進捗途中の画像も載せてます。">
<meta name="robots" content="index">
<link rel="icon" type="image/vnd.microsoft.icon" href="../img/icon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="../img/icon.ico">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-183998735-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-183998735-5');
</script>
</head>
<body>
<?php include("../php/header.php"); ?>
<div class="middle-body">
    <div id="main">
        <h1>◆日目:◆</h1>

        ◆日目の進捗。<br>
        <a href="../img/day◆.jpg" target="_blank"><img src="../img/day◆.jpg" alt="after" title="after"></a>
    </div>
    <!-- ココからJavaScript読み込み -->
    <script src="../js/update-time.js"></script>
    <script src="../js/back-next.js"></script>
</div>
<?php include("../php/footer.php"); ?>
</body>
</html>
            
        
            
css
@charset "utf-8";
/*文字装飾 start-------------*/
h1 {
padding: 0.5rem 1rem;
border-top: 4px solid #d8dcdc;
border-right: 4px solid #666;
border-bottom: 4px solid #333;
border-left: 4px solid #868888;
border-radius: 0;
background-image: -webkit-linear-gradient(135deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
background-image: linear-gradient(-45deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
}
h2 {
font-size: 150%;
position: relative;
padding: 0.1rem 1rem;
border-bottom: 6px solid #808080;
}
h2:before {
position: absolute;
bottom: -6px;
left: 0;
width: 20%;
height: 6px;
content: '';
background: #C0C0C0;
}
h3 {
border-bottom: 6px double #000;
width: 20%;
padding: 1rem 0 0 1rem;
}
/*文字装飾 fin-------------*/

/*-----ヘッダーメニュー start--------*/
.headerNav ul.menu{
list-style: none;
margin:0 auto;
}
.headerNav ul.menu li {
font-size: 120%;
width: 20%;/*メニューの大きさ*/
display: inline-block;
text-align: center;
text-decoration: none;
color: #000;
height:2rem;
line-height: 2rem;
border-bottom: 3px solid #808080;
margin: 3% 2% 0 2%;
}
.headerNav ul.menu li:hover:first-letter {
font-size: 150%;
color: #eb6100;
}
/*ヘッダー画像*/
div.headerImg{
margin:0.1rem;
text-align: center;
}

/*-----ヘッダーメニュー fin--------*/

/*フッター*/
footer{
text-align: right;
}
footer ul{
vertical-align:top;
text-align: left;
width: 30%;/*メニューの大きさ*/
margin: 10px auto;
display: inline-block;
}
footer ul a{
text-decoration: none;
}
footer ul li{
list-style: none;
overflow: hidden;
}


/*全体--------------*/
body{
background-color:	 #ffffff;
width:1000px;
margin: 0 auto 5rem auto;
}
.middle-body{
background-color: #ffffff;
width: 100%;
padding: 0 5px;
margin-bottom: 5rem;
}

/*テーブルの線*/
#main table,#main th,#main td{
padding: 10px;/*上下左右10pxずつ*/
text-align: center;
border: solid 1px #000000;
border-collapse: collapse;
}

/*リスト部分*/
#main ol {
width: 70%;
background:#FFFFFF;/*背景色*/
padding: 0.5rem 0.5rem 0.5rem 2.5rem;/*ボックス内の余白*/
border: solid 3px #00008B;/*線の種類 太さ 色*/
}
#main ol li {
padding: 0.5rem 0; /*前後の文との余白*/
}

/*画像の大きさ*/
#main img{
width: 50%;    /* 横幅を割合で指定 */
height: auto;  /* 高さは自動指定 */
margin:0.1rem;
}

/*コード部分の表示*/
pre{
white-space: pre-wrap ;
width: 95%;
border: solid 1px #C0C0C0;
background-color:	 #dadada;
padding:10px;
}

/*更新日*/
.update-time{
text-align: right;
}

/*前へ 次へ*/
.back-next{
text-align: center;
}
.back-next a{
text-decoration: none;
text-align: center;
margin:30px;
padding:10px 15px;
border:1px #ccc solid;color:#000053;
border-radius: 5px / 5px;
transition: 0.3s ;
}
#diary-back:hover,#diary-next:hover,#diary-all:hover{
font-size: 150%;
}

/*日誌一覧関係 --------------------*/
.p-diary ol{
border:none!important;
}
.p-diary a{
text-decoration: none;
}
.p-diary img{
position:relative;
top:3rem;
left: 3rem;
float:left;
width:25% !important;
border-top: 4px solid #d8dcdc;
border-right: 4px solid #666;
border-bottom: 4px solid #333;
border-left: 4px solid #868888;
border-radius: 0;
}
.p-diary .fullBody{
float:left;
width:100%;
margin-bottom: 5rem;
}
.p-diary .rightBody{
float:right;
width:60% ;
margin: 0 1rem;
min-height: 100px;
}
.p-diary .fullBody img:hover{
box-shadow:		1px 2px 3px #000;
-webkit-transform:	scale(1.5);
transform:		      scale(1.5);
-webkit-transition:	all 0.3s ease;
transition:		all 0.3s ease;
}
            
        

うん。なげぇなwww

21:30

この後は、コピペ作業とcssをもう少し弄ってから寝ます。

23:30

完全にコピペで浮かせる動きが出来た。
cssの内容を読んで何となくやってることは分かるけども、全然自分の力ではないので今度やり直す。
          
css
/*-----ヘッダーメニュー start--------*/
.headerNav ul.menu{
list-style: none;
margin:0 auto;
}
.headerNav ul.menu li {
font-size: 120%;
width: 20%;/*メニューの大きさ*/
display: inline-block;
text-align: center;
text-decoration: none;
color: #000;
height:2rem;
line-height: 2rem;
border-bottom: 3px solid #808080;
margin: 1rem;
position: relative;
transition-duration: 0.3s;
transition-property: transform;

-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.headerNav ul.menu li:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
transition-duration: 0.3s;
transition-property: transform opacity;
}
.headerNav ul.menu li:hover {
transform: translateY(-5px);
}
.headerNav ul.menu li:hover:before {
opacity: 1;
transform: translateY(5px);
}
          
        

また明日頑張るぞ。

年末だけど。大晦日だけど。そんなの関係ねぇ。



Before: 17日目

Before: 17日目

After: 18日目

After: 18日目



作成日:2020/12/30 - 更新日:2021/01/26

≪ 17日目≪ 一覧に戻る ≫19日目 ≫

HOME > 日誌一覧 > 18日目:ふつうスタート。