マウスホバーするとフキダシでテキストが表示される「jquery.balloon.js」。 シンプルで大変使い勝手の良いJSですが、単純に呼び出しただけではタブレットやスマートフォンなどのタッチデバイスで動作がうまくいきません。 書き方を少し工夫して、スマートフォンやタブレットのタッチデバイスに対応させます。PCではマウスホバー、タッチデバイスではタップで表示非表示するようにします。 [ 公式JSファイルのDLはこちらから ] [ 私が作った簡単なデモはこちら ] 使い方 01 […]
今回は知っておくと便利なcssの小技 part16 セレクタの使い方編です。 バックナンバー 知っておくと便利なcssの小技 part15 知っておくと便利なcssの小技 part14 知っておくと便利なcssの小技 part13 子セレクタ（親要素 > 子要素）の使い方 子セレクタとは、対象の親要素の直下にある子要素に対してのみスタイルを適用するセレクタです。 孫要素は対象になりません。 今回は親要素の直下の子要素に対してのみ、文字を赤色にしてみます。 HTML CSS 隣 […]
長くDreamweaverを使っている方こそ、意外と知らないこの機能。 最近といっても2017年時点に追加された機能なのですが、マルチカーソルという機能です。 なんとカーソルが伸びる！ Alt を押しながら縦にドラッグで伸びます。始点からしっかり引っ張るのが上手に伸ばすコツです。 増える！ Ctrl を押しながらクリックで好きな位置にカーソルを増殖できます。 Emmetなどは有名なのでみなさんご存じかと思うのですが、細かな機能のアップデートは見逃していたりするのはよくあること […]
今回は知っておくと便利なcssの小技 part15です。 バックナンバー 知っておくと便利なcssの小技 part14 知っておくと便利なcssの小技 part13 知っておくと便利なcssの小技 part12 テキストが空の場合、要素を表示させない テキストがないときにpaddingだけが残って中途半端に表示されてしまう、なんてことがあったりします。 こういう時はCMSで生成されたりしていることが多いので、phpで処理するのが1番よいかとは思いますがそれが難しいときはcss […]
今回は知っておくと便利なcssの小技 part14です。 テキストエリアの装飾について紹介します。 バックナンバー 知っておくと便利なcssの小技 part13 知っておくと便利なcssの小技 part12 知っておくと便利なcssの小技 part11 テキストエリアのリサイズをさせない テキストエリアの右下ですが、ブラウザによってはリサイズ用の領域がありますよね。 リサイズをできると場合によってはレイアウトが崩れていやだ…なんてこともあるかもしれないのでこれを無効にする方法 […]
「やめて！そのボタンは連打しないで！」 そのつらい気持ち、よくわかります。 今回はフラグを立てて、ボタン連打の対策をやってみましょう。 jQuery ＜処理のルート＞ cancelFlag という変数を定義しておき、値が「0」の場合は処理開始、「1」の場合は処理キャンセル、という判定を追加するだけです。意外とシンプル。 上記の例だと、クリックイベントが着火した直後に cancelFlag に「1」を代入、フラグを立てます。 そして処理が終了する際に「0」を代入し、フラグをおろ […]
使用できるパラメーター（2018年10月現在） それぞれのパラメータですが、ブラウザによって効いたり効かなかったりします。 また、スマートフォン端末では、端末仕様によって動作に制限がある場合があります。（例：必ず全画面表示の状態で再生されてしまう、など） ※パラメータの使い方はこちら ※各パラメーターのデモはこちら 「全画面表示」ボタンを非表示に パラメータ 説明 デフォルト値 使用例 fs 全画面表示ボタンを非表示にする。0で非表示、1で表示。 1 ?fs=0 Youtub […]
今回は知っておくと便利なcssの小技 part13です。 バックナンバー 知っておくと便利なcssの小技 part12 知っておくと便利なcssの小技 part11 知っておくと便利なcssの小技 part10 テキストが空の時のみ、『content』でURLを取得し表示させる リンクのテキストがHTML上で空の時に、contentでURLを取得して表示させてくれる方法です。 ベタでURLを貼るようなリンク集…などには使えると思います。 HTML CSS jsを仕込みそうなも […]
今回はちょっと変わった、おもしろいプラグインをまとめました。 程度を守ればエフェクトがあるとサイトも華やかに見えますね。 要素が揺れるアニメーションを実現！『CSShake』 このプラグインを使用するとホバー等をした時に要素が揺れるアニメーションを付けることができます。 あまり揺れさせすぎると怖い感じになってしまうので注意してください…。 おもしろ系のサイトなんかではバンバン使えそうですね。 ホバー時に他の要素をぼかす『Item Blur Effect with CSS3 […]
コーディングをしているとよくお世話になるfirst-childとfirst-of-typeセレクタ。 ただfirst-childとfirst-of-typeの違いって最初のうちってよくわからないですよね。 今回はその2つの違いについてお話しようと思います。 first-childが効かない？そんな時はfirst-of-typeで！ 例えば上の画像のようにpタグの中で、1番最初にあるものに色を付けたいとします。 とりあえずHTMLは以下のような感じです。 HTML このときなん […]
今回は個人的に知っておくと便利だなと思うcssの小技part12 -複数の背景要素-です。 バックナンバー 知っておくと便利なcssの小技 part11 知っておくと便利なcssの小技 part10 知っておくと便利なcssの小技 part9 cssで複数の背景画像・背景色を指定する 1箇所の背景に複数の画像や色を指定したいという事があるかと思います。そんな時に使える方法です。 グラデーションもあるので複雑なように見えるかもしれませんが、案外簡単です。 HTML css とり […]
今回は個人的に知っておくと便利だなと思うcssの小技part11 -ボーダー編-です。 バックナンバー 知っておくと便利なcssの小技 part10 知っておくと便利なcssの小技 part9 知っておくと便利なcssの小技 part8 線の最初だけ色を変える タイトルなどでよくあるボーダーの最初だけ色を変えるあれです。 今までは結構画像などでやることも多かったのですが、レスポンシブが多くなってからはcssでやってしまうのが一番いい感じですね。 HTML css まずは本体に […]
現象 flexboxを使用したページをIEで印刷すると改ページで要素が消える、というバグに遭遇しました。 最新のIE11でも再現したので、おそらくIEのバージョン関係なく起こっているかと思います。 このように1ページ目は平気なのですが、flexboxを使用した要素が改ページ後に真っ白になってしまいます。 対策 印刷用のcssの設定でflexbox部分の代わりにfloatやinline-blockを使用します。 作りによっては高さが揃わない等の悩みが出てくるかもしれませんがmi […]
今回は個人的に知っておくと便利だなと思うcssの小技part10 -画像編-です。 バックナンバー 知っておくと便利なcssの小技 part9 知っておくと便利なcssの小技 part8 知っておくと便利なcssの小技 part7 画像をcssでモノクロやセピアにする なんとcssだけで画像をモノクロやセピアにできます。大変便利です。 HTML css filterプロパティを使いモノクロに対しては『grayscale』を、セピアに対しては『sepia』を指定します。 これだ […]
スクロールバーを装飾したい・safariで見た際に常にスクロールバーを表示させたい…という時、手軽に実現させる方法として『::-webkit-scrollbar』があります。 装飾した表示はChromeとsafariのみになってしまいますが、数行のCSSを加えるだけで簡単に実現できます。 HTML まず、スクロールさせるコンテンツを囲みます。 CSS 高さ指定をして『overflow: auto;』で要素をスクロールさせます。 次にスクロールバー自体の装飾の指定をしていきます […]
構造化マークアップもSEO的に無視できなくなりつつある昨今ですが、イベント情報の構造化データをサイトで使用している方は要再チェックです。 Googleのガイドラインに、イベント情報の構造化データに「割引クーポン」を追加するのは違反であるとの記述が明確にされました。（2017年11月末） その他にもイベントと関係ない情報をイベントとしてマークアップすることをやめるように書かれています。 場合によっては、Google側からの手動対策の対象となるため、早めの修正が必要となります。検 […]
hreflangというタグ、ご存知でしょうか？実はこのタグ、多言語サイトを作る時に重要な動きをしてくれるタグなんです。 どうして必要なの？ 機会損失を防ぐ 例えば日英の2言語に対応しているサイトがあったとして、英語圏のユーザーがサイトを訪問した際に日本語が表示されてしまい、読めずに離脱してしまう…そんな状況。 そこでhreflangタグの出番ですが、このタグの作用は検索結果の画面で現れます。検索を行ったユーザーが使用する言語に合わせて、検索結果が返されるようになります。英語圏 […]
CSS3のanimationプロパティと@keyframesを使用すると、CSSのみでアニメーションをすることができます。 複雑なものでなければ簡単にできるので、まずは触ってみましょう。 今回は正方形を長方形にするアニメーションを作成します。 記述例 CSS（記述例） HTML（記述例） 基本の形はこうなります。 まず、@keyframesの記述の後に、アニメーションに対して任意の名前を付けます。 0%は最初に表示される形、100%には最後に表示される形を記述します。 次にア […]
GooglePlayのバッジ作成ツール。 Androidアプリをリリースし、サイトやブログにGooglePlayバッジを設置する時に、みんなが開くページです。 そのうちの、こちらの入力フォーム。 UTMソースとUTMキャンペーンの入力欄。 省略可って書いてあるし…と、なんとなくスルーしていませんか？ 実はこれ、キチンと使いこなせるとユーザー分析の際に役立ちます。 「公式サイトにはこのソース、ブログにはこのソース」などと使い分けることで、獲得したユーザーがどこのリンクから辿って […]
Flexboxを使いこなそう！の第5弾です。 [過去の記事] [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する- [第4回] Flexboxを使いこなそう！-水平方向の配置指定の仕方- 今回は垂直方向の配置指定についてです。 垂直方向の配置指定 [HTML] [CSS] こちらが基準になるHTMLになります。ここから垂直方向 […]
今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 以前紹介した記事はこちら hover時に素敵な動きを加えてくれるcss3アニメーション10選 今回は一部jsやSVGと組合せているものもあります。 また、一部IEや古いブラウザなどに対応していないものが多いので、そちらは各ページをご確認ください。 Creative Button Styles ボタンなどのhoverアニメーションに使えそうなアニメーションです。 押して楽しいボタンがいっぱいありま […]
Flexboxを使いこなそう！の第4弾です。 [過去の記事] [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する- 今回は水平方向の配置指定についてです。 通常でしたらfloatやtext-align等の指定を行いますが、Flexboxは独自の指定があります。 水平方向の配置指定 [HTML] [CSS] こちらが基準になるH […]
Webサイトで画面をスクロールすると、要素がフェード等のエフェクトがかかって出てくることがありますよね。 jQueryを使うことが主だと思うのですが、『AOS』を使うとjQuery不要で実装ができます。 AOSの使い方 とりあえずサイトからcssとjsをダウンロード、またはCDNでも配布されているのでそちらを読み込みます。 CSSの読み込み jsの読み込み CSSはhead内に、jsはbody内で読み込ませてください。 あとは読み込ませた後ろにAOS.init()の記述をして […]
Flexboxを使いこなそう！の第3弾です。 [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- 今回は子要素の折り返しについて書いていきます。 子要素の折り返し まずは折り返しについてです。 Flexboxは『並べる』ことを前提にした機能なので、デフォルトのままだと外側のサイズ指定したボックスから要素がはみ出してもそのまま横に並び続けてしまいます。 とりあえずどんな感じになるのか見てみましょう。 […]
Flexboxを使いこなそう！の第2弾です。 [前回] Flexboxを使いこなそう！-基本の書き方- 今回は子要素の並び順の指定の仕方についてです。 並びの指定については『flex-direction』プロパティを使っていきます。 これを使えば『1,2,3,4…』と並んだ子要素を『4,3,2,1…』といったように反対側から並べる事もできちゃいます。 子要素の並び順を指定しよう-横並び- 左から右に並べる とりあえず通常通りの左から右に並べる方法です。 […]
運営会社:株式会社8bit
制作サービス
運営サービス
