マークアップ

マークアップ

flexboxとmargin: auto;を使ってレイアウトを組んでみよう

レイアウトを組むのに便利な『flexbox』。 今回は『flexbox』と『margin: auto;』を使用していい感じにレイアウトを組んでみましょう。 左に3つの要素、右に1つの要素を置きたい このレイアウトだと左側の3つをさらにdivなどで囲み『justify-content: space-between;』を一緒に指定する方法などが考えられます。 ただその分余計な囲みが増えてしまう、ということでもあります。 そのため一番最後の要素(右側)の要素に対して『margin- […]

マークアップ

『toggleClass』を使ったアコーディオンを作る(heightでアニメーションが効かないのを解決)

jQueryでアコーディオンを実現したい、ということはよくあると思います。 実現したいときは単純に『slideToggle』を使うのが早いです。 ただ、いろんな都合によりアコーディオンをcssの切り替え『toggleClass』で実現したいということがあるかもしれないです。 そんな時にちょっとだけ悩んだのでメモがてら書いておきます。 『slideToggle』を使ったアコーディオン まずは『slideToggle』を使ったスタンダードなアコーディオンです。 cssで要素を非表 […]

マークアップ

レスポンシブサイトでjavascript(jQuery)の読み込みを切り替えよう

2021年現在、新規でWebサイトを作成する際はレスポンシブ対応するのがほとんどかと思います。 そんな時PCだけまたはスマホだけでjavascript(jQuery)の読み込みを行いたい時があるかと思います。 実はファイルに何行か追記するだけで簡単に切り分けができます。エラー回避やサイト軽量化のためにもやってみましょう。 ①画面サイズで切り分ける方法

画面サイズで切り分ける際はこのように記述します。cssのメデ […]

マークアップ

【IE11】flexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならない【解決方法】

IE11でflexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならないという現象が発生します。 元のコード HTML

CSS

これを参考に修正していきます。 解決方法 解決には高さ指定をIEのみ通常のheightで指定したりtable要素にしたり…等色々あります。 が、flex要素をさら […]

マークアップ

hover時などに使えるcssアニメーション集7選

ここ最近は前以上にアニメーションをcssに頼るようになってきた気がします。 今回は主にhover時のアニメーションのコードを配布してくださっているサイトをご紹介します。 使用時の注意事項などは各サイトをご覧ください。 Hover.css お馴染みHover.cssです。嫌味がなく使い勝手のいいアニメーションがそろっています。 CSS ANIMO hoverとローディングのアニメーションがそろっています。 要素をクリックするとコードのコピーができます。hoverした時に下線を引 […]

マークアップ

『Animista』でいろいろなcssアニメーションを作ろう!

cssアニメーションを使いたいけれど、細かく調整したりする時間がない!という時ありますよね…。 そんな時は『Animista』を使って気軽にcssアニメーションを使ってみましょう! 早速使ってみよう ページを開くと、上にアニメーションの大まかな分類があります。  BASIC拡大縮小や回転系のアニメーション  ENTRANCES要素が表示されるときのアニメーション  EXITS要素が消えてしまうときのアニメーション  TEXTテキストのアニメーション  ATTENTION要素が […]

マークアップ

【工数節約!】レスポンシブサイトにおける一番楽なフォントサイズ指定

年々増えていく、フォントサイズを指定する単位。 「px」を基本として、「vw」と「vh」が使えるようになったと思ったら、気が付くと「rem」という単位もあったり、煩雑としてきました。 今回は私がレスポンシブサイトを構築する際、一番楽だと思うフォントサイズ設定を紹介します。 決め手は「rem」と「vw」 CSSでまずは基準となるフォントサイズを決めます。下記のように設定します。

そして、個々のCSSを記述していく […]

マークアップ

CSSでvideoタグを切り抜いて好きな形に表示する

今日はvideoタグを好きな形に切り抜きしてみましょう。 実際に表示するとこんな感じです。 <円形に切り抜いた場合> どうやって切り落とす? これが実は、CSSの「clip-path」という1行を追加するだけで切り落としが可能です。 <CSS>

circleは円形です。 他にも、楕円形・五角形など、色々な形にすることができます。とても簡単ですね。 ジェネレーター 手打ちで数値を調整してもいいのですが、ジェネレー […]

マークアップ

pictureタグで画像形式(webpなど)とレスポンシブ切り替え対応をしよう

表示速度などの問題でwebp形式を使いたいけれど対応していないブラウザもあるし、レスポンシブの問題もあるしなーという時はpictureタグでうまく切り替えます。 コード とりあえずコードです。

第1候補で『sample.webp』を表示させます。画面を縮めた時にはほかの画像を表示させたいので、メディアクエリでmin-widthを設定します(次で設定するmax-widthの1つ前の数字)。 第2候補で画面を768 […]

マークアップ

【AMP対応】結局どうやるの?はじめてのAMP対応

私が初めてAMP対応に着手しようとした時、複数のサイトを渡り歩いて情報を集めながら進めていかなければならない状態でした。「で、結局どうすればいいの」となったので、忘備録も兼ねてまとめていきたいと思います。速くなる仕組みなどは今回は省略します。 作る前に知っておいてほしい仕様 項目が多くなってしまったのですが、着手する前にAMPの制約を確認しましょう。 作成方法にお急ぎの方はジャンプ AMPの公式仕様に沿ってタグを記述する必要がある AMPの公式仕様はこちらのサイト(https […]

マークアップ

AMP非対応のJSをiframeで使用する

昨今、SEOで絶対に無視できないのがAMP。 表示速度を爆速にする分、様々な制約が設けられていますが、Google Chartsなどの部分的なものであれば同ページ内に表示が可能です。 部分的なJS表現をiframeで追加する 分かってしまえばやり方は単純。AMP非対応の箇所のみiframeを使用します。 下記は弊社で運営している飲み会マッチングサービスのノミトモ。飲み会の募集が下にするする流れていくようなアニメーションを採用していますが、オリジナルで組んだJSアニメーションな […]

マークアップ

ふわふわの泡の背景を作成できるJS「bubbly-bg.js」

ページのbackgroundにふわふわと泡が漂うような表現ができる「bubbly-bg.js」を紹介します。 公式デモサイト 使用してみたところ、仕様は以下のようです。 ・背景は固定。スクロールのある縦長のページでも、100vw、100vhでfixed。 ・スマートフォン端末でも動作。(とりあえず手元のiPhoneXとiPadで動作確認しました。) ・泡の個数、色、向き、速さ、大きさ、ぼかし具合、アルファ値、背景グラデーションなど細かなカスタマイズが可能 ・背景のグラデーショ […]

Webサービス

自社サービス「ノミトモ」をAMP対応!劇的に改善するPageSpeed Insightでの評価Before/After

AMPとは? 近年、Googleが推奨しているAMPをご存じでしょうか。 AMP対応しているページを事前にGoogleがキャッシュしておくことによって、閲覧者がページリクエストした際に、Googleが持っているキャッシュを表示するため、素早く表示できるという仕組みです。 通常、ページの表示速度を調べる際は、GoogleのPageSpeed Insightなどにサイトをかけると思いますが、AMP対応前と後では大きく評価が改善したりします。特にモバイルでの評価が顕著です。 「TO […]

マークアップ

スマホやタブレットのソフトウェアキーボードを表示させないようにする

キャンセルの方法 スマホやタブレットなどのタッチデバイスで、ソフトウェアキーボードが立ち上がるのをキャンセルしたい場合、inputに「readonly=”readonly”」属性を追加すると、キーボードが非表示になります。

利用シーンとしては、iPadでツールを作成したい場合などに使えると思います。 予約システムなどであれば、電話番号の入力や電卓機能を独自のテンキーを実装できると入力しや […]

マークアップ

jquery.balloon.js をタッチデバイスとPCの両方に対応する書き方

マウスホバーするとフキダシでテキストが表示される「jquery.balloon.js」。 シンプルで大変使い勝手の良いJSですが、単純に呼び出しただけではタブレットやスマートフォンなどのタッチデバイスで動作がうまくいきません。 書き方を少し工夫して、スマートフォンやタブレットのタッチデバイスに対応させます。PCではマウスホバー、タッチデバイスではタップで表示非表示するようにします。 [ 公式JSファイルのDLはこちらから ] [ 私が作った簡単なデモはこちら ] 使い方 01 […]

マークアップ

知っておくと便利なcssの小技 part16 (セレクタの使い方編)

今回は知っておくと便利なcssの小技 part16 セレクタの使い方編です。 バックナンバー 知っておくと便利なcssの小技 part15 知っておくと便利なcssの小技 part14 知っておくと便利なcssの小技 part13 子セレクタ(親要素 > 子要素)の使い方 子セレクタとは、対象の親要素の直下にある子要素に対してのみスタイルを適用するセレクタです。 孫要素は対象になりません。 今回は親要素の直下の子要素に対してのみ、文字を赤色にしてみます。 HTML [cray […]

マークアップ

カーソルが増える!?Dreamweaverの意外と知らない機能

長くDreamweaverを使っている方こそ、意外と知らないこの機能。 最近といっても2017年時点に追加された機能なのですが、マルチカーソルという機能です。 なんとカーソルが伸びる! Alt を押しながら縦にドラッグで伸びます。始点からしっかり引っ張るのが上手に伸ばすコツです。 増える! Ctrl を押しながらクリックで好きな位置にカーソルを増殖できます。 Emmetなどは有名なのでみなさんご存じかと思うのですが、細かな機能のアップデートは見逃していたりするのはよくあること […]

マークアップ

知っておくと便利なcssの小技 part15

今回は知っておくと便利なcssの小技 part15です。 バックナンバー 知っておくと便利なcssの小技 part14 知っておくと便利なcssの小技 part13 知っておくと便利なcssの小技 part12 テキストが空の場合、要素を表示させない テキストがないときにpaddingだけが残って中途半端に表示されてしまう、なんてことがあったりします。 こういう時はCMSで生成されたりしていることが多いので、phpで処理するのが1番よいかとは思いますがそれが難しいときはcss […]

マークアップ

知っておくと便利なcssの小技 part14(テキストエリア編)

今回は知っておくと便利なcssの小技 part14です。 テキストエリアの装飾について紹介します。 バックナンバー 知っておくと便利なcssの小技 part13 知っておくと便利なcssの小技 part12 知っておくと便利なcssの小技 part11 テキストエリアのリサイズをさせない テキストエリアの右下ですが、ブラウザによってはリサイズ用の領域がありますよね。 リサイズをできると場合によってはレイアウトが崩れていやだ…なんてこともあるかもしれないのでこれを無効にする方法 […]

マークアップ

【jQuery】ボタン連打の対策をする(処理中は追加処理をキャンセルする)

「やめて!そのボタンは連打しないで!」 そのつらい気持ち、よくわかります。 今回はフラグを立てて、ボタン連打の対策をやってみましょう。 jQuery <処理のルート> cancelFlag という変数を定義しておき、値が「0」の場合は処理開始、「1」の場合は処理キャンセル、という判定を追加するだけです。意外とシンプル。

上記の例だと、クリックイベントが着火した直後に cancelFlag に「1」を代入、フラグ […]

マークアップ

Youtube埋め込みプレーヤーでできるカスタマイズまとめ

使用できるパラメーター(2018年10月現在) それぞれのパラメータですが、ブラウザによって効いたり効かなかったりします。 また、スマートフォン端末では、端末仕様によって動作に制限がある場合があります。(例:必ず全画面表示の状態で再生されてしまう、など) ※パラメータの使い方はこちら ※各パラメーターのデモはこちら 「全画面表示」ボタンを非表示に パラメータ 説明 デフォルト値 使用例 fs 全画面表示ボタンを非表示にする。0で非表示、1で表示。 1 ?fs=0 Youtub […]

マークアップ

知っておくと便利なcssの小技 part13

今回は知っておくと便利なcssの小技 part13です。 バックナンバー 知っておくと便利なcssの小技 part12 知っておくと便利なcssの小技 part11 知っておくと便利なcssの小技 part10 テキストが空の時のみ、『content』でURLを取得し表示させる リンクのテキストがHTML上で空の時に、contentでURLを取得して表示させてくれる方法です。 ベタでURLを貼るようなリンク集…などには使えると思います。 HTML [crayon-61ed50 […]

マークアップ

サイトに彩りを!ちょっと変わったおもしろいプラグインのまとめ

今回はちょっと変わった、おもしろいプラグインをまとめました。 程度を守ればエフェクトがあるとサイトも華やかに見えますね。 要素が揺れるアニメーションを実現!『CSShake』   このプラグインを使用するとホバー等をした時に要素が揺れるアニメーションを付けることができます。 あまり揺れさせすぎると怖い感じになってしまうので注意してください…。 おもしろ系のサイトなんかではバンバン使えそうですね。 ホバー時に他の要素をぼかす『Item Blur Effect with CSS3 […]

マークアップ

first-childとfirst-of-typeセレクタの違いってなに?違いを見てみよう!

コーディングをしているとよくお世話になるfirst-childとfirst-of-typeセレクタ。 ただfirst-childとfirst-of-typeの違いって最初のうちってよくわからないですよね。 今回はその2つの違いについてお話しようと思います。 first-childが効かない?そんな時はfirst-of-typeで! 例えば上の画像のようにpタグの中で、1番最初にあるものに色を付けたいとします。 とりあえずHTMLは以下のような感じです。 HTML [crayo […]

マークアップ

知っておくと便利なcssの小技 part12 -複数の背景要素-

今回は個人的に知っておくと便利だなと思うcssの小技part12 -複数の背景要素-です。 バックナンバー 知っておくと便利なcssの小技 part11 知っておくと便利なcssの小技 part10 知っておくと便利なcssの小技 part9 cssで複数の背景画像・背景色を指定する 1箇所の背景に複数の画像や色を指定したいという事があるかと思います。そんな時に使える方法です。 グラデーションもあるので複雑なように見えるかもしれませんが、案外簡単です。 HTML [crayo […]

1 2 3 6