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
もう誤魔化さない！ CSS Transform完全入門(2D編) - ICS MEDIA
CSS Transformの仕様は意外にも複雑です。思った通りの場所に表示できず、その場凌ぎにmarginやpaddingの目分量で位置合わせをしてしまった……。そんな経験をもつ方もいるのではないでしょうか？ この記事では、CSS Transformの基礎をおさらいした上で、陥りやすいミスの回避方法や最新の機能を紹介します。 CSS Transformとは？ CSS Transformはwebページで高度な表示やアニメーションを高速に描画するための仕様として生まれました。 往年のwebユーザーの方であれば、Google検索のイースターエッグのひとつ『do a barrel roll』をご存知かもしれません。このイースターエッグは当時（2010年代初頭）最先端であったCSS Transformをデモする意味もありました。 2021年現在では、発展系の3D変形も含め、ほぼすべての機能がIE(I
もう誤魔化さない！ CSS Transform完全入門(3D編) - ICS MEDIA
CSSで3D風の表現ができることをご存知の方は多いでしょう。しかし、自由に使いこなせると自信を持って言える方は少数派ではないでしょうか？ この記事ではイメージの掴みにくい3Dの変形機能について、基本の使い方から実際の適用例までしっかりと紹介します。 なお、前回の記事『CSS Transform完全入門(2D編)』では3D部分を除いた基本の2D変形について紹介しています。3Dの変形は2Dの応用で利用するプロパティーもほとんど同じです。合わせてチェックしてみてください。 CSS 3D Transformでできること・できないこと 3Dの表現はCSSとしては少々異色の機能です。ときおり専用のライブラリやエンジンを使ったかのような高度な作品が話題になることもありますが、実装の複雑さや性能の観点で実用的なものは多くありません。 今回は見た目の派手さよりも、現実的にCSS Transformが向いてお
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cssで文字の真ん中に線に線を引く方法 - Sato_Log
CSS transform Demo: transformの動作を試せるサンプルページ