【CSS】CSSのみで三角と矢印を作る方法 - bagelee（ベーグリー）
はじめに 本記事ではCSSのみを使って三角や矢印を作る方法をご紹介します。 すでに三角や矢印を作れる方でも、「実際にはコードの中身の仕組みがよくわかっていないんだよね〜」という方もいらっしゃるんではないでしょうか？ 今回はそんな方に向けて細かい解説を交えながらご紹介します！ 三角の作り方 こちらは実際にCSSで作成した三角です。 HTMLコード： <div class="triangle"> </div> <div class="triangle1"> </div> <div class="triangle2"> </div> <div class="triangle3"> </div> CSSコード： .triangle{ width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid
プルダウンメニューのデザインを変更する | GRAYCODE HTML&CSS
select要素にデフォルトで効いているCSSを解除し、自由なデザインに変更する方法について解説します。 この記事のポイント select要素の標準CSSをリセットする IEやFirefoxのselect要素に表示される矢印を消す select要素に好きなCSSを適用する プルダウンメニューを自由にデザインする フォームにプルダウンメニューとして設置するselect要素について、各ブラウザが適用している標準CSSをリセットした上で自由なデザインに変更していきます。 例えば、IEがselect要素に標準で表示する右側の矢印を消し、任意の画像に置き換えることができます。 IEでの表示例 iPhoneのSafariなどの標準CSSもリセットし、IEと同様に自由にデザインを変更します。 iPhone Safariでの表示例 select要素に適用するCSSは次のコードです。 CSSのコード例 se
【slick.js】画像上の矢印をカスタマイズ（変更）し両サイド画像透過 | Puzzle（パズル）
レスポンシブに強く様々なレイアウトが揃っているslick sliderは多くの方がご存知だと思います。この度、slick sliderのカルーセル・スライダーで矢印を素材に変更し両サイドの少し見えている部分を透過するという案件が出ましたので、備忘録をかねて掲載致します。 まずは、デモをご確認く頂き、必要があればslick.jsを配布元からファイルをダウンロードしてください。ファイルの設置などGimmick logさんのページで詳しく紹介されていますので、ご参考ください。 両サイドの画像を透過するCSS 両サイドの画像を透過する事でアクティブ画像に目が行くようになります。 .slick-slider .slick-track, .slick-slider .slick-list{ background: #fff; } .slick-initialized .slick-slide{ opa
Bootstrap4を利用してアコーディオンメニューを作ろう | コトダマウェブ
ここでは、Bootstrap4に備わっている機能を利用してアコーディオンメニューを作る方法について見ていきたいと思います。 今回、作成するメニューはこちらです。 ボタンで表示を切り替えてご覧ください。 See the Pen bootstrap4 accordion by kenichi (@ken81) on CodePen. HTML <ul id="accordion_menu"> <li> <a data-toggle="collapse" href="#menu01" aria-controls="#menu01" aria-expanded="false">リンクメニュー１</a> </li> <ul id="menu01" class="collapse" data-parent="#accordion_menu"> <li><a href="#">リンクサブメニュー1-1<
Bootstrapのアコーディオン（collapse）の開閉時にアイコンを変更させる(CSSだけでやっちゃう編) - 屑プログラマの憂鬱
BootstrapのCollapse（JavaScript · Bootstrap）は非常に便利なんだけど、開閉を意味する画像（＋やーの画像）を表示させたい時がある。でも、js書くのも辛い。そんなときは、CSSを駆使してササッと仕事終わらせちゃいましょう。 <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <div class="collapse" id="collapseExample"> <div class="well"> ...開閉させたいコンテンツhere… </div> </div> a[aria-expa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでくの字や三角形を作る - Qiita
CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 - NxWorld
【Bootstrap + jQuery】アコーディオンでボタンの三角ボタンの上下を切り替える方法 | YMMHブログ
最新版IEでセレクトボックスの矢印を消す - knowledge base