HTMLのチェックボックスを使ってアコーディオン型UIを作る方法
Webページ内にクリックで開閉するアコーディオン型のUIを実装することも多いと思います。今回はinputタグのチェックボックスを利用する方法について、HTMLのチェックボックスを使ってアコーディオンができる仕組みを紹介し、実際に作成していく様子をステップごとに説明していきます。最後に実装例とそのコードを紹介しています。
HTMLとCSSだけで作るタブ型のUI
Webページなどでよく見られるタブ型のUIを作る方法について紹介します。 タブ型のUIもいろいろな実装の方法があると思いますが、この記事内ではHTMLとCSSだけを使って設置する場合の方法についてお話ししています。 HTMLとCSSによるタブ型UIの仕組みの紹介から作成の流れ、実装する際の記述例まで紹介しています。
CSSのGrid Layoutを使って簡単なレイアウトを組む
CSSのGrid Layoutを利用すると、シンプルなレイアウトから複雑なレイアウトまで色々なレイアウトを作成することができます。 この記事では、CSSのGrid Layoutについてなるべくわかりやすさを優先して、行と列がきれいに整列しているようなシンプルなレイアウトを作成する方法についてお話ししていきます。
Webページ内のテキストの表示文字数（行数）をCSSで制限する方法
CSSを利用し、webページ内のテキストを省略して表示を希望する分量に制限する方法について紹介します。 今回紹介するのは、CSSの-webkit-line-clampプロパティを利用してテキストの表示を希望する任意の行数に制限し、テキストがその行数に収まらない場合には省略して表示させる方法です。
HTML要素をCSSで中央寄せする３つの方法
今回はCSSのdisplay: grid;、display: flex;、position: absolute;の３つのプロパティを使ってHTML要素を中央に配置させる方法について紹介していきます。それぞれの方法ごとに画像を中央に配置する場合と、テキストを中央に配置する場合とについて例を挙げながら紹介していきます。
CSSのborderプロパティを使用して三角形、矢印などの図形を作成する方法
webサイトのページ内でよく使用する矢印や三角形などを、画像を読み込むのではなく、CSSを利用して設置したい場合もあると思います。 三角形、矢印、大なり記号、チェックマーク、吹き出し、ステップ表示をCSSのborderプロパティを利用して作成する時の記述例などを紹介します。
WordPressの投稿や固定ページにそのページ固有のCSSやJavaScriptを設置する方法
WordPressサイト内の個別の投稿ページや固定ページだけに適用させたい固有のCSSやJavaScriptを設置する方法について紹介します。今回紹介する方法は、WordPressのプラグインなどを使わずにfunctions.phpにコードを設置してカスタマイズする方法です。
画像を拡大してポップアップ表示できる”Lightbox2″の使い方
“Lightbox2″は、画像を拡大してモーダルダイアログにポップアップ表示させることができるJavaScriptライブラリです。今回は、この”Lightbox2″の使い方を紹介していきます。また、実際の動作やコードの例を確認していただけるサンプルページも用意していますので、そちらも見てみてください。
高機能なスライダーを設置できる”Swiper”(v11)の使い方
“Swiper”を利用することで、色々なエフェクトのついたスライダーを簡単に実装したり、ブレイクポイントを設定してレスポンシブなスライダー表示にも対応させることができます。 今回は現行のバージョンについて設置の方法から、設定方法、簡単なカスタマイズ例まで紹介していきます。