WebDesign

シンプルなリンクカード(ブログカード)のジェネレーターを作りましたので、使い方などについて紹介します。 シンプルなリンクカードジェネレーターは、リンクカードを作成したいページのURLを入力するとHTMLとCSSのコードを生成します。そのコードを貼り付けるだけでリンクカード(ブログカード)を設置することができます。

WordPress

WordPressで制作したサイトで、WordPressに元々含まれていない外部のCSSやJavaScriptのファイルを読み込ませて利用する際の方法として、推奨されているやり方について紹介していきたいと思います。CDN経由でのファイル読み込み方法とサイトに設置したファイルの読み込み方法についてそれぞれ紹介します。

WordPress

“Easy Table of Contents”を利用してサイドバーウィジェットにスクロール現在位置のカレント表示ができる目次を固定表示させる方法を紹介します。その目次をアレンジする際のCSSコード例も紹介しています。また、”Easy Table of Contents”の”Sticky TOC”についても紹介しています。

HTML/CSS

HTMLのdetailsタグとsummaryタグを利用してアコーディオン型のUIを作成する方法について紹介します。detailsタグとsummaryタグは比較的新しい要素なのでこれらのタグについての紹介から、これらの要素を使ってアコーディオンを作る方法、作成したアコーディオンをアレンジする方法まで紹介していきます。

HTML/CSS

HTMLとCSSだけを利用してツールチップを設置する方法について紹介していきます。 ツールチップ内に表示させる内容を取得する方法として、HTML要素を利用する場合と、CSSの attr() 関数を利用する場合の二通りの方法について紹介していきます。

HTML/CSS

Webページ内にクリックで開閉するアコーディオン型のUIを実装することも多いと思います。今回はinputタグのチェックボックスを利用する方法について、HTMLのチェックボックスを使ってアコーディオンができる仕組みを紹介し、実際に作成していく様子をステップごとに説明していきます。最後に実装例とそのコードを紹介しています。

HTML/CSS

Webページなどでよく見られるタブ型のUIを作る方法について紹介します。 タブ型のUIもいろいろな実装の方法があると思いますが、この記事内ではHTMLとCSSだけを使って設置する場合の方法についてお話ししています。 HTMLとCSSによるタブ型UIの仕組みの紹介から作成の流れ、実装する際の記述例まで紹介しています。

HTML/CSS

CSSのプロパティ”column-count”を利用して、縦方向に並んだリストなどの要素を希望の列数に整列させる方法について紹介していきます。

HTML/CSS

CSSを利用し、webページ内のテキストを省略して表示を希望する分量に制限する方法について紹介します。 今回紹介するのは、CSSの-webkit-line-clampプロパティを利用してテキストの表示を希望する任意の行数に制限し、テキストがその行数に収まらない場合には省略して表示させる方法です。

HTML/CSS

今回はCSSのdisplay: grid;、display: flex;、position: absolute;の3つのプロパティを使ってHTML要素を中央に配置させる方法について紹介していきます。それぞれの方法ごとに画像を中央に配置する場合と、テキストを中央に配置する場合とについて例を挙げながら紹介していきます。