PHPの拡張子を隠す

Apache設定の話ですが、検索すると以下の設定をすればできるよ、というサンプルがよく出てきます。

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*)$ $1.php

でも、私の環境だとうまく動いてくれなかったんですよね。

代わりに、以下の設定であればうまく動きました！

RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^([^.]+)$ $1.php [NC,L]

このあたり、ちゃんと理解していないのがダメですね。。。

以下のサイトを参考にさせていただきました。

.htaccess の設定レシピ集

プルダウンメニューで項目をグループ化する

プルダウンメニューで項目をグループ化するには、以下のようにoptgroup タグを利用します。

<form>
<select>
<optgroup label="英字">
<option value="a">a</option>
<option value="b">b</option>
<optgroup label="数字">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
</select>
</form>

phpで項目をグループ化する良い方法がないか考えたのですが、一旦保留にします。。。

こちらのサイトを参考にさせて頂きました。
プルダウンメニューをグループ分けする

pre要素で折り返し表示させる

あまり良くないという記述を発見したものの、コマンドの実行結果を表示するのにpre要素を利用しています。現在作成中の機能では1行が長い出力結果が出る場合があるのですが、画面レイアウトが崩れました。。。

調べたところ、CSSで折り返しするように指定できるみたいです。
こんな感じです。

pre {
white-space: pre-wrap ;
}

こちらのサイトを参考にさせて頂きました。
pre要素で折り返し改行させる方法

ページがモバイル フレンドリーではありません。

Suama Online ServiceのページがGoogle検索で表示されるか確認していたところ、検索結果に「ページがモバイル フレンドリーではありません。」との表示が！

何だこれと思って調べてみたのですが、サイト管理者にだけ表示されるものみたいです。Googleが世の中全体に向けてこのサイトがダメだとアピールしだしたのかと思い、焦りました（笑）

リンクをクリックすると、モバイルフレンドリーテストというページに飛びます。で、以下の4つがダメですと表示されました。

• テキストが小さすぎて読めません
• ビューポートが設定されていません
• コンテンツの幅が画面の幅を超えています
• クリック可能な要素同士が近すぎます

なるほど、確認すると確かにスマホで見ると表示が非常に小さいです。取り敢えずviewportを設定しよう、ということで以下の設定を各ページに入れました。

<meta name=viewport content="width=device-width, initial-scale=1">

再度モバイルフレンドリーテストで確認を行うと、モバイルフレンドリーです、と表示されました！でもまあ、表示は大きくなったのですが使いにくいですね。。。今後の検討としましょう。

参考にさせて頂いたサイト

もう逃げない。HTMLのviewportをちゃんと理解する

「viewport設定て何だよ、面倒くさい！」→実は一番脳みそ使わない問題。　スマホ対応 最前線ブログ

モバイルフレンドリーテスト

CSSでテーブルの幅を調整する

テーブルを作成したのですが、変なふうに改行されてしました。ということで、CSSで幅を調整しました。こんな感じです。

table{
width: 100%;
} 

th.koumoku{
width: 20%;
} 

th.hensu{
width: 20%;
} 

th.atai{
width: 60%;
}

以下のサイトを参考にさせていただきました。
HTMLのtableでテーブル（表）を作る方法とCSSのデザイン調整解説

完成したサイトは以下のものです。
WEB接続環境確認

リスト（ul,li）を縦横に並べる

トップページに機能一覧を鉢したいのですが、AWSの機能一覧みたいに並べたいなと思います。で、やり方を調べたところ、まさにやりたい事が纏めてあるサイトがありました。

CSSでリストから表を作る方法！２列、３列、４列のレイアウトはこうすれば良いけど罫線が問題

今回はサンプル３を利用させていただきました。

ul.listtest3 {
    display: table;
    width:100%;
}
ul.listtest3 > li:nth-child(3n+1) {
    clear: both;
}
ul.listtest3 > li {
    display: table-cell;
    float: left;
    width: 33%;
}

あとは少し行間を調整します。

【CSS】line-heightで行間を調整する方法：おすすめの値は？