ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)
2018-11-26 703 1697 管理画面でユーザーに画像をアップさせる際、実行ボタンの２度押しを防ぐために必要なローディングの表示。 特に苦労せず設置ができたので、コードを紹介します。ローディング自体はCSSで完結します。画像不要なのが今回のミソです。ボタンを押したらローディング発動の部分だけjqueryです。 [デモサンプル] まずはbodyの下辺りにローディングのHTMLコードをコピペして、フォームのボタンに何らかのクラス名を付けてください。 <body> <!-- loding --> <div id="overlay"> <div class="cv-spinner"> <span class="spinner"></span> </div> </div> ・ ・ ・ <input type="button" class="btn" value="実行"> 次はCSSに以下
スワローテーマにてheaderをグラデーションにして雰囲気を変えるカスタマイズ - OPENCAGE
今回紹介するグラデーションCSSはIEや古いブラウザには対応していない場合があります。その場合はデフォルトの背景色が適用されます。 弊社テーマ以外での適用は、コードを改変する必要がある場合があります。 グラデーション用のCSSを作成する まずはグラデーション用のCSSを作成する必要があります。 background: linear-gradient(130deg, rgb(22, 192, 237), rgb(150, 131, 206)); のように色コードを設定するだけですが、CSSに慣れてないと指定するのは難しいと思いますので以下のようなジェネレーターを使いましょう。 ジェネレーター「Blend」を利用する 世の中には便利なWEBサービスを配信してくれているサイトがたくさんあります。今回はCSSグラデーション用のCSSを作成することに特化した「Blend」というサイトを利用して、グラ
CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
