2024年6月– date –

画像の縦横比を指定して、どのような縦横比の画像が設定されても、指定した縦横比にしたい時がある。 例として上記のような縦長の画像を縦横の長さが同じ正方形の画像として表示したい場合aspect-ratioを使用する。aspect-ratio：横の長さ/ 縦の長さを指定...

画像によっては、1枚の画像でＰＣでの表示とスマホでの表示を両方ともいい感じで表示するのが難しい場合がある。その時にＰＣ版とスマホ版で画像を切り替える必要がある。すぐに思いつくのはその２つの画像にクラスつけて、CSSでdisplay:none と　display:...

一定速度で横に流れ続ける無限ループスライドについて記述します特徴としては、以下のようなことです１）一定速度で横に流れる２）一枚ずつでなく連続的に動くそれでは、具体的に記述していきます。表示例は以下の通りです １）HTML <div class = "...

WEBサイト上では画像が自動的にスライドしているコンテンツをよく見かける。実際の処理しては、JavaScriptのプラグインである、SwiperやSlickなど使用する場合がほとんどであるちなみに私はスライドの実装でSwiperしか使用したことが無いがSwiperのメリッ...

スクロールする出てきて、クリックするとページのトップに戻る「トップへ戻る」ボタンの記述ですまず、ボタンのデザインは以下の通りです。 それでは、HTML,CSS,JS を記述してみましょう １）HTML上矢印のアイコンをfontawesomeからとるため、fontawesome...