Webサイトを運用していると、 「色を変えたいだけなのに、CSSを何十箇所も直さないといけない…」 「どこで指定しているのか分からず、修正に時間がかかる…」 こんな経験はありませんか？ そんな“CSSあるある”を一気に解 […]

前回、下記の内容を紹介しました！ もうSassはいらない？CSSネストで快適にスタイルを書く 今回は、実際にCSSネストを使ってみて感じたメリットとデメリットを改めてまとめてみます。 CSSネストのメリット ①コードの構 […]

Webサイトを作るときに欠かせないCSS。 コードが長くなると、「どのスタイルがどの要素に対応しているのか分かりにくい…」と感じたことはありませんか？ そんなときに役立つのが CSSネスト です。Sassのようなツールを […]

WebサイトのSEO対策と聞くと、キーワードや内部リンクが思い浮かぶかもしれません。でも実は、「正しいレイアウト構成」もとても大事なのです。検索エンジンがスムーズに内容を理解でき、なおかつユーザーがストレスなく読める構造 […]

:emptyとは？ :emptyはCSSの疑似クラスで、要素の中身が何もない場合に適用できます。 :emptyの指定方法 要素:empty {プロパティ: 値;} :emptyの応用例 ① リストの空白要素を非表示にする […]

この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 Webサイトを運営していると、長いURLやテキストリンクが […]

前回の「:nth-child() の “of S” 構文で、細かく要素を指定する方法①」では、:nth-child() の “of S” 構文とは何かを紹介しました。続いて […]

今回は、:nth-child() や :nth-of-type() より細かい指定ができる:nth-child() の “of S” 構文を使う方法を紹介します。 :nth-child()とは ま […]

この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 今回は、PC向けデザインのWebサイトをCSSのメディアク […]

この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 ブログやWebサイトに画像を追加することは、視覚的な魅力や […]

今回は、Webサイトで画像を表示する際に使われる「絶対パス」と「相対パス」について簡単に解説します。 「絶対パス」と「相対パス」の「パス」とは？ 「パス」とは、HTMLで画像ファイルを表示する際に、その画像がどこに保存さ […]

この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 Webデザインの背景色は、ページ全体の雰囲気を左右する重要 […]

この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 Webデザインにおいて、文字サイズの調整はとても大切です。 […]

ScrollHintとは？ 「ScrollHint」は、横スクロール可能な場合にヒントを表示するJavaScriptライブラリです。 設定すると、コンテンツに横スクロール可能であることがわかるアイコンとテキストが以下のよ […]

この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 Webデザインでは、ページの見やすさや使いやすさを良くする […]

この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 文字の固定はなぜ必要？ Webサイトの文字や要素を固定する […]

この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 タップで電話をかけられることが求められる理由 スマートフォ […]

この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 Webサイトを管理・運営には、ユーザーエクスペリエンス（U […]

この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 CSSでボタンの色を変更するコードのサンプル まずは、CS […]

今回は、全ブラウザ実装可能になった Popover APIのpopover属性、popovertarget属性、popovertargetaction属性でモーダルウィンドウを作成する方法を紹介します。 Popover […]

今回は、CSSのoutlineプロパティとoutline-offsetプロパティを使用して、要素の内側に線をいれる方法を紹介します。 outlineとは 要素の外側に輪郭線を表示させる＝「borderより外側にくる輪郭線 […]

今回は、リンクテキストや画像（インライン要素）が垂直方向に動かない場合（vertical-alignが効かない時）に試してほしいことを紹介します。 vertical-alignとは インライン要素、テーブルセルに垂直方向 […]

今回はWordPressサイトで画像をアップロードできない、またはサイトにエラー表示が出た際に解消する方法を紹介します。 開発中の場合はエラー表示はあったほうがいいので、この方法は、本番環境など急ぎでエラーを解消したい場 […]

2023年12月に新しくリリースしたFirefox 121が、ついに:has()擬似クラス利用可能となりました。 これですべての主要なWebブラウザでの使用が可能となったため、今後使える場面が増える:has()擬似クラス […]

今回はCSSの@font-faceを使用してインストールしたフォントをWebフォントとして表示させる方法を紹介します。 @font-faceとは @規則と呼ばれるものの1つであり、外部のWebフォントを読み込んだり、ロー […]

今回は、CSSの［background-clip］を使用して、下記のように背景画像をテキストの形に切り抜く方法を紹介します。 設定方法 設定は簡単です。切り抜く箇所に、背景画像と［ background-image］とテ […]

今回は、グリッドレイアウトの新機能サブグリッドを紹介します！ グリッドレイアウトとは 要素を格子状（グリッド）に配置するレイアウト手法です。flexboxと同じで、親要素と子要素が必要。 親要素にdisplay: gri […]

以前の記事で、「SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法」を紹介しました。 SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法 今 […]

jQueryのページを読み込み後の処理が効かない場合は、以下のステップを試してみることをお勧めします。 例 $(window).load(function() { // 処理 }); こちらの記述がきかない場合は、jQu […]

imgタグで画像を設定する際、画像の下に余白ができる場合があります。 今回は、その余白を消す方法を紹介します。 なぜ余白ができる？ img要素に対して余白ができる原因は、画像を含むインライン要素にvertical-ali […]

前回は、XAMPPのMySQLがスタートができない際の、エラー解消手順を紹介しました。 今回は、MySQLはスタートしているのにもかかわらず、phpMyAdminに入れずエラーが出る場合に試してほしいことを紹介します。 […]

iOSでinput, textareaを入力時にズームインしてしまう問題を解決する方法を紹介します。 設定は簡単です。 input,textarea { font-size: 16px; } 上記は16px以上で、ズーム […]

画像の下にキャプション（テキスト）を入れる場合、下記のようにキャプションの幅が画像よりはみ出して表示されてしまうことがあります。 今回は、HTMLの<figure>タグと<figcaption>タ […]

開発には欠かせないソフトウェアを、簡単かつ無料で一気にインストールすることができるXAMPPですが、エラーが出て思うようにいかないことがあります。 今回は、その中でMySQLがスタートできない際に試していただきたい点を紹 […]

レスポンシブ対応としてよくメディアクエリが使用されますが、コンテナクエリを利用することで、メディアクエリよりも柔軟なレイアウトが可能となります。 コンテナクエリは、今年（2023年）2月に全ブラウザ対応になりました。 コ […]

これまで2回にわたり、CSSでのdata属性の使用方法を紹介しました。気になる方は以下の記事もご覧ください。 deta属性の使用方法①［タイトルに仮名を付ける方法］ deta属性の使用方法②［ラベルを作成し、文言や色を指 […]

今回は、Shopifyで使用しているテーマのバージョンが不明な際に確認する方法を紹介します。 テーマ確認方法 ①Shopifyにログイン → 管理画面のオンラインストアをクリック ②下記、赤枠の箇所が現在のテーマのバージ […]

前回は、data属性をしようしてタイトルに仮名をつける方法を紹介しました。data属性のルール指定方法は前回の記事に書いてあるので気になる方はご覧ください。 今回は、以下のようにラベルを作成し、文言や色を指定する方法を紹 […]

deta属性とは deta属性は、タグに対して指定できる属性です。 deta属性の指定は簡単です。任意のHTMLタグにdata-○○を指定します。○○の箇所は以下ルールを守れば自由に指定できます。 要素[data-任意の […]

今回は、<input type=”number”>を設定した際、下記のように矢印がデフォルトで出るので、削除する方法をお伝えします。 設定は以下です。 Chrome、Safariの場合 […]

コーディング後にスマホでチェックをすると表示が横や縦に動いてしまう現象があり、大体はbodyからはみ出した要素が原因だったりします。 今回は、そのはみ出した要素を簡単に探す方法を紹介します。 方法は簡単です。全称セレクタ […]

要素をhoverしたときに、色が変わるリンクなどがあります。これをスマートフォンなどのタッチデバイスで実行すると、「タップ後に違う要素がタップされるまでそのスタイルが反映され続ける」など、意図しない動きになってしまうこと […]

これまで3回にわたり、position: stickyでどんなことができるかを紹介しました。 CSS｜ヘッダー固定やフッター固定も簡単！パララックス風もできるposition: stickyとは？① CSS｜ヘッダー固定 […]

iOSでの送信ボタンのデザインを変更して実機で確認した際、デザインが指定したとおりに表示されません。 これは、ブラウザーが表示を整える機能がデフォルトであるためです。 機能を無効にする場合は、以下のCSSを追加してくださ […]

AndoroidのChromeやiOSのSafariには自動拡大機能があり、テキストが読みにくいと判断されると自動で大きいフォントサイズで表示されます。 今回は、その機能を無効化する方法を紹介します。 設定は簡単です。 […]

前回position: stickyでパララックス風の動きを実装しました。今回はヘッダーやフッターを固定する方法をお伝えします。 初めにposition: stickyがどんな動きをするか知りたい方はこちらの記事もご覧く […]

前回、CSSのposition: stickyの紹介をしました。今回は、CSSのposition: stickyを使用してパララックス風の動きを再現してみたいと思います！ まずはデモをご覧ください。 指定は簡単です。親要 […]

今回は、CSSのposition: stickyを覚えればさまざまな場面で使えそうなので紹介します。 position: stickyとは stickyとは「粘着性がある」という意味があり、指定した要素を（ヘッダやナビゲ […]

今回は、transitionプロパティを使用して、要素をhoverした際の滑らかな切り替えを実装していきたいと思います。 transitionプロパティとは CSSが変化する際の要素の速度を指定できるプロパティです。 t […]

字間を調整するCSSプロパティには「letter-spacing」がありますが、今回は自動カーニング（文字詰め）ができるCSSプロパティ「font-feature-settings」を紹介します。 font-featur […]

今回はCSSのプロパティ「aspect-ratio」を使用して、画像の比率を指定する方法を紹介します。 aspect-ratioとは？ aspect-ratioとはCSSのプロパティで、ボックスのアスペクト比を指定するこ […]

今回は、前回のレスポンシブ対応｜HTMLだけで、PC画像とSP画像を切り替える方法の続きで、pictureタグを使用してwebp画像の設定と、Retinaディスプレイ対応の設定をしていきたいと思います。 webp画像の設 […]

PC画像とSP画像のデザインが変わる際、CSSのメディアクエリで切り替えたりJavaScriptを使用して切り替える方法もありますが、今回はHTMLのpictureタグを使用して簡単に画像の切り替えができる方法を紹介しま […]

親要素にinnerで幅指定がついている場合などに、その子要素の一部だけ画面いっぱいに表示させるには、親要素から子要素を出してコーディングをする方法をとるなど、少し手間がかかる場合があります。 そんな場合に、CSSで一部の […]

今回は、スライダーのプラグイン［slick］を使用して、スライダーに動画を入れ、自動再生してくれるように作成します。 初めに まずはどんな感じになるか、画像をクリックしてデモをご覧ください。 slickの設定 最初に［s […]

今回は、PCだと表示されるのに、スマホになると動画が表示されないという場合の解決方法を紹介します。 設定は簡単で、HTMLのvideoタグに以下属性を入れるだけです。 autoplay  自動再生 playsinline […]

以前、SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法を書きましたが、Swiperのスライダーライブラリでフェードエフェクトを指定している場合、透過している画像を使用した際に下の […]

前回はCSSで文章を複数の列に分ける方法を紹介しました。今回は1列の幅を指定する、column-widthプロパティを紹介します。 column-widthとは CSS のプロパティで、列の幅を設定することができます。 […]

今回はWordPressサイトの不正アクセスをより防ぐ、ログイン二段階認証の設定する方法をお伝えします！ 設定方法なのでWordfenceプラグインのインストール方法は割愛させて頂きます。   まずは、最初の準 […]

今回はCSSで文章を複数の列に分ける方法を紹介します。 文章が一行表示で横に長いと読みづらく、ユーザービリティを損なう場合があります。 そこで、CSSのプロパティで分割することによって見やすくし、可読性を高めることができ […]

前回、「簡単！　HTMLだけでアコーディオンメニューを作成する方法 ①」で、HTMLのみで作成する手順を紹介しました。気になる方は、前回の記事もご覧ください。 今回は、CSSでデザインを少し変更してみます。 デザイン変更 […]

アコーディオンメニューはjqueryやJavaScriptで作成する方法もありますが、今回はHTMLのみでアコーディオンメニューを作成する方法を紹介します。 アコーディオンメニューとは Webページおけるナビゲーションメ […]

今回は、CSSをまとめて記述する際に使いやすい「where:()」を紹介します。 「where:()」とは CSSの擬似クラス関数で、複数のセレクタを1つにまとめることができます。 「where:()」以外にも、同じく複 […]

今回は、指定した要素だけをなくすことができる［display:contents］を紹介します。 ［display: contents］を知る前に、まずはボックスモデルを確認 ボックスモデルとは、「HTMLやXHTMLで定 […]

clamp()関数とは clamp()関数には最小値、推奨値、最大値の3つの値を設定することができ、その中の条件に合うものが適用されます。 フォントサイズや横幅をスマートフォン用にいちいち設定しなくても、幅に合わせて最適 […]

今回は、pointer-eventsプロパティを使用して、重なった要素の後側にリンクを効かせる方法を紹介します！ また、下記の記事のではスマートフォン、タブレットのみに効かせる方法としても紹介しました！　気になる方は併せ […]

Flexboxで要素を横並びにした際、子要素の幅が短いと右側に余白ができます。 この余白は、flex-growプロパティで、子要素に振り分ける事ができます。 flex-growとは Flexを使用した、親要素の余白を子要 […]

今回は、JavaScriptライブラリ「Swiper」とCSSを使用し、背景画像をズームしながらふわっと切り替えるスライドショーを作成したいと思います。 まずは実装デモがこちら。 デモ内［Result］の［Run Pen […]

今回は、HTMLで電話番号のリンクを設定する方法を紹介します。 電話番号のリンクを設定するとどうなる？ リンクを設定した場所をタップするだけで直接電話を発信することができるようになるため、ユーザーにとって使いやすいサイト […]

以前、［text-overflow］を使用して文章を省略する方法を書きましたが、この場合ですと、一行のみで行数を指定して省略することはできません。 行数を指定したい場合は、CSSの［line-clamp］が便利です。 l […]

今回は、WordPressのプラグイン「Highlighting Code Block」を使用し、簡単にソースコードを表示させる方法をご紹介します！   ①管理画面→プラグイン→新規追加→検索に「Highlig […]

!importantとは？ 指定するとどうなる ［!important］は、CSSスタイルが適用される優先順位を最優先にする際に用いられます。 何よりも優先してCSSの指示を効かせるやり方で、CSSスタイルがどうしても効 […]

gapとは gap は css のプロパティで、アイテム同士の横方向と縦方向の余白をまとめて指定する事ができます。 marginプロパティーやpaddingプロパティーでも余白は指定できますが、gridやflexboxで […]

ツールチップって何？ ツールチップは、テキストやリンク、画像などの補足説明の事でマウスオーバーした際に表示されます。ALTに近いものになります。 ツールチップの実装のためにCSSの関数attr()を利用することができます […]

今回は、下記例示のようにCSSで規定の幅から文字数が多いためにはみ出てしまうテキストを省略する方法です。 See the Pen Untitled by 林 (@hayashi-akina) on CodePen. 下記 […]

スムーズスクロールとは、サイトをタップするだけでアンカーを付けた箇所に画面が滑らかに移動する動きのことです。 今回は、JavaScriptを使用せず、スムーズスクロールをCSSだけで実装する方法を紹介します。 html{ […]

①事前準備 「Ruby」をインストール する バージョン ２．７以上がインストールされているか。なければ、インストールする。 （Mac OSの場合）➡Homebrewがインストールされていること ②shopify CLI […]