ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)

2018-11-26
管理画面でユーザーに画像をアップさせる際、実行ボタンの2度押しを防ぐために必要なローディングの表示。 特に苦労せず設置ができたので、コードを紹介します。ローディング自体はCSSで完結します。画像不要なのが今回のミソです。ボタンを押したらローディング発動の部分だけjqueryです。 [デモサンプル] まずはbodyの下辺りにローディングのHTMLコードをコピペして、フォームのボタンに何らかのクラス名を付けてください。 htmlStart ・ ・ ・ htmlEnd 次はCSSに以下のコードをコピペしてくださ...続きを見る

ページ読込み時に下から上に移動しながらフェードインというリッチなコンテンツ表示を簡単実装

2018-10-29
ページを開いた際にフェードでページ全体を表示する方法はネットに出回っていますが、 「下から上に移動しながらのフェード」これがなかったので、自分で調整したものを残します。 単純に、jqueryのappend関数(コンテンツ追加)でbodyのmargin初期値を50pxなどにして、delay(ディレイ)後にmarginを0にする。 同時にフェード効果とのコラボとなり、非常に心地の良い効果になります。 htmlStart $(function(){ $('head').append( 'body{display:none; margin-top:50px;}' ); ...続きを見る
カテゴリ: Javascript

リンクや画像をマウスホバーの際にゆっくり変化させるCCSのみで最短の方法

2018-10-29
マウスホバーはPC版サイト限定なので、スマホサイトでは使えません。 BtoBではまだまだPC版サイトが重要なので、需要は多少ありますよね。 さて、ゆっくり変化させる方法ですがCSSのみで簡単にできます。 まずはclassにtransition(切り替える時間)を指定します。 hover時の効果も指定。半透明にさせるopacityかbackgroundがベターです。 htmlStart .hover-slow{ transition: 0.5s;} .hover-slow:hover{ opacity:0.7;} htmlEnd あとは、ホバー時に変化させたい画像やリンクの...続きを見る
カテゴリ: CSS

中小企業がポンコツシステム会社の餌食になってる件について

2015-10-22
PHPのシステムエラー復旧を承っちゃおうかな。ポンコツなシステム会社が多すぎるからさ。と思う今日このごろ。 34歳になってこの上から目線の発言は以下に自分がクソメンであるかを象徴してるねw 大手のポータルサイトではユーザー登録の際にエラーは全然起きないけど、 中小企業が運営するポータルサイトってエラーにちょくちょく出くわさない? 最近では、「セミナーズ」というサイトにセミナーの登録をしようとおもったら、 登録ボタンを押すと、ページが見つかりません…っておいおい。 せっかく苦労して入力したのにふざけんなっつーのと、怒り心頭。 「スクール検索サイト」でスクール情報を登録し...続きを見る
カテゴリ: PHP

パソコンを持たない世代の増加でWEB制作者の需要が年々アップ!

2015-04-23
WEB制作の業界で飯を食ってきて10年目になった。 10年前の2005年頃はインターネットの普及率がグングン伸びていて、 WEBの技術者もそれに伴い増加傾向にあったと思われる。 この頃はガラケーサイトを作るが面倒だった。 絵文字は必要だし、機種によって文字コードや文字サイズが違うので、 WEBエンジア(SE)は実機チェックに奔走せざるを得なかった。 その5年後の2010年にはガラケーサイトの需要が縮小し、スマホの時代に突入。 スマホのブラウザはJavascriptが使用でき、機種による差も多くなく、 SE的にはガラケーサイトを作るよりはかなり楽になった。 が、...続きを見る

ドキュメントタイプについて

2014-08-14
HTMLの先頭で記載しなければいけないドキュメントタイプにはいくつか種類がある。ドキュメントタイプを指定しないと、古いIEではCSSが正しく反映しなかったりするので宣言は必須。例えば「margin:0 auto;」が効かない。 これまで現役で、今もなお主力なのがxhtmlのドキュメントタイプ。この指定をすると閉じタグのないタグには最後にスラッシュが必要になる。個人的には好きな指定法。 htmlStart htmlEnd そして、xhtmlより前に主流だったのが下記のドキュメントタイプ。テーブル組みの時代によく見られていたので、古いサイトは大半がこの形。 htmlSta...続きを見る
カテゴリ: HTML

本物のタブブラウザはスレイプニル!高速ネットサーフィンで仕事で差をつけろ!

2013-09-01
インターネットとブラウザは切っても切れない関係。 果たして、あなたが使っているブラウザは本当に自分に合っているブラウザなのか? 「IE」「google chrome(以下、クローム)」「firefox(以下、狐)」「safari」 ブラウザのシェア率は、この辺が高いというのは知っている。 が、個人的には日本人が開発している「sleipnir(スレイプニル)」(以下、プニル)がイチオシである。 国産のわりには読みづらい名前で浸透性がなく、シェア率は0.2%ほどの超絶マニアックブラウザ。 しかし、慣れてしまうと他のブラウザにはもう移行できない感が一番強いのはプニルではないかと思...続きを見る

ボタンを押したらローディング画面を表示する

2013-04-30
更新 2018-11-26 この記事に関する最新記事は「ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)」になります。 管理画面で時間のかかる処理(例えば画像や動画などをアップロードする際)をする場合、画面が固まってしまったと勘違いされて閉じられたり、ボタンを何度も押されてバグを発生させてしまうこともあるかもしれない。 そこで、ローディング画面を表示して、ユーザーに「現在処理中ですよ」と知らせる必要があるのである。jQueryにローディング画像が必要のない便利な「Activity Indicator」というライブラリがあるので紹...続きを見る

【フリー素材】スマホ版ヘッダー用素材

2012-10-25
今回はスマホ版サイトのヘッダーの部分でよく見かけるアイコンの素材。今回配布しているPSDファイルでは、ホームやメールなど全てがベクターなので拡大縮小が自由です。 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 スマホ版サイトをデザインする時の強い味方となる参考サイトをついでにご紹介。 ■絶対見ておきたい有名企業のスマホサイトまとめ http://ascii.jp/elem/000/000/590/590502/ ■優れたiPhoneサイトデザイン集 - ...続きを見る
カテゴリ: WEB素材

6行程でアコーディオンメニューを導入

2012-09-08
jQueryを使用してたった6行程でアコーディオンメニューを完成させているコードがあったのでご紹介。 htmlStart $(function(){ $("dd:not(:first-child)").css("display","none") $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $(this).siblings("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); })...続きを見る
カテゴリ: Javascript

クロスブラウザ対応CSSハックの一覧

2012-08-09
コーダー泣かせのIEはハックで強引に直しちゃいましょう。IEはjavascriptの動作が重いし、CSS3とHTML5の対応は進んでいませんし、FireFoxもCSS3とHTML5が完全対応ではありません。safariとGoogleChromeはその辺はかなり対応していて優秀です。IEの次のバージョンはどうなのでしょうかね? マイクロソフトはOS部門のWindows以外で大した成功がないような気がします。メッセンジャーはスカイプに負けてるし、ブラウザもイケてないし、スマホでも勝ち目なさそうだし。クラウドサービスもグーグルの方が技術的に強そうなイメージがある。どれも使いやすさには定評がある...続きを見る
カテゴリ: CSS

【フリー素材】フォーム用のボタン

2012-08-09
個人的に好きな色のボタンを3パターン作りました。CSS3で表現できるものですが、IEが対応していないので、グラデーションや角丸はまだまだ画像を使っていった方が無難ですよね。ボタンの文字を編集したい方もいると思うのでPSDファイルもアップしてあります。 人物フリー素材SELLSELF ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

thickboxでダイアログを表示する

2012-08-08
Jqueryのプラグインであるthickboxを使ってダイアログを表示してみよう。まずはheadタグ内でjqueryを読み込んだ後にthickbox.jsを読み込む。順番が逆だと動きません。 htmlStart htmlEnd あとはテキストリンクにclass指定でthickboxを宣言し、リンクを貼るだけで設置完了です。リンクのパラメータにはheightとwidthを必ず指定しなければいけません。リンク先はHTMLや画像、PHPでさらに独自のパラーメーターを付け足すことも可能です。 <テキストリンク~ダイアログ表示> htmlStart サンプル htm...続きを見る
カテゴリ: Javascript

floatで横並びにしたli(リスト)をセンターにする方法

2012-08-04
ページャを作る時に重宝するテクニックです。floatで横並びにした場合、text-align:center;ではセンターにはなりません。potosion(ポジッション)を使って実現させます。 <CSS> htmlStart div.pager { font:14px Arial,Helvetica,sans-serif; position:relative; overflow:hidden;} div.pager ul{ float:left; position:relative; left:50%;} div.pager ul li { float:left; position...続きを見る
カテゴリ: CSS

あると便利なリスト用アイコン

2012-08-04
画像をダウンロードして、フォトショップで切り抜き加工をして使ってください。CSSの宣言方法も記載しておきます。 <HTML> htmlStart サンプル1 サンプル2 htmlEnd <CSS> htmlStart ul.listMark li{ background:url(/img/list.gif) 0 2px no-repeat; padding-left:15px; } htmlEnd 背景ポジション(0 2px)←この部分はline-heightの設定値により数値の調節が必要になります。ポジションの数値はマイナスの値も使えます。 ...続きを見る
カテゴリ: WEB素材

floatの回り込み解除にclearfixを使う

2012-08-04
<サンプル> ヘッダーなどでサイトロゴの横にバナーを置く時に回り込みの解除が必要になってきます。背景画像があるカラムの中でfloatを使って回り込みをすると、背景画像が表示されなくなります。そこで背景画像を指定しているタグにclearfixを使えばちゃんと背景が表示されるようになります。clearfixは便利なのでサイト毎に必ず宣言しています。オーストラリア人のTony Aslettという方が、cleafixを考案したらしい。 <CSS> htmlStart .cf:after{ content: "."; display:block; clear:both; he...続きを見る
カテゴリ: CSS