CSSの「border」プロパティや「linear-gradient」関数を使用して、見出しに括弧を付けました。 カギ括弧や2重カギ括弧、丸括弧や隅付き括弧などをCSSで実装しています。 以下のサンプルを参考にブログやWEBサイトに活用してください〜。 カギ括弧を付けた見出し <h2>CSSでつくる見出しデザイン</h2> h2 { position: relative; padding: 1rem; font-size: 24px; font-weight: bold; text-align: center; } h2::before, h2::after { position: absolute; width: 30px; height: 30px; content: ''; } h2::before { border-left: solid 3px; border-top: soli

こんにちは。五平餅くんです。 テキストを左揃え中央寄せにしたい場面って実務では結構あると思います。 例えばこんな感じです。 しかし、text-align: leftにすると左よせになってしまいますし、そこにmargin: autoを指定してもうまくいきません。 ↑text-align: leftとmargin: autoしてもうまくいかない例 今回はテキストは左揃えだけど、中央に寄せたい時のcssを3パターンご紹介指定と思います！ 一番一般的な方法：親要素にtext-align: center まずは一番一般的な方法です。 親要素にtext-align: centerを指定し、子要素にtext-align: leftとdisplay: inline-blockを指定します。 <div id="content"> <div class="inner"> <div class="text-ce

なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで

ベストプラクティスとも限らないですが、プレーンなHTML・CSSサイトでも手軽に実装できる方法を紹介します。 background-imageの一瞬表示されない問題 CSSのbackground-imageはその画像が表示されるまで読み込まれません。例えばユーザーのアクションに応じてbackground-imageを変える場合、変更後の画像はユーザーアクションが行われてから初めて読み込まれます。（この読み込みは初回のみ行われるので、2回目以降は発生しません） 遅延表示のサンプル より具体的な現象としては、独自デザインのラジオボタンやチェックボックスをクリックした時、初回のみ一瞬遅れて表示される、というのがあります。他にもdisplay: noneで非表示にしている要素を表示させた場合でも同様の表示ラグが発生します。 ▼初回のみ表示が遅くなっている様子（分かりやすくするためにネットワーク速度

CSSで作る吹き出しの見出しデザインを作りました。 before、after疑似要素で「border」プロパティ等を使用し吹出口を作っています。 三角の吹出口だけではなく、線を入れただけのシンプルな吹き出しや背景をストライプにしたものなど様々なパターンで作成しています。 <h2>CSSでつくる見出しデザイン</h2> h2 { position: relative; padding: 0.8rem 0; margin-bottom: 0.2rem; border-bottom: 5px solid; color: black; font-weight: bold; font-size: 26px; text-align: center; } h2:before, h2:after { position: absolute; top: 100%; left: 50%; content: ""

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

文章内の一部だけ上下させたいことってたまにあるんですよね。 今回はクライアント様（同級生だけど 笑）のホームページで使った事例を。 見出しで「News / Campaign」の箇所があります。 もう少しイメージに合う感じにならないか。細かい部分ですけどね。 画像使うまでもないし、 「News ＊ Campaign」 でって事で。簡単なコードですが、ご紹介します。

Codepenで見つけたかっこいいやつ

カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、

CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン 蛍光ペンのような線をひいたCSS見出しデザイン ラインを使ったCSS見出し HTML <h2 class="heading01">ラインを使ったCSS見出し</h2> CSS .heading01 { display: inline; font-size: 26px; background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%); } 蛍光ペンで線を引いたような見出しデザインです。display: inlineで複数行にも対応させています。 2色を重ね

ウェブサイトのフォントは何を指定すればよいのでしょうか？　CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,

この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf

前回までanimationプロパティによるCSSアニメーションについてご紹介しました。 animationプロパティは@keyframesを設定し、animationプロパティを設定して・・・と簡単なアニメーションを実装するには少し手間がかかります。 もっと手軽にCSSアニメーションを実装したい、そんな時に便利なのがtransitionプロパティです。 今回はtransitionプロパティについて解説していきます。 transitionプロパティとanimationプロパティの違い まずは二つのプロパティの何が違うのかを見ていきましょう。 1.transitionプロパティは@keyframesの設定が必要ない animationプロパティでCSSアニメーションを実装する際は、別途@keyframesで変化していく形状などを記述しておく必要がありました。しかしtransitionでは@ke

.arrow { &::before { content: ""; display: inline-block; width: 15px; height: 15px; border-top: 3px solid #000; border-right: 3px solid #000; transform: rotate(45deg); } } 表示 補足 widthやheightを増減させるとくの字の線の長さが、border-widthを増減させると線の太さが変わります。 向きを変えたいときはtransform: rotate();の角度を変えましょう。

セクション間の区切りが曲線になってるデザインはたまにありますが、意外とどうやっていいか分からない人も多いと思います。 今回はCSSでセクション間の区切りを曲線にする方法をサンプルを元に解説していきます。

要素を画面幅いっぱいにするのはよくあります。 しかし、片方だけ横幅いっぱいにしたい場合は、どうしたらいいでしょうか？ 今回はいくつかのパターンに分けて、片側の要素だけ画面幅いっぱいに広げる方法を解説していきます。 ただし、基本となる要素がど真ん中にある場合のみです。 また、親要素の幅を超えて子要素を画面いっぱい横幅100%にする方法については、以下の記事を参照下さい（実務ではこっちの方がよく使います）

この記事ではMW WPフォーム、Contact Form 7の二大プラグインに焦点を絞って、ラジオボタンとチェックボックスのデザインのカスタマイズ方法をご紹介します。 かみーゆ/フロントエンドエンジニア 資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。 Read More

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

今回はHMTLとCSSでoverflow: scrollのスクロールバーをカスタマイズする方法について解説します。 この方法を知ることで、基本のデザインから見た目を変更することができ、サイトの雰囲気に合わせたスクロールバーを作成することができます。 一緒に理解を深めていきましょう。 最終的なコードと実装 最初に今回作成したスクロールバーに関するコードを全て載せます。 HTML <div class="container"> <article> <h2 class="title">タイトル</h2> <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </article> <article> <h2 class="title">タイトル</h2> <p cla