HTML – ページ 5 – コピペしちゃいなよ

カテゴリ：HTML

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

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

ある程度コンテンツが見えたら、フェードインして表示させたい。しかしそれだとCSSだけで実装できないし、JavaScriptはわからない。そんな場合「Animate It!」と言うワードプレスプラグインがおすすめです。 […]

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

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なのでその半分を調整させます。 […]