以前はimg要素で外部リンク用の画像を挿入していた。CSSでFont Awesomeのfa-external-linkアイコンを簡単に挿入できる。
.exampleとexample.comは適宜変更の事
.example a[href^="http://"]:after,
.example a[href^="https://"]:after,
.example a[target="_blank"]:after {
content: "\f08e";
display: inline-block;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin: 0 .3em;
text-decoration: none;
}
.example a[href*="example.com"]:after {
content: "";
}Twitterウィジェットを可変レイアウトにするために以下のCSSを指定していた。
#twitter-widget-0 {
width: 100%;
}本日（2014年5月8日）確認したら可変レイアウトではなくなっていた。そこで!importantを使って順位を上げてみた。
#twitter-widget-0 {
width: 100% !important;
}うまくいきました。
Bootstrap 3では画面サイズによって表示・非表示を指定するためのclass属性値が用意されてる。
SYNCK GRAPHICAさんのメールフォームCGI Jcode版をBootstrapで利用する場合は、bootstrap.cssの.form-controlのwidthが消えてしまうので、!importantルールなどにより優先順位を上げる
このサイトでもアイコンとして利用しているFont Awesome
通常Font Awesomeはi要素を追加しますが、CSSのcontentプロパティに記述することでHTMLを変更することなく使用できます。
例：Bootstrap 3 のパンくずで、/を右矢印 に変更する
Unicodeは F105
.breadcrumb > li + li:before {
content: "\f105";
font-family: FontAwesome;
}簡単な記述で、ご覧のとおり
おなじみ素敵な日本語フォントを公開しているM+ FONTS
ライセンスも「フリー」と謳われており、Webフォントとしても利用できる。
These fonts are free software.
Unlimited permission is granted to use, copy, and distribute them, with or without modification, either commercially or noncommercially.
THESE FONTS ARE PROVIDED "AS IS" WITHOUT WARRANTY.これらのフォントはフリー（自由な）ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。
ということなので、早速使ってみた。
http://mplus-fonts.sourceforge.jp/webfonts/からお好みのフォントをダウンロード。今回はフラットデザインでの利用なので細めのmplus-1p-light.ttfを選んでみた。
インターネットエクスプローラー用に.eotも必要なのだが、これは以下のサイトで変換して作成する。
.ttfファイルを選択して【Convert to .eot】ボタンをクリックするだけで完了する。
後は、フォントを適当なディレクトリに放り込みCSSに以下を追加記述する。（パスは適宜変更）
/*IE*/
@font-face {
font-family: mplus-1p-light;
src: url("mplus-1p-light.eot");
}
/* Firefox, Opera, Safari */
@font-face {
font-family:mplus-1p-light;
src:url("mplus-1p-light.ttf") format("truetype")
}注意：Firefoxなどで適用できないこともあるので、必ずIE用の.eotを先に記述します。
使いたいところでfont-family: 'mplus-1p-light' , sans-serif;を指定すれば、あらキレイ！
Bootstrap 3 にはスキップリンク設定ができるような.sr-onlyというクラスが設けられている
Accessibility Getting started · Bootstrap
<body>
<a href="#content" class="sr-only">Skip to content</a>
<div class="container" id="content">
The main page content.
</div>
</body>サイトをMTOSで構築することになった。
サイトオーナー自身で更新作業になるため、なるべく簡単に出来るようAnotherCustomFieldsプラグインを使おうかとも思ったけれども、MT標準の「定型文」を使うことにした。
リッチテキストエディタにはオリジナルのスタイルシートを適用できるので、以下のようにリッチテキスト用のrich-text.cssを設定。
読み込ませるスタイルシートは1つしか設定できないので、Bootstrapなどを利用する場合にやりにくい。そこでrich-text.cssに@importでbootstrap.min.cssとカスタマイズ用のcustom.cssの2つを読みこませる。
@import url("<$mt:Link template="bootstrap_min_css"$>");
@import url("<$mt:Link template="custom_css"$>");
スタイルを変えたい場合には、カスタマイズ用のスタイルシート本体だけを弄ればOK！
Livefyre Comments 3 のコメントフォームがゴチャゴチャしてるので、スッキリさせてみた。
以下の様なCSSで上書きする
.fyre-editor-editable {
border-color: #A1A1A1 !important;
background-color: #fff !important;
box-shadow: none !important;
}
.fyre-editor-toolbar .goog-toolbar > div {
background-color: #fff !important;
background-image: none !important;
}先日の「CSS Nite redux, Vol.5 powered by デジタルハリウッド福岡校」で鷹野さんに教えていただいたAdobe Fireworks CSS3 Mobile Packを使ってみた。
fireworks_css3mobile_p1_100311.zxpをクリックしてExtension Managerにインストールする。
Fireworksで簡単なボタンを作ってみる
こんな感じ。とりあえず角丸とグラデーション
プロパティ
ウィンドウ>エクステンション>CSS propertiesを選択してCSS propertiesパネルを表示する。
ボタンを選択した状態で更新ボタンをクリック。
出力されたコード。
background-color:#3ab7f5;
/* Firefox v3.6+ */
background-image:
-moz-linear-gradient(20% 0% -90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
/* safari v4.0+ and by Chrome v3.0+ */
background-image:
-webkit-gradient(linear,
20% 0%,
20% 75%,
color-stop(0, rgb(58,183,245)),
color-stop(1, rgb(51,153,204)));
/* Chrome v10.0+ and by safari nightly build*/
background-image:
-webkit-linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
/* Opera v11.10+ */
background-image:
-o-linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
background-image:
linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
width:120px;
height:60px;
/* Firefox v1.0+ */
-moz-border-radius:5px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:5px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+ and by IE v9.0+ */
border-radius:5px;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr = #ff3ab7f5,endColorstr = #ff3399cc,GradientType = 0);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr = #ff3ab7f5,endColorstr = #ff3399cc,GradientType = 0)";あとはクラスなんかを付けてブラウザで確認。CSS3のボタンが出来上がり！
MovableType 5.0 テーマ 1070と1071のサイドバーにはCSS3のRGBaプロパティとborder-radiusプロパティを使用しています。
div#sub dl dt {
font-size: 100%;
font-weight: bold;
color: #333333;
background-color: rgba(255,255,255,0.5);
padding: 15px 20px 15px 15px;
border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px 0px 0px 10px;
}
/* IE8 and below */
div#sub dl dt {
background-color: #f6f6f6\9;
padding: 15px 20px 15px 15px\9;
}概要
CSS Validation Serviceのチェックが少し厳しくなっていた。
In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
たとえばMovable Typeのデフォルトテンプレートでは、画像を左右に配置する際のmt-image-leftやmt-image-rightなどのクラスにfloatが使われている。以下のような対応を行う。
デフォルト
.mt-image-left {
float: left;
margin: 0 20px 20px 0;
}追加
img.mt-image-left {
margin: 0 20px 20px 0;
float: left;
}また、幅が確定できないものにはwidth:auto;でOK！
RSSリーダーを使わずFirefoxの拡張機能であるSage 1.3.10を利用してフィードを読んでいる。OPML のインポート・エクスポートも可能なので重宝するのだが、長文の場合に段組では読みにくい。
以前からスタイルシートをカスタマイズして文字を大きくしていたのだが、今日は中途半端に時間が余ったので、ちょこっといじってみた。今日のカスタマイズはblockquoteとpre
読みやすい！
参考になるリソース
MovableTypeのコメントフォーム周りをちょこっとカスタマイズ。
stylesheet.tmplを編集することによってlabel要素とinput要素を行儀良く横並びにしてみる。
individual_entry_archive.tmplのlabel要素とinput要素の関係は以下の様になっている。
<p>
<label for="comment-author"><MT_TRANS phrase="Name">:</label>
<input id="comment-author" name="author" size="30" />
</p>デフォルトのスタイルシートではlabel要素をブロックに変更してある。ソースに改行は入っていないが、上下に表示されているのでstylesheet.tmplの以下の部分を削除する
.comments-open label { display: block; }label {
margin-bottom: 0.5em;
width: 10em;
float: left;
clear: both;
white-space: nowrap;
}デフォルトテンプレートでの表示
fieldsetを追加するとなお良し
CSS Validatorが新しくなっていた！
CSS Validatorとは「W3C CSS 検査サービスについて」より
W3C CSS 検査サービスは、W3Cによって作られたフリーソフトウェアで、ウェブデザイナーやウェブ開発者が CSS (Cascading Style Sheets; カスケーディング・スタイルシート) をチェックするのに使うことができます。このサービスは、ウェブ上のフリーサービスを通じて使ったり、ダウンロードして Java プログラムとして実行したりウェブサーバー上で Java サーブレットとして使ったりできます。
クライアント様のサイト構築中に「CSS Validatorの表示が変だな？」と思っていたんですが、先程、リニューアルが完了したみたいです。
リニューアルでチェックが甘くなっているようです。
昨年の秋に変更があった際、文字色と背景色を共に指定してない場合には警告が出るようになりましたが、今回のリニューアルでは元に戻されています。
transparentや背景色を上手に使えばよいのかもしれませんが、アクセシビリティを考えると警告してくれたほうが良かったのかもしれません...
CSS実装徹底検証! そこが知りたいInternet Explorer 7
使用するサンプルソースはXHTML1.0 Strictで記述し、基本的にStandard(標準準拠)モードで表示する。IE7 beta2においても、Quirks(下位互換)モードで表示すると古いバージョンと同じ表示になってしまうため、注意が必要だ。また、特に断りのない限り、「Internet Explorer」は「IE」、「Internet Explorer 6」は「IE6」、「Internet Explorer 7 beta2」は「IE7 beta2」と略している。
かなり詳細までInternet Explorer 7に於けるCSS実装を検証している記事だ。
やはりInternet Explorer 7でもapplication/xhtml+xmlをサポートしないのだろうか。
いつになったら正式にXHTML 1.1を利用できるのか？CSS以前の問題では...
なぜ、私の手元にあるかというと・・・
（Web標準に興味がある方には、おおよその見当が付くと思いますが、）今日、ある企業の社長とお会いした。
私のサイトもご覧になっていたようで、恥ずかしい限りですが、Web2.0のことから経営やマネジメント・Blogの書き方まで、普段はとても聞けないだろうと思われるような貴重なお話。
いつも拝見しているBlogで想像していた通りの、とても気さくで、気取らない方でした。
ありがとうございました。
もうける.net Vol.1（毎日コミニュケーションズ）に、アットスタイルが制作した【真宗 紫雲山 正覚寺】を「CSSを使用したサイト」として紹介記事が掲載されました。
11月、雑誌社より掲載の依頼があり、副住職様より掲載の許可をいただきました。
デザインだけでなく機能の向上にも役立つCSS
福岡県大牟田市にあるお寺「正覚寺」のサイトでは、CSSで細かく文字間のバランスを指定し、見やすさ、読みやすさを考慮して作成されています。ブラウザで文字の大きさを指定してもレイアウトが崩れませんので、是非試してみてください。
デザイン性の向上、管理のしやすさに加え、CSSを使用するメリットとしてもうひとつ、アクセシビリティというものがあります。アクセシビリティとは、「Webサイトの利用のしやすさ」という意味に加え、「障害を持つ人にとっての、Webサイトの利用しやすさ」という意味も含まれます。HTMLからデザインのためのコードを省くことができるため、目の見えない方が使用する音声読み上げブラウザの認識率の向上にも、CSSが役に立つことを覚えておきましょう。
IEBlogより：お使いのCSSハックを一掃してください | Web標準Blog
IEBlogは本日付で開発者に対し、IE7のStrict（厳格）モードにおいて機能しなくなるCSSハックの数々を「一掃する」呼びかけを掲載しました。
IE開発チームを手助けすることに興味があろうとなかろうと、次のことを考えてみてください。ソースコードのレビューは、悪いCSSハックの代わりに良いCSSハックを使うことのできる箇所を見極めるうえで、役立つかもしれません。以下の場合においても、レビュー（そしていくつかのドキュメントも？）は、あなたを助けるかもしれません。
久しぶりにcss-discussを見に行ってみると・・・
This hack is DEPRECATED and should not be used due to the imminent release of IE 7. See [the official IE blog] for details.
このハッキングを推奨しない、IE7の差し迫っているリリースのため使用するべきではありません。 詳細のための公式のIEブロッグを見てください。
ページ幅を固定していた頃のスタイルシートはMovableTypeのbase-weblog.cssにも使用されているStarHtmlHack等色々なCSSハックを使用していましたが、現在のリキッドレイアウトでは、CSSハックは不要となり削除しました。 XHTMLコードもdivの多用を避け、シンプルに！
display:noneは検索エンジンスパムであるという俗説があります。また、スタイルシートにdisplay:noneを記述したためにインデックスから削除されたという事実もあまり聞きません。
Yahooで当サイトのCSSを検索してみると結果に現れました。
ちなみにGoogleではインデックスされていないようです。
しかし、インデックスされてるから削除の対象になるというものでもなさそうです。
当サイトもGUIとナビゲーションを両立させるためにdisplay:noneを多用しているので、今後のYahooの動向には十分注意する必要がありそうです。
CSSの勉強にCSS Creatoをよく見に行く。
そのサイドバーに本日のブラウザ統計が表示されている。
Firefoxが好調とはいえ、IEの倍近く。
IEが90%以上のシェアを誇っているのに、この数字があらわすものは･･･
CSSでテンプレートを作る場合には、まずFirefoxで確認し、IEでちゃんと表示できるように修正。一時期のネットスケープとは逆転した状態です。
バグだらけのIEは使い物になりません。
CSSを使ってブログとウェブサイトにナビゲーションバーを作ろう！
bannerやheaderの後にナビゲーションのクラスやIDを作りリストで指定します。 たとえば私のところはこんな感じ・・・
<div class="none"><a href="#main">メニューを読み飛ばす</a></div>
<map id="Navigation" name="Navigation" title="Navigation">
<ul>
<li><a href="/" title="Web標準 Webサイト制作 アットスタイル ホーム">ホーム</a></li>
<li><a href="service.php" title="Web制作">Web制作</a></li>
<li><a href="blogtemptop.php" title="テンプレート">テンプレート</a></li>
<li><a href="form.php" title="お問い合わせ">お問い合わせ</a></li>
<li><a href="http://s36ph.s72.xrea.com/" title="ブログ">ブログ</a></li>
<li><a href="http://style.jp.land.to/phpbb/index.php" title="フォーラム">フォーラム</a></li>
</ul>
</map>
<div class="none">ナビゲーション閉じる</div>
スタイルシートで整形すればOK！
#navi {
float: left;
margin: 0;
padding: 0px;
width: 100%;
}
#navi ul {
font-size: 0.7em;
margin: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
padding: 0;
width: 100%;
float: left;
list-style: none;
background: #D2D2D2 url("webimg/background.png") 0% 40% repeat-x;
}
#navi ul li {
float: left;
margin: 0;
padding: 0;
}
#navi a, #navi a:visited {
display: block;
padding: 2px 10px;
margin: 0;
color: #000;
text-decoration: none;
font-weight: normal;
border: 0;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #333333;
}
#navi a:hover {
background: url("webimg/over.png") 0% 40% repeat-x;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}
css.maxdesign.com.au - CSS resources and tutorials for web designers and web developersに迷ってしまうほどたくさんのリストナビゲーションが紹介されています。
お気に入りが見つかるかも・・・