Mysqlで重複項目を除いて表示
Mysqlで重複項目を除いて表示
SELECT DISTINCT col_name, ... FROM tbl_name;
jqueryでajaxフォーム送信
$('#submit').on('click',function(e){
//html送信キャンセル
e.preventDefault();
var data = $("#form").serialize(); //送信フォーム内容全て
//非同期通信開始
$.ajax({
type: "POST",
url: "01.php",
data: data,
//成功時
success: function(xml){
var str = $(xml).find("str").text();
$("#sample1").text(str);
},
// 通信失敗時の処理
error: function() {alert('接続に失敗しました')}
});
});
テキスト内の特定の文字からリストを作る
query("SELECT * FROM db_contents");
foreach ($sql as $row) {
//[navidate]部分を取り除く
$ret=GetBetweenStr2($row['text']);
$date=str_replace($ret[0],"",$row['text']);
$db=explode(";",$ret[1]);
for($i=0;$i
レスポンシブ 上下を入れ替える
display プロパティーの table-row-group や table-header-group などの値を応用すれば、上下の入れ替えが可能です。説明だと分かりづらいので、demo をご参照ください。
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mod-groupContainer{}
.mod-group1{}
.mod-group1-inner{
padding:10px;
background:#0CF;
}
.mod-group2{}
.mod-group2-inner{
padding:10px;
background:#F0C;
}
@media(max-width:600px){
.mod-groupContainer{
display:table;
width:100%;
}
.mod-group1{display:table-row-group;}
.mod-group1-inner{}
.mod-group2{display:table-header-group;}
.mod-group2-inner{}
}
</style>
</head>
<body>
<p>横幅 600px をしきい値として表示が変わります。</p>
<div class="mod-groupContainer">
<div class="mod-group1"><div class="mod-group1-inner">
<img src="img_01.jpg" alt="" width="320" height="240">コンテンツ1 コンテンツ1
</div></div>
<div class="mod-group2"><div class="mod-group2-inner">
コンテンツ2 コンテンツ2 コンテンツ2
</div></div>
</div>
</body>
</html>
この方法は、対象デバイスによって、コンテンツのプライオリティーが変わる場合に有効でしょう。また、table-footer-group をさらに加えれば、上、中、下の 3つを自由に入れ替えることもできます。
なお、これをさらに使いやすくしたような仕組みの CSS Grid Layout モジュールが CSS3 として策定中で、IE10 では利用することができます。
HTMLで縦書きは実現できるか - CSSでの実装とライブラリの活用
さまざまな言語表記法をサポートする仕様。
writing-modeプロパティで縦書きを指定できる。
writing-mode: tb-rl; /* IE独自仕様 */ writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -o-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;
注意点
IE5.5以降（ただしプロパティ値が独自）
Google Chrome, Safariは要ベンダープレフィックス
text-decoration:underlineが左側に引かれ、一般的な傍線にならない
※ Opera未確認
問題点
Firefoxでは未だ実装されていない
横幅固定のブロック要素でテキスト量に応じた適切な縦幅が確保されない
二点目は分かりにくいので補足して説明する。
通常のウェブサイトでは、ブロック要素の横幅は予め決められていることが大半かと思う。所謂レスポンシブデザインであっても、ブラウザウインドウの横幅以上にはしないはずだ。
ところが、縦書きテキスト量が十分に多い場合、親ブロック要素の左側にはみ出していく。（下図左）
左端まで行が埋まった場合は、ブロックの右端に戻って二段目が始まるというのが、一般的に期待される挙動だろうと思う。そのためには、column-widthプロパティを使って段組みを指定してやる必要があり、これによって確かに左端まで達した次の行は二段目として右端から開始されるようになる。（下図中央）
だが、親ブロックの高さは段組みされたテキスト全体の縦幅に追随してはくれない。そのために、テキストを格納したブロックの次の要素が、テキストと重なったり無駄な空白を取って配置されるなど、うまくレイアウトされないのだ。
かといって、height:autoと設定すると、ブロックの縦幅は中の一文の長さもしくはウインドウ縦幅に依存してしまい、レイアウトしずらくなる。
cssで幅を計算する
.menu li{
calc(100%/5);
}
横幅や高さを自動で可変する
img {
max-width: 100%;
height: 100vw; /*正方形の画像の例ですが、縦横比3:2の画像であれば66.7vwとなります*/
}
img {
max-height: 100%;
width: 100vh; /*正方形の画像の例ですが、縦横比3:2の画像であれば66.7vwとなります*/
}
高さの指定に幅の数値を使用することができるのです。これによりどんな機種のスマホであっても、横幅いっぱいに画像を自動リサイズした時の横幅から高さを取得することが可能となるのです。
あくまでこれは一例ではありますが、viewportを使用したスマホサイトの構築など色々な使い方が可能であることはお分かりいただけるかと思います。
