魁！小野の塾　PHPで簡単なプログラムを作ってみようの巻　第３話

PHPで簡単なプログラムを作ってみよう　第３話

初心者向け、PHPプログラム構築講座です。
初心者といっても、PHPの勉強を少し行い、LAMP環境が自分で構築できるレベルを対象とします。
まったくの初心者の場合は、わからない部分が出てくると思います。
できるだけ細かく説明は入れていきますが、説明がわからない場合は、PHPやMySQLの初心者講座をご覧ください。

対象のスキルレベル

• LAMP環境の構築
• PHP言語が読める
• HTML, CSS, Javascriptが少しわかる
• Bootstrapのドキュメントをみて、HTMLが書ける
• CDNを理解している

構築環境

• Windows10
• XAMPP(PHP7.3.2, MariaDB 10.1.38)

Navbar

これから、HTML本体の作成に取り掛かります。
まずはNAV要素から始めていきたいと思います。

bootstrapのドキュメントで、navbarを参考に、コピーしていきます。

今回はnavbarのtextを入れるサンプルのなかの２つ目を選択しました。（真ん中ぐらいにあります。）

いらない部分がたくさんありますので、削っていくのと、色も含めて修正。その後、アイコン入れたり、内容を変更したりします。

今回はリンク（メニュー）が無いため、上記ハイライト部分は不要となります。
HEADER要素になるので、タグで囲み、必用な部分を変更します。

この状態で、画面を見てみると何か間延びした感じですかね。

ちなみに、ブラウザの横幅が小さくなる(992pxより小さい)と、ボタンが表示されます。

ボタンをクリックすると、隠れたテキストが表示されます。

ボタンを表示する、通常表示にするという切替は、２行目に定義されているclassの内容で決定しています。

.navbar-expand{-sm|-md|-lg|-xl}
デバイスの横幅は以下の通り指定されています。

今回は、navbar-expand-lgの指定があるため、ブラウザの横幅が992pxより小さくなるとボタンが表示されるようになります。

背景色とアイコンの調整

掲示板（ブランド）が左端によっているので、.containerを利用し、右にずらします。
スクロールしても、表示されるように変更。(.fixed-top)
背景色がグレーではないほうが良いので、グリーンに変更。(.navbar-dark .bg-info)
※参考 Background color

.containerは画像では分かりずらいですが、背景色の変更は分かりやすいですね。（.fixed-topも現段階では分からない。。。）

続いて、アイコンを設定していきます。
Font Awesome Icon Freeへアクセスし、好きなアイコンをクリックします。

掲示板のロゴ部分には、「clipboard」を使っていきます。

上記のHTMLソース部分をクリックすると、クリップボードに内容がコピーされます。
「掲示板」の先頭にカーソルを合わせて、貼り付けとすれば出来上がりです。
ここで、貼り付け後にタグの後ろに半角スペースを入れておくのがお勧めです。

アイコンのクラスを見てみると、「far」と「fa-clipboard」が指定されています。
クラスを追加することで、大きさを変えたり、回転させたりすることができます。

例えば、大きくしたい場合は、「fa-2x」や「fa-3x」を追加で指定します。
回転させたい場合は、「fa-spin」を指定します。

※参考 Sizing Icons
※参考 Animating Icons
※参考 Rotating Icons

アニメーション命！

navbar最後は、アニメーションを付けていきたいと思います。
Animate.cssを見ていきます。
左側にアニメーションの一覧がありますので、クリックして好きなアニメーションを選びます。

今回は、掲示板部分に「backInRight」、好きなこと書いて生きよう！部分には「bounce」を指定します。
好きなこと書いて生きよう！のアニメーションは、３秒遅れて実行するようにします。
掲示板部分を大きくするために、H1要素で囲みました。

遅延の設定や、速度、無限ループの設定などクラスを指定すれば動きの調整が可能となります。
※参考 Utility classes

動きは確認できませんが、画面はこの通りになります。

最後にfixed-topを指定しているので、CSSの追加を行います。
トップから120pxずらしてコンテンツを表示させるようにします。

魁！小野の塾