トップ
サービス
事例
コラム
会社概要
お問い合わせ
トップ
サービス
事例
コラム
会社概要
お問い合わせ
Column
コラム
TOP
コラム一覧
HTML・CSSの一覧
カテゴリーから探す
EC
HTML・CSS
Podio
TEGARU
Tips
Trends
WordPress
イベント
事例
集客方法
アーカイブから探す
2025年
2024年
2023年
2022年
2021年
2015年
2025.01.31
HTML・CSS
明奈
空の要素に指定できる:emptyとは?
:emptyとは? :emptyはCSSの疑似クラスで、要素の中身が何もない場合に適用できます。 :emptyの指定方法 要素:empty {プロパティ: 値;} :emptyの応用例 ① リストの空白要素を非表示にすることができる 以下の[Run Pen]を押して確認してみてください。 See the Pen Untitled by 林 (@hayashi-ak
READ MORE
2025.01.28
HTML・CSS
明奈
今あるWebサイトを改善する⑩|CSSで長いURLのはみ出しを防ぐ!簡単な折り返し設定方法
この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 Webサイトを運営していると、長いURLやテキストリンクが原因でデザインが崩れてしまうことがあります。特に、長いリンクが画面の幅を超えてしまうと、サイドバーが画面外に流れたり、レイアウト全体が崩れたりして、スクロールバーが表示される
今あるWebサイトを改善する
READ MORE
2024.10.31
HTML・CSS
明奈
:nth-child() の “of S” 構文で、細かく要素を指定する方法②
前回の「:nth-child() の "of S" 構文で、細かく要素を指定する方法①」では、:nth-child() の "of S" 構文とは何かを紹介しました。続いての今回は、実際にどのような表示になるか試してみます。 例①:リストの中のリンゴ(appleのクラス名がついている箇所)の三番目の要素にだけ色をつけたい場合 下記の[Run Pen]を押下して確認してみてください。
READ MORE
HTML・CSS
明奈
:nth-child() の “of S” 構文で、細かく要素を指定する方法①
今回は、:nth-child() や :nth-of-type() より細かい指定ができる:nth-child() の "of S" 構文を使う方法を紹介します。 :nth-child()とは まずは、:nth-child() の "of S" 構文の前に、:nth-child() は何かを簡単に説明します。 :nth-child(An+B)はCSSの擬似クラスで、特定の要素が親要素内で
READ MORE
2024.10.30
HTML・CSS
明奈
今あるWebサイトを改善する⑨|PC向けデザインのWebサイトをスマホ対応にする方法
この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 今回は、PC向けデザインのWebサイトをCSSのメディアクエリ(@media)を使ってスマホ対応にする方法を紹介します。 スマホ対応は、なぜ必要? PC向けのWebサイトをスマホで見ると、レイアウトがそのまま縮小されてスマートフ
今あるWebサイトを改善する
READ MORE
2024.10.22
HTML・CSS
明奈
今あるWebサイトを改善する⑧|画像を設定する方法(Web担当者向け)
この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 ブログやWebサイトに画像を追加することは、視覚的な魅力や情報伝達の効率を高め、ユーザーの離脱防止につなげることができます。 そこで今回は、Webサイトに画像が必要な理由と、画像を簡単に設定する方法を紹介します。 なぜWeb
今あるWebサイトを改善する
READ MORE
HTML・CSS
明奈
画像の「絶対パス」と「相対パス」とは?
今回は、Webサイトで画像を表示する際に使われる「絶対パス」と「相対パス」について簡単に解説します。 「絶対パス」と「相対パス」の「パス」とは? 「パス」とは、HTMLで画像ファイルを表示する際に、その画像がどこに保存されているかを指定するための「道筋」のことです。画像ファイルが存在する場所(ディレクトリ)を指し示すことで、ブラウザーがその画像を正しく読み込み、Webサイト上に表示できるように
READ MORE
2024.10.18
HTML・CSS
明奈
今あるWebサイトを改善する⑦|背景色を変更する方法(Web担当者向け)
この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 Webデザインの背景色は、ページ全体の雰囲気を左右する重要な要素です。また、文字の可読性にも影響を与えます。 そこで今回は、背景色を選ぶ際のポイントと変更方法をお伝えします! 背景色を選ぶ際のポイント ①サイトの目的やター
今あるWebサイトを改善する
READ MORE
2024.10.03
HTML・CSS
明奈
今あるWebサイトを改善する⑥|文字サイズを変更する方法(Web担当者向け)
この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 Webデザインにおいて、文字サイズの調整はとても大切です。色やデザインにこだわっていても、文字サイズが適切ではないと、ユーザーに内容が伝わりづらくなります。 そこで今回は、文字サイズを設定するとどんな効果があるのか、また、簡単
今あるWebサイトを改善する
READ MORE
2024.09.06
HTML・CSS
明奈
横スクロールのあるコンテンツにヒントを表示する「ScrollHint」の設定方法
ScrollHintとは? 「ScrollHint」は、横スクロール可能な場合にヒントを表示するJavaScriptライブラリです。 設定すると、コンテンツに横スクロール可能であることがわかるアイコンとテキストが以下のように表示されます。 設定方法 公式サイトへアクセスし、「Download」→「scroll-hint-master.zip」をダウンロードする。
READ MORE
1
2
…
7
>