質問: 文字がグラデーションしている表現Webページで文字がグラデーションして表示されているものがあります。どうやって実現するのでしょうか？テキスト選択できましたので、SVG画像ではなくテキストだと思います。実現方法文字をグラデーションで
質問: 改行させない設定div枠などのブロック要素の枠幅で内部のテキストは通常は改行されますが、これを改行させないようにするCSSの設定はありますか？改行しない表示CSSでテキストを改行させない設定にする場合は white-space:
質問: 画像の下側をトリミングしたい画像をWebページに表示していますが、縦長の画像のため、下側をトリミングして、画像の上部分だけを表示したいです。画像を加工せずにCSSのみで対応できますか？CSSで画像をトリミングするコードを紹介します
質問: スマホで表示した場合に枠の順番を入れ替えたいPCの場合は、Frame1のdiv枠を Frame2 のdiv枠より上に表示したいですが、スマートフォンの場合は、Frame1 を Frame2 の下に表示したいです。Frame1を2つ
質問: 折りたたみのできる枠で最初の部分だけ見せたい折りたたみのできる枠(アコーディオンパネル)を実装したいのですが、閉じた状態でも最初の10行ぐらいは見えるようにしたいです。どのようなコードで実装するのが良いでしょうか？はじめにこちらの
質問: 枠の下が白くなるやつの作り方HTMLページ内の枠で、枠の下がだんだん白くなって、フェードアウトしているような表示があるのですが、あれはどういうコードを書くのでしょう？枠の下部がフェードアウトした表示の枠を作成するコードと実行結果を
グリッドレイアウトで内部の枠の幅を比率で指定するコードを紹介します。概要グリッドレイアウトで2段組みや3段組みの枠を作成したい場合があり、それぞれの枠を全体の枠の幅の比率で指定したい場合があります。グリッドレイアウトで内部の枠の幅を比率で指
グリッドレイアウトでグリッドを枠の幅に応じて折り返すコードを紹介します。概要グリッドレイアウトでグリッドを枠の幅に応じて折り返す場合には、grid-template-columns プロパティに repeat を設定します。書式grid-t
CSSを利用して縦に長いテーブルでテーブルの見出しがスクロールアウトしないようにするコードを紹介します。概要縦に長いテーブルでは、スクロールすると、テーブルの見出しの行がスクロールアウトしてしまい、列の意味がわかりにくくなることがあります。
column-count を利用した段組みで、途中で次の列に分割表示されないようにするコードを紹介します。概要column-count を利用して段組みされた表示ができますが、枠の途中で次の列に分割されて表示されてしまう場合があります。この
column-count を利用して段組み表示をするコードを紹介します。概要ページを段組み表示する方法には、floatを利用する方法やFlexBoxを利用する方法、Grid Layoutを利用する方法がありますが、column-countを
HTMLページに縁取り文字を表示するコードを紹介します。概要HTMLのページ内に縁取りされた文字を表示したいことがあります。この記事では、縁取りされた文字を表示するコードを紹介します。text-shadow プロパティを利用する方法text
CSSの記述で画像のURLを変数で記述するコードを紹介します。概要CSS内で画像のURLを url('(urlまたはuri)') の形式で記述してCSSで画像を指定することがあります。CSSのサイズが小さい場合は問題ないですが、CSSのサイ
content プロパティに画像を設定するコードと実行結果を紹介します。概要こちらの記事では、contentプロパティを利用して要素の前後に文字を挿入するコードを紹介しました。状況によっては、contentプロパティに文字ではなく画像を表示
一定量スクロールしても背景が変化しないページをCSSで作成するコードを紹介します。概要スクロールしても一定の間は背景が変化せず、さらにスクロールすると別の背景がスクロールインするページ表現をCSSを利用して表現します。実装方針こちらの記事で
スクロールするとセクションごとに背景画像が変化するページを作成します。概要ページをスクロールすると背景が固定して表示され、スクロールするとセクションごとに背景が変化する表現をCSSを利用して実装します。書式CSSの background-a
ページをスクロールしても画像はスクロールしない枠をCSSで作成するコードを紹介します。概要ページをスクロールしても画像は固定されてスクロールしない表現をCSSを利用して実装します。背景に配置された画像を枠でマスクして表示する動作イメージにな
CSSで緩い円弧の枠を作成するコードと表示結果を紹介します。概要こちらの記事では、CSSで角丸の枠を表現するコードを紹介しました。角丸の半径を大きくすることで、円弧を持つ枠を作成することができます。この記事では、さらに、緩い円弧を持つ枠をC
CSS Scroll Driven Animaion を利用して要素ごとにスクロール速度を変化させ、視差効果を実装するコードを紹介します。概要Webページで縦にスクロールをすると、スクロール通常のスクロールより速い速度でスクロールする要素が
CSS Scroll Driven Animaion でスクロールに応じて右からスライドインするアニメーションを作成するコードを紹介します。概要Webページで縦にスクロールをすると、スクロール量に応じて画像がスライドインするページがあります
Flexboxでalign-itemsがstretchの枠で内部のコンテンツの縦方向の配置を変更するコードを紹介します。概要Flexboxでalign-itemsがstretchに設定されている場合、枠の高さは、一番枠の高さの高い枠に揃えら
CSSのcalc関数を利用して枠をページ中央に配置するコードを紹介します。概要枠をページの中央に配置する方法はいくつかありますが、この記事ではcalc関数を利用してページの中央に枠を配置する方法を紹介します。実装例コード以下のHTML,CS
font-styleプロパティを設定してもマルチバイト文字 (日本語文字) が斜体で表示されない現象と対処法の紹介です。現象の確認font-styleプロパティを設定してもマルチバイト文字 (日本語文字) が斜体で表示されない場合があります
CSSを利用して、HTMLページの文字の太さを変更するコードと実行結果を紹介します。概要フォントのウェイトを変更して、テキスト文字を太字・ボールドにする、または細字にする場合にはfont-weightプロパティを設定します。font-wei
CSSでリンクにマウスポインタが重なった際にリンクのスタイルを変更するコードを紹介します。実現方法CSSのhover疑似クラスを利用します。書式以下の書式を利用します。A:hover{ (マウスポインタがハイパーリンクに重なった際のスタイ
後続兄弟結合子 / 後方セレクターの紹介です。概要指定したタグやクラスの後ろに配置したタグやクラスのスタイルを指定する場合に、後続兄弟結合子 / 後方セレクターを利用できます。書式(セレクター1) ~ (セレクター2) { [スタイル]}(
HTMLページで枠からコンテンツがあふれる場合にスクロールバーを表示する設定を紹介します。概要HTMLページの枠からコンテンツがはみ出す場合にスクロールバーを表示したい場合があります。CSSのoverflow, overflow-x, ov
CSSで枠の背景に画像を表示するコードを紹介します。概要枠の背景に画像を表示したい場合があります。background-imageプロパティを利用すると、枠の背景に画像を表示できます。書式background-image: url([画像の
CSSで改行方法を変更する方法を紹介します。概要CSSで改行方法を変更する方法として、word-break プロパティを設定する方法とoverflow-wrap プロパティを設定する方法があります。この記事では、word-break プロパ
text-align:rightでdiv枠内のimgタグの画像が左に寄せられる現象と対処法を紹介します。概要枠のCSS設定でtext-align:rightを設定すると右寄せの表示になりますが、div枠内に配置したimgタグの画像が左寄せに
CSSで半透明にすると内部のコンテンツ枠も透明になってしまう現象と対処法を紹介します。概要CSSでモーダルのダイアログを作成した際など内部のコンテンツのレイヤーも半透明になってしまう場合があります。この記事では、コンテンツの枠が半透明になっ
CSSを利用して、Webページでスクロールできないようにする方法を紹介します。概要こちらの記事では、CSS Positionプロパティを利用して。スクロールできないようにする方法を紹介しました。多くの場合では紹介した方法で問題ない場合もあり
RadioButton を利用して、画像を選択するUIを作成するコードを紹介します。概要HTMLページで画像を選択するUIを作成する場合にRadioButtonを利用すると、比較的容易に選択画面のUIを作成できます。この記事では、Radio
ページ内リンクでスムーズにスクロールするコードを紹介します。概要こちらの記事ではJavaScriptでページ内のリンクでスムーズにスクロールするコードを紹介しました。新しいバージョンのWebブラウザ(Chromeでは2017年以降)ではJa
HTMLページでサイドバーの幅をドラッグで変更できるようにするコードを紹介します。概要2段組みのHTMLページでサイドバーの幅をドラッグで変更できるようにしたい場合があります。WindowsアプリケーションではSplitterコントロールを
HTML / CSS で定義されているカラーコード、カラーネームの一覧を紹介します。標準色 (アルファベット順)カラーネーム カラーコード(HEX) カラー aqua#00FFFF black#000000 blue#0000FF fuc
