back
コントローラーとビューの基本 (3/5)
■global.cssの利用
デフォルトでの表示は、ただテキストが書いてあるだけであんまりでした。まずは、見栄えを良くすることを考えないといけません。
Slim3のプロジェクトでは、デフォルトでスタイルシートが用意されています。「war」フォルダの中にある「css」フォルダを開いてください。ここがスタイルシートを配置しておく場所です。
ただし、gen-controllerで生成されるビューにはこれが標準で組み込まれていないようです。この中に「global.css」というスタイルシートファイルが用意されています。まずは、これを利用してみましょう。
では、index.jspを以下のように修正してください。見ればわかるように、<link>タグを追加して/css/global.cssを読み込むようにしてあります。またスタイルの適用がわかるように<h1>タグに見出しを変更してあります。
これでリロードすると、ページの表示ががらりと変わります。スタイルが適用されているのがわかりますね。――とりあえず、global.cssを開き、必要に応じてスタイルを設定していく、という形でデザインを整えていくことにしましょう。
Slim3のプロジェクトでは、デフォルトでスタイルシートが用意されています。「war」フォルダの中にある「css」フォルダを開いてください。ここがスタイルシートを配置しておく場所です。
ただし、gen-controllerで生成されるビューにはこれが標準で組み込まれていないようです。この中に「global.css」というスタイルシートファイルが用意されています。まずは、これを利用してみましょう。
では、index.jspを以下のように修正してください。見ればわかるように、<link>タグを追加して/css/global.cssを読み込むようにしてあります。またスタイルの適用がわかるように<h1>タグに見出しを変更してあります。
これでリロードすると、ページの表示ががらりと変わります。スタイルが適用されているのがわかりますね。――とりあえず、global.cssを開き、必要に応じてスタイルを設定していく、という形でデザインを整えていくことにしましょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <%@taglib prefix="f" uri="http://www.slim3.org/functions"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Index</title> <link rel="stylesheet" type="text/css" href="/css/global.css" /> </head> <body> <h1>Hello Index !!!</h1> <p>this is test page.</p> </body> </html>
| << 前へ | 次へ >> |