HTML/CSS– category –

本記事では、CSSの擬似クラス:link、:visited、:hover、:focus、:activeの使い方についてまとめています。 【:linkの使い方】 :linkの擬似クラスは、リンクのデフォルト状態(未訪問)のスタイルを指定します。 a:link{ color:red; } See the Pen :linkの使...

本記事では、CSSのnth-childとnth-of-typeの違いについてサンプルコードを用いて分かりやすく解説しています。 【nth-childとnth-of-typeは何が違うの？】 nth-childとnth-of-typeはn番目の要素に対してのみスタイルを適用させたい時に使われる擬似クラス...

ブログなどで「&lt;」や「&gt;」をそのまま貼り付けて表示させると「<」「>」のように変換されて表示されてしまいます。 こちらの記事では、&lt;や&gt;などの実体参照をテキストとして表示させる方法について解説しています。 【&am...

本記事では、font-sizeの下限値である10pxよりも小さいサイズを適用させる方法について解説しています。 【font-sizeには下限値がある】 Google Chromeではfont-sizeの下限値が10pxと設定されています。そのため、font-size:5pxと設定しても下限値である10...

先輩！今日は何を教えてくれるんですか？ 今日は、CSSのposition:stickyをIE(Internet Explorer)でも使えるようにする方法を教えるよ！ よろしくお願いします！ 【position:stickyはIEに非対応】 下記のテーブル表にposition:stickyの互換性についてブラウ...

埋め込んだYouTube動画デフォルト設定のままだと再生が終了した時に関連動画が表示されるようになっています。 こちらの記事では、埋め込んだYouTube動画の再生が終了した時に表示される関連動画を非表示にする方法について分かりやすくまとめています。 ...

Youtube動画をサイトに埋め込みスマホとパソコンで見た時に見え方が異なったり、表示崩れが起きてしまったことがあるという人は多いのではないでしょうか。 こちらの記事では、Youtube動画をレスポンシブ対応で埋め込む方法について解説しています。 【サ...

CodePenはプレビューが即時反映されることに加えWordPressにソースコードを簡単に載せることができる便利なエディタですが、画像を使う場面に遭遇した時にどのように画像を読み込ませるか分からない方が多いと思われます。 こちらの記事では、CodePenで画...

こちらの記事ではHTMLでSMS(ショートメッセージ)を送信する方法について解説しています。 SMSにメッセージを送信する設定となると複雑なことをするかもしれないと思うかもしれませんが、普段使用しているaタグに少し記述を加えることで簡単に設定すること...

こちらの記事では、電話番号をクリックで電話を発信させる方法についてサンプルコード付きで分かりやすくまとめています。 CSSやJavaScript(jQuery含み)などを使ったスマホのみ電話発信させる方法など、応用テクニックも紹介してるのでぜひ参考にしてくだ...