CSS – ページ 3 – コピペしちゃいなよ

カテゴリ：CSS

Splideという日本産のライブラリがあるようなのでこちらを使ってスライダーを実装したいと思います jQueryを使わないという点が私は気に入っております。参考サイト：https://ja.splidejs.com/ […]

どうもうちのアフィンガーちゃんトップページのmainがおかしいもよう… ちゃんと直すべきだが原因がわからないので、トップのmainだけpaddingを0にして応急処置を施したいどうやら先頭に[.home]を付ければよい […]

文字を一文字ずつフェードインさせる処理の改良版になります。一応自作ですので不具合等あるかも知れません。 JavaScriptを使って表現しております。またテキストが見え始めたら処理するようにもしております。言葉ではわ […]

文字を一文字ずつフェードインさせる処理です一応自作ですので不具合等あるかも知れません。参考サイトも見つけましたのでそちらの方がよいかも知れません。 JavaScriptを使って表現しております。またテキストが見え始めた […]

「続きを読む」を押すと下にサッと文字が出てくる処理の実装です。 JavaScriptを使って実装させております。文章はChatGPTに頼んだ… JavaScriptの[offset_height]は「details-b […]

画像の左端にリボンを付けておしゃかわにしましょう Cat 参考サイト：https://adatype.co.jp/info/archives/staff_blog/24

例えば商品一覧など横並びに4つ並べて表示させたい場合しかし用意された画像が全部バラバラで統一してくれないそんな場合の処理になります。 imgタグのクラスに「img-fit」を追加して対応しております。 object- […]

サイト作成していると横向きで見られたくない(対応が面倒)な時があります。横向きになった場合に、ウィンドウを出して「横向き対応してません」と表示して見せないようにします。本ページでは実際に横向きにした場合に、警告画面が […]

CSSにてフォントサイズを修正する時に一括で変えたい時があると思います。 CSS変数（カスタムプロパティ）というのがあるのでそれを使います参考サイト：https://qiita.com/taqumo/items/b22 […]

absoluteで上下中央表示する。いつも調べてコピペしてるのでこちらでも記録しておくことにする参考サイト：https://qiita.com/ushi_osushi/items/d9f0c8990b2e807969 […]

PCだけスマホだけ表示させたい場合があります。 iPad min未満をスマホ表示として表示させたいという感じで処理を書いてます参考サイト：https://csshtml.work/sp-display-none/

アフィンガー6のヘッダーコンテンツに動画を入れたい場合の覚え書き。どうやらEX版では簡単に実装できるようですが、EX版は持ってないのでPHPとCSSをいじることで実装します。 PCとスマホ対応のみしてます。

要素間を線でつなげるライブラリになります。お仕事で使うことがあったので忘れないように記載参考サイト：https://anseki.github.io/leader-line/

画像を横に無限ループさせる処理をJavaScriptで実装します。自作なので色々と不具合等あると思います。 [animation]を使わないのはなぜかと言うと、画像が表示されない（存在はしてる）状態があったからになりま […]

横幅と連動して文字のサイズを変更するように調整します。条件として各フォントサイズの指定は「REM」で指定することが必須になります。また、文字が大きくなりすぎないように、小さくなりすぎないように、「clamp」を使うこ […]

[st-minihukidashi webicon=”” fontsize=”80″ fontweight=”” bgcolor=”#F […]

[canvas]要素の上にHTML記載で画像や文字を入れたい場合の処理です。[position: absolute;]で可能です。今回は「パーリンノイズ」というものを[canvas]に表示させ、その上に画像と文字を2カ […]

要素内に横幅いっぱいに表示要素を超えて横幅いっぱいに表示基本的にこれでいけるはずですが、できてませんね。サイドコンテンツが邪魔をしてる場合があります。サイドコンテンツの幅が300pxなのでその半分を調整させます。 […]