技術メモ(主に自分向け)

短期記憶の自分向けの技術メモです。

CSS

コンポーネントでCSSがうまく読み込まない

コンポーネントの定義枠に設定したCSSがうまく読み込まない。 →読む込むタイミングを変更するcmp側 <aura:handler name="render" value="{!this}" action="{!.c.xxx}">controller.js側 xxx : function (component, event, helper) { //ここにスタイルの読み込み処理を書く } ・handler コンポーネントにイベント処理を実装す</aura:handler>…

スタイルの非表示

ブロックの非表示をしたい場合はstyleに以下のように書く。 display:none; ・HTMLに書く場合 (例) <p class="xxx" style="display:none;">あああ</p> ・CSSに書く場合 (例) CSS側 .THIS .testStyle { display:none; }HTML側 <p class="testStyle">あああ</p>

SalesforceでのCSSの書き方

CSS

以下のような書き方で書き進める。 .THIS .Class名1 .Class名2{…}.THISはここのコンポーネントで使用するよ。という意味合いがある。(例) ClassAの下にClassBがある。 ClassCの下にClassBがある。 ・ClassAの下にあるClassBだけ要素を追加したい。 .THIS .Cl…

rem サイズ単位

CSS

まず「em」は、親要素の文字サイズをもとにして自分の大きさを表す。 (例)基準とする親要素の文字サイズを10pxと指定した場合 1.4em⇒14px 2em⇒20px「rem」は、htmlの最上位要素であるhtmlタグの文字サイズを基準に文字サイズが認定される。 ※親要素の影響は…

marginとpadding

CSS

margin:領域間のスペース padding:領域内のスペース ⇒負の値を指定することはできない。上下左右で値を設定する際の書き方パターン (例)padding padding: 10px; 上下左右10px padding: 10px 20px; 上下10px 左右20px padding: 10px 20px 30px; 上10px 左右…

CSS リンク線削除

CSS

リンク線を消したい。 text-decoration: none;

CSS 箇条書きの・を消す

CSS

箇条書きの「・」を消したい。 list-style: none;

CSS 横並び

CSS

横並びにしたい。 display: flex;