2018年– date –
-
画像をクリックしたらモーダル画面で表示するjQueryを自作してみる
WEBページを見ているとき画像が小さくてよく見えないときありますよね？そんなときに、画像をクリックしたらモーダル画面で拡大されて表示されたら便利じゃないですか？モーダル画面（モーダルウィンドウ）は、操作が完了するまで親画面の操作を受け付けな... -
CSSで画像やブロック要素をど真ん中に表示する方法
通常はHTML要素は左上から順に構築されます。文章を書いても画像を貼り付けても、左上を基準に配置されます。でも時には真ん中に表示させたいときもあると思います。今回は、上下左右の中央、つまりど真ん中に画像やブロック要素を表示するためのCSSの書き... -
CSSで要素の角を丸くする「border-radius」を設定し柔らか味のあるサイトへ
基本的にHTMLは四角のエリアや画像などを組み合わせて構築するのでどこか刺々しく感じます。角を取り丸くすることによってサイト全体が柔らかい雰囲気になるのではないでしょうか。 例えば、下のような画像があります。これをこんな風に出来ます。今... -
超簡単！CSSでサイドバーを追従させる方法
前回の記事でjQueryを使ってサイドバーを追従する方法をご紹介しました。jQueryでサイドバーを追従させる方法フッターやコンテンツエリアの位置情報を取得したり、面倒ですよね。スクロールする度に起動されるので環境によっては重く感じることもあるかも... -
jQueryでサイドバーを追従させる方法
サイドバーって画面をスクロールさせていくと最後のほうは何も表示されなくなっちゃいますよね。せっかくスペースがあるなら常に何か表示させておきたいと思うものです。そこで今回は画面をスクロールするとサイドバーが固定表示されるものを作ってみまし... -
CSSを上書きして背景色を指定無しにする方法
結論を言えば、transparent をカラーに指定すれば透明になります。部分によりますが、背景色だったら透明(transparent)が初期値だと思います。 背景色を無しにする場合はこのように書きます。background-color: transparent;これで何色が指定されてい... -
jQueryでサイドメニューを縦にスライドして折りたたみする方法
サイドバーって何か情報を載せ始めるとごちゃごちゃしてきて分かりづらくなりますよね。そこで折りたたんですっきり出来るようにしてみようと思います。【完成形のコード】HTML（サイドバー部分）<div id="sidebar"> <div class="sidetext"> ... -
jQueryでメニューのサブメニュー(ドロップダウン)をクリックで開閉させる方法
以前にCSSでドロップダウンメニューを作成しました。CSSではマウスオーバーでしか動的なことは出来ないため、マウスオーバーで開閉するようなものでした。https://swell.dev-lib.work/css-menu-drop-down/今回はjQueryを使ってメニューをクリックするとド... -
jQueryでリンクのクリックを無効にする方法
a タグで作成したリンクをクリックした場合にもリンク先に遷移したく無い場合があるかと思います。例えば、リンクをクリックしたが何らかのエラーがあった場合は遷移しないなど。そういう場合リンクを無効にし、遷移を行わない方法があります。「jQueryで... -
Ajaxとは？jQueryで非同期通信を行う方法
Ajaxとは非同期通信を行う仕組みのことです。Asynchronous JavaScript + XML の略だそうです。Asynchronous は非同期という意味なので、JavaScript を使って非同期通信を行うということです。XMLは分かりません(笑) 非同期通信というのは、WEBページ...
