サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

WEB

【CSS】height値を変えずに画像の縦横比を変える方法(aspect-ratio)

aspect-ratioについて

Webページには画像を配置することも多いですが、パソコンとスマートフォンで画像の縦横比を変えたい…という場合も多いですよね。
ですが、縦横比を計算してheightを指定するのも面倒です。

そこで、aspect-ratioを使ってheight値はautoのまま、画像の縦横比を変える方法をご紹介します。

【JavaScript】HTMLコードを要素の前後に挿入する(広告の挿入などに)

ブログ記事にアフィリエイト広告(HTMLコード)を掲載する場合、広告の内容や位置を簡単に変えられるようにしておくと便利ですよね。
JavaScriptを使ってコードを挿入すると、そういった管理がとても楽になります。

この記事ではHTMLコードを要素の前後に挿入する方法を紹介します。

【CSS】新しい擬似クラス:has( )の使い方と有効活用法

疑似クラス:has( )について

:has( )は2022年10月現在、ようやく主要なブラウザでのサポートが広まった新しい擬似クラスです。
特定の子要素を持つ親要素をセレクタ指定する際に便利なので、ぜひ基本的な使い方を押さえておきましょう。

【HTML】FAQをマークアップするタグは? −dl・dt・ddタグ−

*dl・dt・ddタグの使用例と注意点*

FAQ(よくあるご質問)のコーナーは、多くのWebサイトやランディングページで見かけますよね。

今回は、FAQをマークアップするのに適したdl・dt・ddタグについて紹介します。

【JavaScript】ボタンクリックでクリップボードにテキストをコピー

*ボタンクリックでテキストをクリップボードにコピー*

お店の住所など、テキスト情報をコピーしてどこか別の場所に貼り付けたいことってありますよね。
クリップボードへのコピーはJavaScriptで行うことができます。

本記事ではクリップボードへのコピー方法について解説しています。

【 CSS 】擬似クラス:notの使い方と有効活用

疑似クラス:notの基本と便利な使い方

CSS調整では『特定の要素だけ適用を除外させたい』という場合がしばしばあります。
そんな時に便利なのが、疑似クラス:notです。
この記事では:notの使い方と活用法についてご紹介します。

【HTML】figure要素の使い方 −説明付きの画像挿入−

*figure要素の使用例とポイント*

画像を挿入する際、imgタグを単独で配置しても良いのか、何か他のタグで囲んでマークアップすべきなのか、悩んだことはありませんか?

説明(タイトル)付きの画像はfigure要素でマークアップするのがオススメです。
この記事では、figure要素の基本的な使い方と注意点について解説していきます。

【JavaScript】スクロールで現れるトップへ戻るボタン

*スクロールで現れるトップへ戻るボタン*

画面がある程度スクロールされた…という検知はHTML/CSSではできず、JavaScriptでしか処理できません。

今回は、『ある程度スクロールされたことを検知するプログラム』を使って、スクロール量によって表示⇔非表示が切り替わるトップに戻るボタンを実装してみましょう!

【 CSS 】CSSだけで作るライトボックス(疑似クラス:target)

CSSの擬似クラス:targetを使ったライトボックス

ライトボックスは通常、JavaScriptを使って実装されることが多いかと思いますが、工夫次第でCSSだけでも実装可能です。

今回は、擬似クラスの一つである:targetを使って、ライトボックスを実装する方法をご紹介します。

【HTML】同じページ内のジャンプの設定方法【a要素】

*同一ページ内でジャンプさせる方法*

ページが縦長でスクロールが大変でも、ボタンクリックで飛びたい場所へ飛べるようにしておくだけで、ユーザーの利便性はグッと向上します。

同一ページ内のジャンプは、JavaScriptの力に頼らずともHTMLだけで実装可能です。
やり方も簡単なのでWeb制作者はもちろん、ブロガーなども覚えておきたいテクニックです。