CSS
Lightning Design SystemのProgress Indicatorを試してみました。普段画像などを用意して実装するプログレスバーをCSSとSVGで表現することができます。 バージョン2.1では正しく動作しなかったので現時点で最新の2.2.1で試してみました。 実装時の注意点 Lig…
いまいち理解できていないCSSのpositionの使い方メモ。 こんなFooterコード <footer id="footer"> <div id="footer_inner"> <p id="pagetop"> <a href="#">PAGETOP</a> </p> <p id="footer_logo"> <略> </p> <ul> <略> </ul> </div> </footer> footer_innerに対して『position: relative;』を宣言。ここを基準にするという意味。 div#footer_inner { width: 960px; margin: 0 aut…
アイコンフォントは画像ファイルを使用せずにアイコンを表示できるのですごく便利です。BootstrapやIonIconsなどで使用することができます。 iタグなどにclass指定するだけで簡単に利用できます。 Dev環境での勉強用ぐらいでしか利用したことがなかったので…
Visualforceを開発すると次のような感じになりますが、CSSでFontをカスタマイズすることで簡単に雰囲気を良くすることができます。 例えばこんな感じです。このfont-familyの内容はTrailheadのVisualforce Mobileのモジュールで紹介されていました。現時点で…
VisualforceのCSSカスタマイズを行うとき、標準スタイルの影響でうまく反映されない場面に遭遇することがあります。いくつかのケースと対応方法を調べてみました。 背景色の変更 Visualforceページの背景色は通常白色となっています。 背景色を変更する方法…
CSS用のドキュメントを簡単に作成できるツール「StyleDocco」というのがあることを知ったので使い方を勉強してみました。 StyleDocco StyleDoccoのインストール インストールにはNode.jsを利用するみたいです。以下のコマンドを実行します。 $ npm install -…
マルチデバイスに対応できるWebサイトの開発方法について勉強しようとレスポンシブWebデザインという書籍を読んでみました。 Bootstrapなどを利用するのではなくCSSを一から記述する形でマルチデバイスに対応する方法について解説されています。 全4章で構成…
最近Visualforceページを開発していて、reRenderで画面をリフレッシュした際にCSSで指定したスタイルが消し飛ぶ現象に遭遇しました。今までそんな現象に遭遇したことがなかったので何が原因なのかと思ったのですが、どうも画面リフレッシュ後にHTML5の<section>タグな</section>…
CSSがちょっとニガテだったので、書店でHTML/CSS デザインの教科書を買って読んでみました。一つ一つ分かりやすい解説があってすごく読みやすかったです。
CSS3について勉強したことをメモ。 CSS3の特徴 CSSのバージョン3 多彩な表現が可能（角丸とか影とか） W3Cが策定中 各ブラウザによって実装がまちまち ベンダープレフィックス 各ブラウザが先行的に実装している実験的な機能であることを示している。 chrome…
ドットインストールというサイトでCSS3の基礎を勉強しました。角丸とかアニメーションとか面白い機能の実装方法を勉強したのでVisualforceページで試してみることに。CSS3は古いブラウザによっては正常に認識されないとのことなので実際に使用することは少な…
IEのバージョンごとにCSSを指定できるそうです。 ・値の末尾に「\9」をつけると、IE8以下のみに適用。 ・キーの頭に「*」をつけると、IE7以下のみに適用。 ・キーの頭に「_」をつけると、IE6のみ。 #selector { width: 10px; /* 全てのブラウザに適用 */ wid…
