-HTML・CSS

キャッシュさせたくない(最新ページを表示して欲しい)

ヘッダーキャッシュしないでと書き込む

[html]<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT" />
[/html]

が、やはり、便利な機能なので、全部ページをキャッシュしないサイトはイカンので、WordPress関数を使って指定ページにのみヘッダーに追加するという事で、こんな感じで

[php]<?php if(is_page(‘ページID’)): ?>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT" />
<?php endif; ?>
[/php]

覚書です。

おそろしく便利で役立つ(EXCELデータからtableタグ作成)

どういった方が作られたのかも良くわからないのですが、素晴らしいツールです。
Excelデータをhtmlのtableタグに変換してくれます。
印刷した表だけ渡される事もよくあるのですが・・・・
http://styleme.jp/tool/xls2html/

素晴らしいツール、ありがとうございます!!

CSSで形をつくる

これは面白いです。
http://css-tricks.com/examples/ShapesOfCSS/

The Shapes of CSS

All of the below use only a single HTML element. Any kind of CSS goes,
as long as it’s supported in at least one browser.

Square

[css]
<style>
#square {
width: 100px;
height: 100px;
background: red;
}
</style>
[/css]

Rectangle

[css]
<style>
#rectangle {
width: 200px;
height: 100px;
background: red;
}
</style>
[/css]

Circle

[css]
<style>
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

/* Cleaner, but slightly less support: use "50%" as value */
</style>
[/css]

Oval

[css]
<style>
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

/* Cleaner, but slightly less support: use "50%" as value */
</style>
[/css]

Triangle Up

[css]
<style>
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
[/css]

Triangle Down

[css]
<style>
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
</style>
[/css]

Triangle Left

[css]
<style>
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
</style>
[/css]

Triangle Right

[css]
<style>
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
</style>
[/css]

Triangle Top Left

[css]
<style>
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
</style>
[/css]

Triangle Top Right

[css]
<style>
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;

}
</style>
[/css]

Triangle Bottom Left

[css]
<style>
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
</style>
[/css]

Triangle Bottom Right

[css]
<style>
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
</style>
[/css]

Curved Tail Arrow via Ando Razafimandimby

[css]
<style>
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
</style>
[/css]

Trapezoid

[css]
<style>
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
</style>
[/css]

Parallelogram

[css]
<style>
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
</style>
[/css]

Star (6-points)

[css]
<style>
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
[/css]

Star (5-points) via Kit MacAllister

[css]
<style>
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: ”;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);

}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: ”;
}
</style>
[/css]

Pentagon

[css]
<style>
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
</style>
[/css]

Hexagon

[css]
<style>
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
</style>
[/css]

Octagon

[css]
<style>
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}

#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}

#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
</style>[/css]

Heart via Nicolas Gallagher

[css]
<style>
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
[/css]

Infinity via Nicolas Gallagher

[css]
<style>
#infinity {
position: relative;
width: 212px;
height: 100px;
}

#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
[/css]

Diamond Square via Joseph Silber

[css]
<style scoped="">
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: ”;
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
</style>
[/css]

Diamond Shield via Joseph Silber

[css]
<style scoped="">
#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: ”;
position: absolute;
left: -50px; top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
</style>
[/css]

Diamond Narrow via Joseph Silber

[css]
<style scoped="">
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: ”;
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
</style>
[/css]

Cut Diamond via Alexander Futekov

[css]
<style scoped="">
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}

–></style></div>
<div class="shape">
<h2>Egg</h2>
<div id="egg"></div>
<style scoped=""><!–
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

</style>
[/css]

Pac-Man

[css]
<style scoped="">
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}

–></style></div>
<div class="shape">
<h2>Talk Bubble</h2>
<div id="talkbubble"></div>
<style scoped=""><!–
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}

</style>
[/css]

12 Point Burst via Alan Johnson

[css]
<style scoped="">
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}

</style>
[/css]

8 Point Burst via Alan Johnson

[css]
<style scoped="">
#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
}

</style>
[/css]

Yin Yang via Alexander Futekov

[css]
<style scoped="">
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}

#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}

#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
</style>
[/css]

Badge Ribbon via Catalin Rosu

[css]
<style scoped="">
#badge-ribbon {
position: relative;
background: red;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

#badge-ribbon:before,
#badge-ribbon:after {
content: ”;
position: absolute;
border-bottom: 70px solid red;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-ms-transform: rotate(-140deg);
-o-transform: rotate(-140deg);
}

#badge-ribbon:after {
left: auto;
right: -10px;
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-ms-transform: rotate(140deg);
-o-transform: rotate(140deg);
}
</style>[/css]

Space Invader via Vlad Zinculescu

[css]
<style scoped="">
#space-invader{

box-shadow:
0 0 0 1em red,
0 1em 0 1em red,
-2.5em 1.5em 0 .5em red,
2.5em 1.5em 0 .5em red,
-3em -3em 0 0 red,
3em -3em 0 0 red,
-2em -2em 0 0 red,
2em -2em 0 0 red,
-3em -1em 0 0 red,
-2em -1em 0 0 red,
2em -1em 0 0 red,
3em -1em 0 0 red,
-4em 0 0 0 red,
-3em 0 0 0 red,
3em 0 0 0 red,
4em 0 0 0 red,
-5em 1em 0 0 red,
-4em 1em 0 0 red,
4em 1em 0 0 red,
5em 1em 0 0 red,
-5em 2em 0 0 red,
5em 2em 0 0 red,
-5em 3em 0 0 red,
-3em 3em 0 0 red,
3em 3em 0 0 red,
5em 3em 0 0 red,
-2em 4em 0 0 red,
-1em 4em 0 0 red,
1em 4em 0 0 red,
2em 4em 0 0 red;

background: red;
width: 1em;
height: 1em;
overflow: hidden;

margin: 50px 0 70px 65px;
}

</style>
[/css]

TV Screen

[css]
<style scoped="">
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: ”;
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
</style>
[/css]

Chevron via Anthony Ticknor

[css]
<style scoped="">
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}

#chevron:before {
content: ”;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: ”;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}​

</style>
[/css]

Magnifying Glass

[css]
<style>
#magnifying-glass
{
font-size: 10em; /* This controls the size. */
display: inline-block;
width: 0.4em;
height: 0.4em;
border: 0.1em solid red;
position: relative;
border-radius: 0.35em;
}
#magnifying-glass::before
{
content: "";
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0;
background: red;
width: 0.35em;
height: 0.08em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
</style>
[/css]

Facebook Icon via Nathan Swartz

[css]
<style>
#facebook-icon {
background: red;
text-indent: -999em;
width: 100px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid red;
border-bottom: 0;
}
#facebook-icon::before {
content: "/20";
position: absolute;
background: red;
width: 40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #eee;
border-radius: 25px;
}
#facebook-icon::after {
content: "/20";
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #eee;
right: 5px;
}
</style>
[/css]

[css]
<style style="display: none !important;" type="text/css">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
#demo-top-bar {
text-align: left;
background: #222;
position: relative;
zoom: 1;
width: 100% !important;
z-index: 6000;
padding: 20px 0 20px;
}
#demo-bar-inside {
width: 960px;
margin: 0 auto;
position: relative;
}
#demo-bar-buttons {
padding-top: 10px;
float: right;
}
#demo-bar-buttons a {
font-size: 12px;
margin-left: 20px;
color: white;
margin: 2px 0;
text-decoration: none;
font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
text-decoration: underline;
}
#demo-bar-badge {
display: inline-block;
width: 302px;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
#demo-bar-badge a {
display: block;
width: 100%;
height: 38px;
border-radius: 0;
bottom: auto;
margin: 0;
background: url(/images/examples-logo.png) no-repeat;
background-size: 100%;
overflow: hidden;
text-indent: -9999px;
}
#demo-bar-badge:before, #demo-bar-badge:after {
display: none !important;
}
[/css]

androidだけに適用させるCSS

Androidのバージョン違いによるレイアウトがひどいのでなんとかしたいので、こんなものを見つけました。

引用
http://kotori-blog.com/css/css_browser_selector/

『CSS Browser Selector』の使用方法
ダウンロード
下記の公式サイトの「DOWNLOAD」のところにリンクがはってあるのでそこからjsをダウンロードします。
CSS Browser Selector
『CSS Browser Selector』の読み込み
より前で、ダウンロードした「css_browser_selector.js」を読み込みます。
[html]
<script src="css_browser_selector.js" type="text/javascript"></script>
[/html]
CSSの記述方法
jsを読み込んだらあとはCSSにコードを書くだけです!
ブラウザやOS毎にCSSを記述することができます。
公式に載っている記述方法の例です。

[css]
html.gecko div#header {
margin: 1em; /*geckoエンジンのブラウザのみ*/
}
.opera #header {
margin: 1.2em; /*operaのみ*/
}
.ie .mylink {
font-weight: bold; /*ie(全バージョン)のみ*/
}
.mac.ie .mylink {
font-weight: bold; /*Macのieのみ*/
}
[/css]
OSとブラウザのセレクタの間にはスペースは入りません。
『CSS Browser Selector』で利用可能なOSのコード
利用できるOSコードの一覧載せときます。
[css]
.win {
/*Windows (全バージョン)のみ*/
}
.vista {
/*Windows Vistaのみ*/
}
.linux {
/*linux(x11とlinux)のみ*/
}
.mac {
/*Mac OSのみ*/
}
.freebsd {
/*FreeBSDのみ*/
}
.ipod {
/*iPod Touchのみ*/
}
.iphone {
/*iphoneのみ*/
}
.ipad {
/*ipadのみ*/
}
.webtv {
/*WebTVのみ*/
}
.j2me {
/*J2ME Devices(例えばOpera mini)のみ*/
}
.blackberry {
/*blackberryのみ*/
}
.android {
/*Google Androidのみ*/
}
.mobile {
/*全てのモバイルデバイスのみ*/
}
[/css]
『CSS Browser Selector』で利用可能なブラウザのコード
利用できるブラウザコードの一覧も載せときます。
[css]
.ie {
/*Internet Explorer(全バージョン)のみ*/
}
.ie8 {
/*Internet Explorer 8.xのみ*/
}
.ie7 {
/*Internet Explorer 7.xのみ*/
}
.ie6 {
/*Internet Explorer 6.xのみ*/
}
.ie5 {
/*Internet Explorer 5.xのみ*/
}
.gecko {
/*Firefox(全バージョン)とCaminoのみ*/
}
.ff2 {
/*Firefox 2のみ*/
}
.ff3 {
/*Firefox 3のみ*/
}
.ff3_5 {
/*Firefox 3.5のみ*/
}
.ff3_6 {
/*Firefox 3.6のみ*/
}
.opera {
/*Opera(全バージョン)のみ*/
}
.opera8 {
/*Opera 8.xのみ*/
}
.opera9 {
/*Opera 9.xのみ*/
}
.opera10 {
/*Opera 10.xのみ*/
}
.konqueror {
/*Konquerorのみ*/
}
.webkit {
/*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari {
/*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari3 {
/*Safari 3.xのみ*/
}
.chrome {
/*Google Chromeのみ*/
}
.iron {
/*SRWare Ironのみ*/
}
[/css]
まとめ
もっと早く出会いたかった!!!!
これに尽きます。
ホント簡単でシンプルですばらしすぎます。
煩わしいハックタグとはおさらばです。

Android ブラウザーのバグ font-size:0

最新のものではないようですが、アンドロイドに実装されているブラウザー
(ChromeのPC版とは別のもののよう)で、バグを見つけました。
英語の文献ではいくつかありましたが、日本語では初かも!!

font-size:0 に反応しないというものです。
「文字サイズが勝手に変更される」というのものは以前にも忘備しました。
その現象かと思いましたが違いました。
inputタグ内の value値をブラウザー上に表示させたくないので、調整していて気づきました。
androidブラウザー以外は特に問題なく font-size:0が効きます。
android用にtext-indent:-9999px;を追記する必要があります。
ちなみにGoogle先生のヒントの中に、
replacing 0 with very small non-zero value, e.g. 0.001px ってのがありましたが、まったくダメです。

スマホ対応(iPhone特有)

スマホ対応の業務で悩んだ点がありましたので、メモ φ(..)メモメモ
PCでのシュミレータでは起こらないのですが、iPhone実機では起こる現象です。
Androidでも起こらない事象です。

コントロールしているはずの文字サイズが反映されません。

原因は、iPhoneが自動で見やすいとされるサイズに、自動調整(こちらの設定を無視して)おこなっているようです。
そこで対応。

引用:http://m.designbits.jp/13031617/
情報ありがとうございます。
-webkit-text-size-adjust: 100%; がポイントらしい
-webkit-text-size-adjust: none; だと文字の拡大ができなくなるので注意。noneでなく100%
例:

[html]
/**
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
[/html]

Normalize.css を使うのがよさそう。

PC用とスマホ用のレイアウト切替ボタン

「現在のサイトをスマホ対応にもして欲しい」との依頼

ここは Google大明神の推奨する方法でやるしかないでしょう。
(https://developers.google.com/webmasters/smartphone-sites/details)
という事で、いわゆるレスポンシブwebです。
(あまりに古いサイトは、サイトをリニューアルした方が良い場合もあります)

その流れで、サイトのPC用レイアウトとスマホ用のレイアウトの切り替えボタンが必要になり作成しました。
「ボタンを押せばレイアウトが切り替わる」という例はいくらでも検索で見つかりますが、では、選択したレイアウトを利用してページを推移した時に選択したレイアウトは維持されるのか?と言えば細工をしないと無理です。

いろんな実装方法があると思いますが、今回は、jQueryでクッキーを操作して作成して、参照する先のCSSファイルを保持したままページの推移をしています。
こんな感じ。

ポイントは、

  • jQuery cookie の使い方
  • CSSのリンク先を記述(分岐するように)
  • 読み込むcssの中身(htmlとcssの知識)

でしょうか。
切替ボタン作成に関しての作業は、

  • jQuery を読み込ませる
  • クリックしたときのイベントを書く。CSSのリンク先を記述も
  • 読み込むcssの中身を作ってゆく

こんな感じでしょうか。私の場合は、先にスマホ用表示のレイアウトを、お客さんのサイトを見ながらCSSを書いて、ボタン作成作業で、それらをドバっとスマホ用のCSSに載せました。

残る実装作業は、
このボタンをPC用サイトでも表示するのか・しないのかなど、運用・使用上の問題をお客さんと話し合って実装(たぶんメディアクエリー使用)という流れになります。

最後に、PC用のレイアウトで、スマホ用の切り替えボタンを表示しているサイトが少ないように思うので、こんな意見を載せておきます
(私個人的には、PC用のサイトでもレイアウト切替のボタンは表示させておく方が良いのではと思っています)

http://www.elezea.com/2012/09/responsive-design-expectations/ このページのより
ここでは
「スマホで通販サイトを見て、購入前にはパソコン用のレイアウトに切り替える」「それは、スマホ用のサイトは、PC用のサイトに比べ情報量が少ないと思っているから、」というように書かれています。
どうでしょう。実は私もそんな風に思っています。本当に同じ情報なのか確かめたくなります。
ということで、スマホで見た時にレイアウト切替ボタンは必須である事は間違いありません。
上の英語の記事は、「スマホサイトにPC用にレイアウト切替ボタンはつけておく方が良いよね」という事になっています。

PCでサイトで見た時はどうでしょう。パソコンで見てスマホ用のレイアウトに切り替える人はいないかもしれませんが、
「あーレイアウトが切り替わるだけね」と確認してもらうためにも、表示させておいた方がよくありませんか・・・・
「混乱させないためにPC用レイアウトには切替ボタンは非表示」という考え方もありますが、私は余計なパターナリズムかなと今のところは思っています。

後日追記:
上記のように、PCサイトにも切替ボタンつけた方が良いかも、と書きましたが、実装していて気づきました。
PCサイト上でのクロスブラウザーでの検証と対策、スマホ用ブラウザーはバリバリにCSS3.0とHTML5で対応なので、PC用の旧ブラウザーでの検証の実作業が発生するので、費用が「さらに倍」となりかねなかったです。作業時間と効果を考えれば、PC用サイトではレイアウト切替ボタンはイラネーという線が濃厚になるのも仕方がないことかもしれませんね。

CSSの達人

CSSの達人になりたいと思っているのとは別に、WPを触っていて、時々そのページだけCSSを編集したい、という場合に、重宝する機能
カスタムCSS custom CSS

これは便利です。こちらから引用(Thanks!)

下記のデータをfunction.phpに書き込む

[php]
//Custom CSS Widget
add_action(‘admin_menu’, ‘custom_css_hooks’);
add_action(‘save_post’, ‘save_custom_css’);
add_action(‘wp_head’,’insert_custom_css’);
function custom_css_hooks() {
add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘post’, ‘normal’, ‘high’);
add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘page’, ‘normal’, ‘high’);
}
function custom_css_input() {
global $post;
echo ‘<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="’.wp_create_nonce(‘custom-css’).’" />’;
echo ‘<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">’.get_post_meta($post->ID,’_custom_css’,true).'</textarea>’;
}
function save_custom_css($post_id) {
if (!wp_verify_nonce($_POST[‘custom_css_noncename’], ‘custom-css’)) return $post_id;
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST[‘custom_css’];
update_post_meta($post_id, ‘_custom_css’, $custom_css);
}
function insert_custom_css() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo ‘<style type="text/css">’.get_post_meta(get_the_ID(), ‘_custom_css’, true).'</style>’;
endwhile; endif;
rewind_posts();
}
}
[/php]

ついでにJSも

[php]
JavaScriptを追加できるようにする場合は、以下をfunctions.phpに記述します。
//Custom JS Widget
add_action(‘admin_menu’, ‘custom_js_hooks’);
add_action(‘save_post’, ‘save_custom_js’);
add_action(‘wp_head’,’insert_custom_js’);
function custom_js_hooks() {
add_meta_box(‘custom_js’, ‘Custom JS’, ‘custom_js_input’, ‘post’, ‘normal’, ‘high’);
add_meta_box(‘custom_js’, ‘Custom JS’, ‘custom_js_input’, ‘page’, ‘normal’, ‘high’);
}
function custom_js_input() {
global $post;
echo ‘<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="’.wp_create_nonce(‘custom-js’).’" />’;
echo ‘<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">’.get_post_meta($post->ID,’_custom_js’,true).'</textarea>’;
}
function save_custom_js($post_id) {
if (!wp_verify_nonce($_POST[‘custom_js_noncename’], ‘custom-js’)) return $post_id;
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$custom_js = $_POST[‘custom_js’];
update_post_meta($post_id, ‘_custom_js’, $custom_js);
}
function insert_custom_js() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo ‘<script type="text/javascript">’.get_post_meta(get_the_ID(), ‘_custom_js’, true).'</script>’;
endwhile; endif;
rewind_posts();
}
}
[/php]