2015年10月05日

PC操作説明の記事などに使える、CSSスタイルのみでキーボードのキーを再現

こちらの記事「スーパーリロードとは?」のように、ブログ記事で「ショートカットコマンドを使うには、キーボードのキーをこうやって入力するんですよ」みたいな説明をする時に便利なCSSスタイルです。

スクリーンショット 2015-10-05 21.59.55.png

画像を使わず、文字数の制限などもなく、クラスを割り当てるだけで使えるCSSです。
一行の中で高さもマッチしますし、使いやすくなってると思います。

CSS
.keyboard {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 4px 12px;
  margin: 0 4px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
  font: 18px/24px Helvetica, Arial, serif;
  text-align: center;
  color: #666;
}

もちろんHTMLのほうでは
<p>ここで <span class="keyboard">&#x2318;</span> + <span class="keyboard">Alt</span> + <span class="keyboard">Esc</span> と入力します・・・</p>

のようにクラス指定します。

以上です!


このスタイルは、下記の記事で紹介されていたものを使いやすく汎用性を持たせるなど改良・修正して作ったものです。

[CSS]ショートカットの表記をApple Keyboard風に美しく実装するスタイルシート | コリス

このエントリーをはてなブックマークに追加
posted by taichistereo at 22:08 | Comment(0) | CSS/XHTML

2015年10月04日

「スーパーリロード」とは何か・ブラウザ別の操作方法

通常のページリロード(再読み込み)を行っても、ブラウザに残ったキャッシュが邪魔をして、必ずしも最新の情報が表示されないことがあります。
例えば、制作会社や社内スタッフがウェブページの修正作業を完了したあと、クライアントや上長が確認しても、「どこ直したの?変更されてないように見えるけど」というようなケースが良くあります。

そんな時は「スーパーリロード」を行えば問題を解決できます。
「スーパーリロード」とは、ブラウザに残っているキャッシュを無視して、強制的にWebサーバーから最新のデータをダウンロードすること方法のことです。
”強制再読み込み”とも言ったりします。

ブラウザごとに操作は異なります。


Windows

Internet Explorer : Ctrl + F5

Google Chrome : Ctrl + F5 または Shift + F5

Firefox : Ctrl + F5 または Ctrl + Shift + F5

Opera (11.62〜) : Ctrl + F5 または Shift + F5


Mac

Safari : + R

Google Chrome : + R

Firefox : + Shift + R


スマホなどの場合

iOSやAndroidでは、スーパーリロードが出来ません。
かわりに、今ブラウザに残っているキャッシュを消去する事ができます。

iPhone
設定 > Safari > Cookieとデータを消去 > Cookieとデータを消去

Android
設定 > アプリケーション > アプリケーションの管理 > すべて > ブラウザ > キャッシュを消去
または
ブラウザのメニュー > 設定 > プライバシーとセキュリティ > キャッシュを消去
または
ブラウザのメニュー > その他 > 設定 > キャッシュを消去




このエントリーをはてなブックマークに追加
posted by taichistereo at 19:05 | Comment(0) | CSS/XHTML

2011年04月10日

CSS透明度(不透明度)の設定

自分用メモ。
しょっちゅう忘れるので。


// (不)透明度80%の場合
filter: alpha(opacity=80);
-moz-opacity:0.80;
opacity
:0.80;


// 各属性とレンダリングエンジンの対応

alpha(opacity=)
  Trident(IE)

-moz-opacity
  Mozilla(Firefox)

opacity
  Webkit(Safari,Chrome),Opera
このエントリーをはてなブックマークに追加
posted by taichistereo at 20:44 | Comment(0) | CSS/XHTML

XHTML1.0 Strict の雛形

自分用メモです。
XHTML1.0 Strictで.htmlファイルを作成するときの雛形。

RSSやfavicon、no-cacheなどは適宜削除。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="index.rdf" />
    <link rel="stylesheet" href="common.css" type="text/css" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="Pragma" content="no-cache" />
<!--<link rel="shortcut icon" href="favicon.ico" /> -->
<!-- verify-v1 Here -->
<!-- y_key Here -->
<!-- msvalidate.01 Here -->
<!-- GoogleAnalytics Here -->
</head>
<body>

<div id="wrapper">
    <div id="header">
        
    </div>
    <div id="">
        
    </div>
    <div id="footer">
        <address>Copyright &copy; Koekatamarin 2011, All rights reserved.</address>
    </div>
</div>

</body>
</html>


このエントリーをはてなブックマークに追加
posted by taichistereo at 20:03 | Comment(0) | CSS/XHTML

CSSお決まりコード

自分用メモです。
common.cssとして冒頭に記述するリセット用のスタイル定義。

/* init
*************************************************************************/
body {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #000;
    line-height: 1.5em;
    background: #fff;
    font-family: "Verdana", "Arial", "Arial New", "MS P ゴシック", Sans-Serif;
}
dl,dt,dd,ul,li,ol,p,form,h1,h2,h3,h4,img,table,td,tr {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border: none;
    font-weight: normal;
}
ul:after,
ul li:after,
dl:after {
    content: ".";
    width: 0;
    height: 0;
    display: block;
    clear: both;
    visibility: hidden;
}

/*
img {
    background: #ccc;
    text-align: center;
    vertical-align: bottom;
    vertical-align: middle;
    display: block;
}
*/
a {
    color: #fff;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}

.hidden {
    visibility: hidden;
}



/* wrapper
*************************************************************************/
div#wrapper {
    width: px;
    margin: auto;
}


/* header
*************************************************************************/
div#header {
    height: px;
}


/* footer
*************************************************************************/
div#footer {
    padding: px;
}
div#footer address {
    font-style: normal;
}

/*
*************************************************************************/



このエントリーをはてなブックマークに追加
posted by taichistereo at 19:50 | Comment(0) | CSS/XHTML

2008年05月11日

IE6で「max-width」を使って、自動改行されない文字列を制御する

このブログのクロスブラウザ対応にいくつか問題があったので、修正しました。
致命的だったのは、URLなどの英数字の文字列が長すぎて自動で改行されない場合に

・Firefox
  -> エリアを突き抜けて文字列が表示されるが、その他のレイアウトに影響はない
・IE6
  -> 文字列の長さに合わせてエリアが伸びてしまい、サイドエリアが下に回り込む

というものでした。
ブログ以外のサイトではあまり気にすることのない問題でしたが、ブログのマークアップ上はありがちの状況でしょう。。。


解決方法として、max-widthを指定してやることがまず思いつきます。

同時に、IE6ではmax-widthが解釈されないというおなじみの仕様のことも思い出します。

このシチュエーションで、僕は「minmax.js」というライブラリを用いることにしました。

doxdesk.com: software: minmax.js

このライブラリを読み込んでおくことで、IE6でも自由にmax-height、max-widthプロパティを使用することができます。


一方、よくある
* html #container {
    width:expression(document.body.clientWidth < 600? “600px” :
    document.body.clientWidth > 1200? “1200px” : “auto”);
}
IE6でmin-width,max-widthを実装する:CSS | Tech de Go より。他にも
[CSS]IEで、min-widthやmax-widthを実現する方法
CSSとJavaScriptでmin-width max-width を実装する - youmos など)

のようなmax-widthの実現方法というのは、今回の場合役には立ちません。
clientWidthを基準にして数値を一定の範囲に丸めてしまうという方法ですから、ブロックのレイアウト時にしか使用できません。


今回は、ページ中に不規則に何度も現れる要素のmax-widthを指定したいわけです。

さらに言えば、自動改行されない文字列というのはイコール「リンク付きの」URL文字列なので、aタグ、つまり文中のインライン要素にのみ適用させればよいわけです。

というわけで、実際のコード。

<head>中で
<script type="text/javascript" src="minmax.js"></script>
とかいう風にパスを指定してminmax.jsライブラリをロードして、
CSSでは
*html div.blogEntry p.honbun a {
    over-flow: hidden;
    max-width: 450px;
}
のように定義します。

これで、長過ぎるリンク文字列をエリアの右端できれいに非表示にすることが出来ます。
もちろんリンク自体がおかしくなることはありません。
あくまで見た目上、長過ぎるところを隠しただけ。



で、実際にこのブログに反映させています。
こちらのエントリで実際にその結果が確認できます。

Windowsとは なかなか断絶できない :: [コエカタマリン MX 2007] (2008年05月04日)

minmax.jsを使えば、CSS内でexpression文を書いたりしないで済むのでラクチンですね。

おためしあれ。


# ちなみに、このブログのCSSは他にもちょこちょこ手をいれておきました。
# 前より微妙に見やすくなったかと思いますが、いかが?
このエントリーをはてなブックマークに追加
posted by taichistereo at 07:08 | Comment(2) | CSS/XHTML

2007年08月02日

DOCTYPE宣言まとめ

自分(コエカタマリン)の運営しているサイトはほとんど「XHTML 1.1 strict」だと思っていたのに、今日自分のサイトを開いて「ソースを見る」してやったところ、なんと実は「XHTML 1.0 strict」ばかりでした。

どこで思い違いしてたんだぁ??

実際には1.0も1.1もほぼ大差ない仕様で、ほんの一部が修正されているという程度なので1.1に変えてもちっとも問題ありません。

というか、1.1だと思いこんでいた自分とか、それなのに1.0でサイトをオープンし続けてきていた自分の記憶力のほうに問題を感じずには居られません。


さて、そんなわけで1.1strictのDOCTYPEを改めて調べました。

ついでに、DOCTYPE宣言について一覧にしてメモしておきます。



HTML 2.0 DTD (RFC1866)
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 2.x DTD (RFC2070)
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML i18n//EN">

HTML 3.0 DTD
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">

HTML 3.2 DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

HTML 3.2 DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.01 Strict DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



調べ出すといーっぱいありますが、有名なやつだけにしています。

僕の場合、
  1. XHTML 1.1 strict
  2. XHTML 1.1 transitional
  3. HTML 4.0 transitional
しか使いません。。。
と思っていたら、実際には「1.0」strictも結構使っていたことになるな。。。


ちなみに、各ブラウザ毎の後方互換モードと標準準拠モードに関しては「DOCTYPEスイッチ」については、こちらに一覧表があって、いつ見てもわかかりやすくて役に立ちますよ。
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html
このエントリーをはてなブックマークに追加
posted by taichistereo at 02:37 | Comment(0) | CSS/XHTML
Blog Widget by LinkWithin