-
HTMLのナレッジを貯めよう！！
トピックス by
96 pt
2022年3月14日 12:36
1472
PV
ウィジェット編集してるとたまにつまづきますよね・・！
ここみて振り返れるようにしていきたいです！私からは以下です！
・リンクを追加するときのaタグにはclassではなくidを使う
・videoタグのみセンターにしたい場合divでvideoタグを囲みCSSで
text-align:center;
文字だけ右や左寄せにする場合
＜p style=”text-align: right”＞
文字を右寄せ
＜/p＞ -
18 コメント
-
すごーく初歩的なのですが、この前他のユーザーさんが新人さんにwidgetの使い方を教えるときに、CSSのオレンジの部分は触らないで、紫のところは変えると適宜アレンジ出来るんだよーと教えていてなるほどそういう伝え方があるのか〜と感心しました🤔
あと個人的によく間違えてしまうのが入れ子関係ですかね。。
spanの中にdiv入れられないとか、よくやってしまいます＞＜
社内のエンジニアさんに下記サイトを教えてもらったのでうまく活用したいところです💪
https://yoshikawaweb.com/element/
↑色が水色になっているところは選択したタグの親として使用することができるのがわかります。
また、「子」をクリックすると、子として使用できるタグがオレンジ色に変わるようになっています！（この見方もどっちがどっちだかよくわからなくなってしまいますが。。）
-
アンケートwidgetでよく使います！
選択のtype=“radio” と“checkbox”の違い
radio: 1つだけ選択
checkbox: 複数選択
-
- フォームの枠に太さをつけるには、タグ設定に記述する。色はフォーム設定から変更可能！
iframeなので、外側のdivの.sb-formに記述が必要。
.sb-form{
border-right: 15px solid rgb(254, 228, 102)!important;
border-left: 15px solid rgb(254, 228, 102)!important;
} - 記事LPが長い場合は、ページ内リンクが正しく飛ばない場合がある。lazyloadの影響。slack確認し、現状は解決方法ない為、フォームなどであれば、ファネルでステップをつけた方が良い！
- フォームの枠に太さをつけるには、タグ設定に記述する。色はフォーム設定から変更可能！
-
ボタンを追従させる魔法のコードです！
該当のCSSにそのまま入れてください！
position: fixed; bottom: 10px; left: 50%; transform: translatex(-50%); z-index: 10000
-
CTAボタンの上にカーソルを合わせた時に
「ボタンの背景色が変える方法」と「ポインターの種類」です！
＜ボタンの背景色が変える方法＞
.button:hover {
background-color: #59b1eb;
}
※カラー部分は色々と変更できます！
カーソルを合わせると背景色が変わります！
＜ポインターの種類＞
①指のカーソル
.button{
cursor: pointer;
}
②十字のカーソル
.button{
cursor: crosshair;
}
③テキストのカーソル
.button{
cursor: text;
}
-
コピーガードをつけることができる記述👾
<style>
img {
pointer-events: none;
}
</style>
-
画像の余白を消すコードです。
タグ設定のbodyに入れることで画像と画像の間の余白を消すことができます！
<style>
body .article-header-wrapper img {
vertical-align: top;
}</style>
-
行間を変えたい時は以下を該当のCSSに入れることで、変更できます！
{ line-height:指定したい行間の数値; }
例）HTML <h2> テキストテキスト </h2>
CSS h2{ line-height:指定したい行間の数値; }
-
1 年, 9 月前 島原夏音が変更
-
1 年, 9 月前
-
アンケートwidget等で次の画面がプレビューにない
CSSに入っている下記コードを消していただくとプレビューで見ることができます！
配信する際は元に戻すのをお忘れなく！
.is-hidden {
display: none;
}
-
見出しやテキストに注釈をつけたい時に便利なコード！
上付きの注釈
<sup>※注釈部分を入力</sup>下付きの注釈
<sub>※注釈部分を入力</sub>ぜひご活用ください😄
-
余白部分のつくるときはCSSにこの部分を追加してください！
「margin-top: ○○；」
「margin-bottom:○○；」
「margin-left:○○；」
「margin-right:○○；」
「margin:○○(上下) ○○（左右）；」
-
1 年, 8 月前 りさりさ CXが変更
-
1 年, 8 月前
-
widget内の一部に動きをつけたい場合
HTMLで該当の箇所にクラス名をつけてCSSに以下を追加すると指定した箇所が大小に動きます。
◯◯◯◯ {
animation: anime1 0.5s ease 0s infinite alternate;
transform-origin: center;
}<div>@keyframes anime1 {
from {
transform: scale(0.9, 0.9);
}
to {
transform: scale(1, 1);
}
}※◯◯◯◯の部分に、動きをつけたいclass名やid名を入れてください。
目立たせることができますよ〜💫
</div>
-
スマホの表示画面にも背景をつけたい場合は、
以下をタグ設定のJavascriptのheadに追加すると表示されます！
<style>
@media screen and (max-width: 919px) {
.article-body {
margin: 10px;
}
}
</style> -
カルーセルで表示される画像の枚数を増やす方法
以下の要素を増やすことで画像の枚数を増やすことが可能です
<div class="swiper-slide">
画像URL </div>-
1 年, 7 月前 ユーザーボイスが変更
-
1 年, 7 月前
-
箇条書きの点を消すCSSです
ul { list-style-type: none; }