HTML/CSS– category –
-
【CSS】擬似クラス:link、:visited、:hover、:focus、:activeの使い方
本記事では、CSSの擬似クラス:link、:visited、:hover、:focus、:activeの使い方についてまとめています。 :linkの使い方 :linkの擬似クラスは、リンクのデフォルト状態(未訪問)のスタイルを指定します。 a:link{ color:red; } See the Pen :linkの使い方 ... -
【CSS】nth-childとnth-of-typeの違い
本記事では、CSSのnth-childとnth-of-typeの違いについてサンプルコードを用いて分かりやすく解説しています。 nth-childとnth-of-typeは何が違うの？ nth-childとnth-of-typeはn番目の要素に対してのみスタイルを適用させたい時に使われる擬似クラスです... -
【HTML】<や>をそのまま表示させる方法
ブログなどで「<」や「>」をそのまま貼り付けて表示させると「<」「>」のように変換されて表示されてしまいます。 こちらの記事では、<や>などの実体参照をテキストとして表示させる方法について解説しています。 &... -
【CSS】font-sizeで10px未満よりも小さくする方法
本記事では、font-sizeの下限値である10pxよりも小さいサイズを適用させる方法について解説しています。 font-sizeには下限値がある Google Chromeではfont-sizeの下限値が10pxと設定されています。そのため、font-size:5pxと設定しても下限値である10pxに... -
【CSS】position:stickyをIEでも使えるようにする方法
先輩！今日は何を教えてくれるんですか？ 今日は、CSSのposition:stickyをIE(Internet Explorer)でも使えるようにする方法を教えるよ！ よろしくお願いします！ position:stickyはIEに非対応 下記のテーブル表にposition:stickyの互換性についてブラウザ別... -
YouTubeの関連動画を非表示にする方法
埋め込んだYouTube動画デフォルト設定のままだと再生が終了した時に関連動画が表示されるようになっています。 こちらの記事では、埋め込んだYouTube動画の再生が終了した時に表示される関連動画を非表示にする方法について分かりやすくまとめています。 Y... -
【レスポンシブ対応】YouTube動画を埋め込む方法
Youtube動画をサイトに埋め込みスマホとパソコンで見た時に見え方が異なったり、表示崩れが起きてしまったことがあるという人は多いのではないでしょうか。 こちらの記事では、Youtube動画をレスポンシブ対応で埋め込む方法について解説しています。 サン... -
CodePenで画像を使う方法を画像付きで分かりやすく解説
CodePenはプレビューが即時反映されることに加えWordPressにソースコードを簡単に載せることができる便利なエディタですが、画像を使う場面に遭遇した時にどのように画像を読み込ませるか分からない方が多いと思われます。 こちらの記事では、CodePenで画... -
【HTML】SMS(ショートメッセージ)を送信する方法
こちらの記事ではHTMLでSMS(ショートメッセージ)を送信する方法について解説しています。 SMSにメッセージを送信する設定となると複雑なことをするかもしれないと思うかもしれませんが、普段使用しているaタグに少し記述を加えることで簡単に設定すること... -
【HTML】電話番号をクリックで電話を発信させる方法
こちらの記事では、電話番号をクリックで電話を発信させる方法についてサンプルコード付きで分かりやすくまとめています。 CSSやJavaScript(jQuery含み)などを使ったスマホのみ電話発信させる方法など、応用テクニックも紹介してるのでぜひ参考にしてくだ...
