tyoshikawa1106のブログ

- Force.com Developer Blog -

CSS

SFDC:Lightning Design SystemのProgress Indicatorを試してみました

Lightning Design SystemのProgress Indicatorを試してみました。普段画像などを用意して実装するプログレスバーをCSSとSVGで表現することができます。 バージョン2.1では正しく動作しなかったので現時点で最新の2.2.1で試してみました。 実装時の注意点 Lig…

CSSのpositionの使い方メモ

CSS

いまいち理解できていない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…

SFDC:アイコンフォントとfont-FamilyのCSS指定でハマった話

アイコンフォントは画像ファイルを使用せずにアイコンを表示できるのですごく便利です。BootstrapやIonIconsなどで使用することができます。 iタグなどにclass指定するだけで簡単に利用できます。 Dev環境での勉強用ぐらいでしか利用したことがなかったので…

SFDC:Visualforceの見た目をお手軽に良くする方法

Visualforceを開発すると次のような感じになりますが、CSSでFontをカスタマイズすることで簡単に雰囲気を良くすることができます。 例えばこんな感じです。このfont-familyの内容はTrailheadのVisualforce Mobileのモジュールで紹介されていました。現時点で…

SFDC:VisualforceのCSSカスタマイズ

VisualforceのCSSカスタマイズを行うとき、標準スタイルの影響でうまく反映されない場面に遭遇することがあります。いくつかのケースと対応方法を調べてみました。 背景色の変更 Visualforceページの背景色は通常白色となっています。 背景色を変更する方法…

CSS用ドキュメント生成ツール『StyleDocco』の使い方を勉強しました

CSS

CSS用のドキュメントを簡単に作成できるツール「StyleDocco」というのがあることを知ったので使い方を勉強してみました。 StyleDocco StyleDoccoのインストール インストールにはNode.jsを利用するみたいです。以下のコマンドを実行します。 $ npm install -…

レスポンシブWebデザインを読んでForce.comサイト開発の勉強しました

マルチデバイスに対応できるWebサイトの開発方法について勉強しようとレスポンシブWebデザインという書籍を読んでみました。 Bootstrapなどを利用するのではなくCSSを一から記述する形でマルチデバイスに対応する方法について解説されています。 全4章で構成…

SFDC:VisualforceとHTML5-開発時に気をつけること

最近Visualforceページを開発していて、reRenderで画面をリフレッシュした際にCSSで指定したスタイルが消し飛ぶ現象に遭遇しました。今までそんな現象に遭遇したことがなかったので何が原因なのかと思ったのですが、どうも画面リフレッシュ後にHTML5の<section>タグな</section>…

HTML/CSSデザインの教科書を読んでForce.comサイト開発の勉強しました

CSSがちょっとニガテだったので、書店でHTML/CSS デザインの教科書を買って読んでみました。一つ一つ分かりやすい解説があってすごく読みやすかったです。

CSS3についてのメモ

CSS

CSS3について勉強したことをメモ。 CSS3の特徴 CSSのバージョン3 多彩な表現が可能(角丸とか影とか) W3Cが策定中 各ブラウザによって実装がまちまち ベンダープレフィックス 各ブラウザが先行的に実装している実験的な機能であることを示している。 chrome…

SFDC:VisualforceとCSS3

ドットインストールというサイトでCSS3の基礎を勉強しました。角丸とかアニメーションとか面白い機能の実装方法を勉強したのでVisualforceページで試してみることに。CSS3は古いブラウザによっては正常に認識されないとのことなので実際に使用することは少な…

IEのバージョンごとにCSSを指定

CSS

IEのバージョンごとにCSSを指定できるそうです。 ・値の末尾に「\9」をつけると、IE8以下のみに適用。 ・キーの頭に「*」をつけると、IE7以下のみに適用。 ・キーの頭に「_」をつけると、IE6のみ。 #selector { width: 10px; /* 全てのブラウザに適用 */ wid…