サイト制作

javascript

jQueryで画面遷移させる方法

jqueryで遷移する方法をご紹介します。画面遷移する場合、javascriptでは「window.location.href」と記述しjQueryだと「location.href」で遷移することができます。今回はすべてjQueryで書いて...
javascript

jQueryでマウスカーソルの位置を取得する方法

マウスカーソルの取得でよく使う値は、トップからの位置ぐらいなものですが知っておくと便利な、色々な場所からのカーソル値の取得方法のご紹介です。さらに最後に、カーソルの値を使った面白いウェブサイトのご紹介もあります。カーソルの値だけ取れてもつま...
CSS

三角形の作り方|CSS

CSSで上向き、下向き、右、左向きの三角形の作り方のご紹介です。三角形を作るうえで必要になってくるプロパティが「border」だ。これが、またよくわからない原理で三角形が作られているのでその辺りも解説していこうと思います。borderで三角...
javascript

jQueryでページ内リンクを固定ヘッダー分ずらす方法

昨日、「スムーススクロールでページ内リンクをそっこう実装できるjQuery」を紹介しましたが、固定ヘッダーがあると、その分ずらさなくちゃいけない。。。。すごい手間。今回はそんな手間をそっこう解決できるjQueryのご紹介です。基本になるHT...
javascript

jQueryでスムーズにページ内リンクを移動する方法

ページ内のリンクになにも設定しない場合、アニメーション無しでカクッと切り替わっちゃって大変不格好。そんな不格好なページ内リンクを優しくするする~っと移動する方法をご紹介します。下のコードをjsファイルに張り付けると、ページ内リンクのaタグ全...
javascript

jQueryでmarginとpaddingを含めた値の取得方法

全ての親要素の値を取得するなら「.height()」でいい。でも、ちょくちょく「margin」や「padding」、「border」を含めた値が欲しくなる時があります。いつも忘れてしまうので、これを期に覚えようじゃないかと思いまして書いてゆ...
CSS

【CSS】文章(テキスト)の改行を禁止する方法

テキストの扱いって時に、厄介な時があるよね。これ以上文字入れたらレイアウト崩れちゃうとか、タイトルが長すぎて本来のデザインと違った感じになっちゃったり。それをCSSでスッと解決するテキストを改行させないCSSテクニックを紹介します。
javascript

jQueryでスル~っと表示/非表示する方法

1行で実現できるフェードイン・フェードアウトレシピの紹介です。表示させるボタンには、あらかじめCSSで「display:none;」をかけておきます。フェードインボタン 表示ボタン HTML<div class="fadein_btn"> ...
CSS

CSSだけで出来るボタンのホバーエフェクト集

javascriptは使わずにCSSとHTMLだけで装飾できるボタンのホバーエフェクトをご紹介します。コピペですぐ実装できるので、このページをブックマークしておくと便利です。薄くなるボタンボタン01HTML<div class="btn01...
CSS

ホバーで変化するテキストの作り方|CSS

ユーザーアクションで表示を切り替えるのってよく見ますよね。今回は、パソコンでマウスカーソルを持ってくと、文字を「ふわっ」と変化させるテクニックのご紹介です。
CSS

【CSS】疑似クラスの指定方法|最初・最後・n番目・奇数・偶数

cssで特定箇所のみにスタイリングしたい場合に効率的にかっこよく書ける疑似クラス特集です。奇数番目1,3,5,7,9…番目を装飾する時li:nth-child(odd) { color: #82fcc9;} リスト(奇数) リスト(偶数) ...