Q&A
style属性で書くのですね。
しかし、わからないことがあります。
そもそも、このページネーションのコードにはhtml属性がありません。
style属性はhtmlに使うんですよね？
どうすれば、このコードにstyle属性が使えるのですか？
このページネーションにcssを実装しようと考えています。
htmlに直接、cssを書こうと思っていますがこの場合、どこにcssを付け加えればいいか分かりません。
html
1function paging($limit, $page, $disp=5){ 2 //$dispはページ番号の表示数 3 $next = $page+1; 4 $prev = $page-1; 5 6 //ページ番号リンク用 7 $start = ($page-floor($disp/2) > 0) ? ($page-floor($disp/2)) : 1;//始点 8 $end = ($start > 1) ? ($page+floor($disp/2)) : $disp;//終点 9 $start = ($limit < $end)? $start-($end-$limit):$start;//始点再計算 10 11 if($page != 1 ) { 12 print '<a href="?page='.$prev.'">« 前へ</a>'; 13 } 14 15 //最初のページへのリンク 16 if($start >= floor($disp/2)){ 17 print '<a href="?page=1">1</a>'; 18 if($start > floor($disp/2)) print "..."; //ドットの表示 19 } 20 21 22 for($i=$start; $i <= $end ; $i++){//ページリンク表示ループ 23 24 $class = ($page == $i) ? ' class="current"':"";//現在地を表すCSSクラス 25 26 if($i <= $limit && $i > 0 )//1以上最大ページ数以下の場合 27 print '<a href="?page='.$i.'"'.$class.'>'.$i.'</a>';//ページ番号リンク表示 28 29 } 30 31 //最後のページへのリンク 32 if($limit > $end){ 33 if($limit-1 > $end ) print "..."; //ドットの表示 34 print '<a href="?page='.$limit.'">'.$limit.'</a>'; 35 } 36 37 if($page < $limit){ 38 print '<a href="?page='.$next.'">次へ »</a>'; 39 } 40 41 /*確認用 42 print "<p>current:".$page."<br>"; 43 print "next:".$next."<br>"; 44 print "prev:".$prev."<br>"; 45 print "limit:".$limit."<br>"; 46 print "start:".$start."<br>"; 47 print "end:".$end."</p>";*/ 48 49} 50 51$limit = 10;//最大ページ数 52$page = empty($_GET["page"])? 1:$_GET["page"];//ページ番号 53 54paging($limit, $page);
下のcssとhtmlを参考にcssをデザインしてみたいです。
html
1<ul class="pageNav01"> 2<li><a href="1.html">« 前</a></li 3><li><a href="1.html">1</a></li 4><li><span>2</span></li 5><li><a href="3.html">3</a></li 6><li><a href="4.html">4</a></li 7><li><a href="5.html">5</a></li 8><li><a href="6.html">6</a></li 9><li><a href="3.html">次 »</a></li> 10</ul> 11
css
1#main ul.pageNav01 { 2 margin: 0 0 10px; 3 padding: 10px 10px 5px; 4 background: #eee; 5 text-align: center; 6} 7 8#main ul.pageNav01 li { 9 display: inline; 10 margin: 0 2px; 11 padding: 0; 12} 13 14#main ul.pageNav01 li span, 15#main ul.pageNav01 li a { 16 display: inline-block; 17 margin-bottom: 5px; 18 padding: 1px 8px; 19 background: #fff; 20 border: 1px solid #aaa; 21 text-decoration: none; 22 vertical-align: middle; 23} 24 25#main ul.pageNav01 li a:hover { 26 background: #eeeff7; 27 border-color: #00f; 28} 29
回答2件
0
なぜHTMLに直接としたいのかはわかりませんが…
そういうことであれば、提示のCSSコードをstyleタグを使って記述してください。
<style> /*ここにCSSのコード*/ </style>
投稿2016/08/10 08:40
総合スコア1298
0
投稿2016/08/10 09:00
退会済みユーザー
総合スコア0
ん？
<ul class="pageNav01">
<li><a href="1.html">« 前</a></li
><li><a href="1.html">1</a></li
><li><span>2</span></li
><li><a href="3.html">3</a></li
><li><a href="4.html">4</a></li
><li><a href="5.html">5</a></li
><li><a href="6.html">6</a></li
><li><a href="3.html">次 »</a></li>
</ul>
これにCSSを適用させたいんですよね？
はい、そうです。
というより、最初僕が提示したページネーションにcssを適用させたいです。
三つ目のcssを適用させたいです。
<ul class="pageNav01">
<li><a href="1.html">« 前</a></li>
<li><a href="1.html">1</a></li>
<li><span>2</span></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
<li><a href="5.html">5</a></li>
<li><a href="6.html">6</a></li>
<li><a href="3.html">次 »</a></li>
</ul>
これ記述しているHTMLの<head>内に
<style>
/*ここにCSSのコード*/
</style>
を記述したら適用されるんですが！！！！
すみません、説明不足でした。
最初に提示したfunction pagingの方です。こっちにはhtml要素がないので、どうやってcssを適用させればいいか分からなかったのです。
ひとつ提案があります！
まず、HTMLとCSSについて勉強して、理解出来たらPHPを勉強してはいかがでしょうか？
function pagingは複雑なコードなので、cssとhtmlの基本的なことがわかっていてもわかりません。
ちなみにfunction pagingでprintしてるのHTML要素じゃないですかー？
下記のコードを書いてもダメでした。
<html>
<head>
<meta name="Content-Style-Type" content="text/css">
</head>
<body>
<p style="color:blue; line-height:1.5;">"<p>current:".$page."<br>" </p>
</body>
</html>
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/10 08:45
2016/08/10 09:00
2016/08/10 09:10
2016/08/10 09:15
2016/08/10 09:34
2016/08/10 11:05
2016/08/11 13:54