インライン要素の長文テキストの表示は大丈夫？box-decoration-breakを使って整えよう！ - arms inc. Engineers' Blog
こんにちは、ユアサです。 以前、長文テキスト対策についての記事を書いたことがありました。その記事では紹介し忘れていましたが（というより最近知ったのですが）、テキストが改行・分割された時、テキストの改行位置にある文字のパディングや装飾を補間するプロパティbox-decoration-breakについて、今回の記事で具体的な使い方を交えて紹介したいと思います。 長文テキスト改行時に起こる現象について 以前の記事で紹介した長文テキスト対策について、親要素をはみ出さないように改行させる方法がありました。対策ができたのはいいですが、まだ解決できていない問題があります。「背景のついたテキスト」です。 テキストの背景に色や画像を実装させる際、テキストの背後にのみうまく表示したい時はブロック要素であるpタグではなくインライン要素のspanタグを使ったりするかと思います。しかしこれを実装しようとしたことのあ
斜めの背景をCSSで作る方法
Webサイトのセクションの区切り等で背景色の切り替わりが水平ではなく斜めになっているようなデザインがありますよね。 今回は、このような斜めの背景をCSSで作るときに利用できる二つの方法について具体的な記述例と併せて紹介していきたいと思います。 今回紹介するのは下記の二つの方法です。 transformを利用する方法 clip-pathを利用する方法 transformを利用する方法 CSS のプロパティ transform は、与えられた要素を回転、拡大縮小、傾斜、移動することできます。 transform – CSS: カスケーディングスタイルシート | MDN rotateとskewの比較 下の図は、CSSで要素を変形させるtransformの中で斜めの背景を作るときに利用できるrotateとskewYとを比較した画像です。 黒い枠線と同じサイズの擬似要素に色をつけて、それぞれの方法で
ユーティリティーファーストとTailwind CSSのススメ - Qiita
Tailwind CSSは結構いいんでないの？というポエムです ユーティリティーファーストって考え方について まず、 ユーティリティークラスが何かということ ユーティリティークラスを使ってHTMLを書いていくということってどういうことか これは、ある程度CSSを書いている人であれば想像できることであろうと思う。 こんな風に、あらかじめユーティリティー的なクラスを用意しーの .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-a
CSS - list-style-type - とほほのWWW入門
上記の他にも、CSS3 では数多くのタイプが定義されています。 http://www.w3.org/TR/css3-lists/ @counter-style で独自のタイプを定義することも可能です。 @counter-style cjk-heavenly-stem { type: alphabetic; glyphs: '\7532' '\4E59' '\4E19' '\4E01' '\620A' '\5DF1' '\5E9A' '\8F9B' '\58EC' '\7678'; /* '甲' '乙' '丙' '丁' '戊' '己' '庚' '辛' '壬' '癸' */ suffix: '、'; } <h5>none</h5> <ul style="list-style:none"> <li>HTML <li>CSS <li>JavaScript </ul> <h5>disc</h5> <
jQuery【CSS】toggleClassを使ってCSSの切り替えを行うサンプル - プログラマカレッジ
jQuery を使って CSS を追加する際は addClassメソッド、削除する際は removeClassメソッド を使用しますが、その他に toggleClassメソッドを使用する方法もあります。 toggleClassメソッドは、addClassメソッドと removeClassメソッドの機能を切り替えて行う便利なメソッドです。 今回は、jQuery の toggleClassメソッドを使用して CSS を変更する際のサンプルをについて、解説いたします。 jQuery を使用した CSS の設定方法等については、以下のページもご参照下さい。 jQuery【 CSS 】スタイルを動的に変更する jQuery【 CSS 】colorとfontを変更するサンプル jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル jQuery【 CSS
[レスポンシブ対応]メガメニューの作り方
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initiascale=1.0,user-scalable=no" /> <title>グローバルナビ：メガメニュー、レスポンシブ対応</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" /> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="conta
![[レスポンシブ対応]メガメニューの作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/6140ce976a0597b9cacc030b333518ef35798f97/height=288;version=1;width=512/https%3A%2F%2Fatelier-light.com%2Fblog%2Fwp-content%2Fuploads%2F2021%2F07%2FNavigation-Bar-Mega-Menu-3.jpg)
〔 ▼〕選択プルダウン(SELECT～OPTION)をおしゃれにするCSSスニペット15選。 | KodoCode
フォームのデザインをかっこよくする選択プルダウンのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 本記事ではフォームの中でも「選択式プルダウン(SELECT～OPTION)/ドロップダウンリスト」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 プルダウン/SELECT要素(シングル)の見栄えを劇的に良くするCSSデザイン例。ふわっとポップにアニメーションするドロップダウンリスト。See the Pen Custom Select by Yusuf (@yy) on CodePen. ポップでステキなデザインのプルダウン/SELECT要素です。 選択時にふわっとボックスが動くと同時に、選択肢が吹き出し形式で表
コピペでOK！CSS セレクトボックス（select option）のカスタマイズ方法
フォームパーツのカスタマイズって難しいですよね？ 中でもセレクトボックス（select option）をCSSでカスタマイズする時は手を焼きます。 ということで今回はセレクトボックスの書き方、CSSでのカスタマイズ方法をケース別にまとめてみました。 スニペットも用意しています（随時追記します）。WordPressの「MW WPフォーム」や「Contact Form 7」のカスタマイズにも応用可能なので参考にしてください。 かみーゆ/フロントエンドエンジニア 資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発
JavaScript不要！CSSだけで出来るドロップダウンメニューの実装方法 | ビジネスとIT活用に役立つ情報（株式会社アーティス）
webサイトを作成しているとドロップダウンメニューの設置をすることがよくあります。 メニューがグローバルナビゲーションに収まりきらない場合や、階層が多いサイトなどで重宝する形式です。 今回はこのドロップダウンメニューをCSSのみで実装する方法をご紹介いたします。 ドロップダウンメニューとは ドロップダウンメニューとは、メニューのタイトル部分をクリックもしくはホバーしたときに、下に垂れ下がるようにして表示されるメニューのことです。 今回実装するのは、弊社サイトでも採用しているような、グローバルナビゲーション（以下Gナビ）に付随するような形で用いられるドロップダウンメニューです。 該当するGナビタイトルにマウスホバーすると、その下にドロップダウンメニューが表示され、該当のGナビタイトルもしくはドロップダウンメニューからマウスが離れると非表示になるという仕様で実装していきます。 Gナビ部分の実装
CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA
CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。特に、Flexboxではつくるのが難しい、縦軸・横軸がある格子状のレイアウトに向いています。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基本的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくりながらGrid Layoutの基礎を学ぶ 次のようなヘッダー・メイ
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
CSSだけでチェックボックスをカスタマイズする方法 - プロエンジニア
1. チェックボックスのスタイルを無効にする 1.1. 通常のチェックボックス[ input type="checkbox" ]の作成 まずは、標準スタイルのチェックボックスを作成してみましょう。「checkbox1.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。 ※HTMLでチェックボックスを作成する方法については、「HTML入門：チェックボックスを表示させてみよう」で解説していますのでご参考下さい。 ●checkbox1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS入門-チェックボックスのカスタマイズ</title> </head> <body> <h1>チェックボックスのデザイン</h1> <input type="checkb
検索窓を設置してサイト内、もしくはWEB全体の検索をする | HTML・CSS・jQuery・PHPを徹底解説！【Web担当者の作り方】
検索窓を設置してサイト内、もしくはWEB全体の検索をする 更新日：2015年9月30日 自分のサイト内にGoogleの検索窓を設置して、何かを検索させられるような機能を付け加えたいと思っている方って結構多いのですよね。 最近受け持った案件の6件中4件が検索窓の設置を希望されていたので、改めて需要の高さを感じました。 では早速検索窓を設置する方法ですが、HTMLで と記述すればOK。 普段皆さんが検索する時に使われているGoogleの検索窓をそこに表示することが出来ます。 検索窓にキーワードを入力して「検索」のボタンをクリックすると、Googleの検索窓で検索した時と同様の検索結果が表示されます。 それでは今度は検索させたいキーワードをセットした状態での検索窓の設置の方法です。 同様にHTMLで と記述すれば、検索させたいキーワードをセットすることが出来ます。 キーワードを何処で決めているの
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
CSSのみでスムーススクロール実装とアンカーリンクのスクロール位置を調整する方法｜BLACKFLAG
ページ内でスムーススクロールをする際は今まではJavaScriptを使って実装をすることが多かったですが、最新のモダンブラウザではCSSだけで簡単に実装することができます。 それに加えて、アンカーリンクでスクロールする際に固定ヘッダーがあったりするとスクロールを止める位置の調整がめんどうだったりしますが、それも最新のモダンブラウザでは簡単にCSSで操作することができます。 今回はCSSだけでスムーススクロールを実装する方法と、アンカーリンクのスクロール位置を調整する方法を備忘録メモとして紹介してみます。 CSSのみでスムーススクロールを実装するには「scroll-behavior」プロパティの「smooth」を使用します。 ページ全体にスムーススクロールを実装する場合はhtmlタグに対して「scroll-behavior」プロパティを指定します。 html { scroll-behavio
[CSS3] 横並びレイアウトを簡単に実現するdisplay:boxが便利 - YoheiM .NET
こんにちは、最近新しいゲーム作りに仕事が変わった@yoheiMuneです。 新しい案件で、「display:-webkit-box」という見慣れないスタイルを発見。聞いてみると横並びにしたりするのにすごく便利なようで。 その具体的な使い方を今回はブログに纏めました。 まず始めに display:boxは、横並びレイアウトを行うために大変便利な機能ですが、2013/01現在はまだ使用策定中です。 最新の情報は、以下よりご参照ください。 - http://dev.w3.org/csswg/css3-flexbox/ また良くある疑問で「便利だけど動くブラウザあるのー？」という疑問については、以下のようなサポート状況のようです。 引用元：http://caniuse.com/#feat=flexbox ベンダープレフィックス付きで、だいたいのブラウザで動きそうな感じです。 特にスマホ用のマークア
![[CSS3] 横並びレイアウトを簡単に実現するdisplay:boxが便利 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa200920a849841c6a264659958eecc12570ae15/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F202.jpg)
overscroll-behaviorがお手軽！ モーダルUI等のスクロール連鎖を防ぐ待望のCSS - ICS MEDIA
3つ値の具体的な動作は、次のサンプルで確認できます。overscroll-behaviorプロパティがcontainまたはnoneだった場合、背面のコンテンツにスクロールが伝達しないことを確認できます。 加えてcontainは、オーバースクロールの動作を維持します。このサンプルでは、コンテンツを超えて上下にバウンスする効果を確認できます。（次のGIF画像の2番目） 効果が有効かどうかは、OSやブラウザによって異なりますが、モバイルのPull-to-Refreshが有効なブラウザから確認できると思います。 サンプルを別ウインドウで開く コードを確認する（HTML、CSS） どのような使い方ができるのか、作例をいくつか用意しましたのでご紹介します。実装の参考にしてみてください。 画面固定で表示するUIの作例 画面固定で表示されるダイアログとハンバーガーメニューをdialog要素で実装し、ove
【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。
普通のリンクだと思ってクリックしてみたら、実はそれがPDFファイルへのリンクだったり、意図せずメール・アプリケーションが起動したり、またはワードやエクセルのファイルだったりするとさらに最悪…。ネットサーフィンをしていると、そんなフラストレーションが貯まるような機会に遭遇することがしばしばあります。 自分が運営するサイトでは、ユーザーにそんな嫌な思いをさせないために、PDFへのリンクの場合はPDFのアイコン、メール・アプリケーションが起動する場合はメールのアイコンを表示させるなどのような、細かい気配りが大切だと考えています。 まずは、以下のHTMLを見てください。 HTML の記述方法<!-- 通常のリンク --> <a href="http://example.com">http://example.com</a> <!-- mailto --> <a href="mailto:examp
【CSS】:not否定擬似クラスの使い方とできること - bagelee（ベーグリー）
はじめに 新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay24です！ 昨日は「Ruby 後置whileの挙動をみる」と言う記事でした。 Ruby 後置whileの挙動をみる 本記事では、CSSの「:not」という否定擬似クラスの使い方とできることについて書いていきます。 :not否定擬似クラスの基本 :not否定擬似クラスとは？ :notとは、CSS上で特定の要素やクラス以外のものを指定したい時に使う擬似クラスです。 特定の要素やクラス以外のものを取得するため、「否定擬似クラス」とも呼ばれています。 :notの基本的な構文 :not(hogehoge) { プロパティ: 値; } これが基本的な、:notの構文です。 hogehogeの中身が今回取得しない対象を表します。 :notの例文1 <ul> <li>apple</li> <li class="sample">o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cssで文字の真ん中に線に線を引く方法 - Sato_Log