CSS CSS動きシリーズ
カードの動き ボタン動き
CSS
CSS CSS radial-gradient（円形グラデーション）
円形グラデーションを指定して、テキストに強調点をつけた際にブラウザではきちんと反映されるのに、スマホだとclorm、safariどちらも全く反応しなかった件について。 当初は以下の指定を参考にさせてもらった。綺麗に完成していたのだが、スマホ...
CSS tableのscrollについて
overfrow-x:scroll; がどうにもこうにも効かなかったのだが、、、どうやらdivが今回は関与していたらしく、、、当初、divをつけずにp-table__wrapにoverfrowをかけ、p-table__bodyにwhite-...
CSS 擬似クラス指定
擬似クラスで特定の兄弟に別の指定をする。 以下はmarginを２、４、５番目のliに対して消したかった。子要素の(even)＝偶数last-child＝最後の子(5) .p-please__list:nth-child(even),:las...
CSS メディアクエリ
メディアクエリの記述方法結構忘れがち。。。というかいつも確認させてもらっております。。。 @media screen and (min-width:480px) { ...} /* 画面サイズが480pxからはここを読み込む */ @med...
CSS Swiper
slickよりjQに依存しない分良いという説。。 ただしカスタマイズするならどちらにしても少し手間だったが、、、デメリットは公式が英語表記だという点らしい。が！ブログもたくさんあるので大丈夫だとか。。。 以下はとーっても参考になるけど、バー...
CSS 色々な見出しCSS
ボーダーや万歳、色々あるね！
CSS 要素をposition:absoluteで中央に配置
上下左右中央 p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, ...
CSS CSSテキスト強調丸点
h3 { font-size: 32px; letter-spacing: 10px; line-height: 2; font-weight: bold; } .dot-text { padding-top: .4em; backgrou...
CSS CSSを使って縁取り文字
text-strokeのコード <div class="fuchidori>縁取り</div> .fuchidori { color: #000; -webkit-text-stroke: 1px #FFF; text-stroke: 1p...