はてなブックマーク

ここ最近は前以上にアニメーションをcssに頼るようになってきた気がします。 今回は主にhover時のアニメーションのコードを配布してくださっているサイトをご紹介します。 使用時の注意事項などは各サイトをご覧ください。 Hover.css サイトへ お馴染みHover.cssです。嫌味がなく使い勝手のいいアニメーションがそろっています。 CSS ANIMO サイトへ hoverとローディングのアニメーションがそろっています。 要素をクリックするとコードのコピーができます。hoverした時に下線を引くアニメーションなどでもいくつかパターンを用意してくれています。 Magic Animations CSS3 サイトへ hoverだけじゃなくてスクロール時などにも使えそうなアニメーションがそろっています。 ちょっと癖は強めですが、インパクトがあります。 Css Effects サイトへ hover

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

tax_queryはこんな時に便利 例えばこんな時。 [図A] 図のように、条件に合致する記事だけ取得したりすることができます。 カテゴリで絞り込んだ一覧ページを作ったりする際に便利です。 tax_queryで記事を取得 図Aの例の場合、下記のように記述すると記事一覧を取得できます。 <pre class="lang:php decode:true " >&lt;?php $tax_posts = get_posts( array( 'post_type' =&gt; 'qa', //投稿タイプ 'tax_query' =&gt; array( array( 'taxonomy' =&gt; 'qa_cat', //カスタムタクソノミー 'field' =&gt; 'slug', 'terms' =&gt; array( 'catX' ), //タクソノミーターム ) ) )); ?&gt

Webサイト制作の現場において、スマートフォン向けサイトは、もはや欠かせない存在となっています。スマートフォンの所有率はなんと76.0%（出典:総務省/2016年）。今後もニーズはさらに高まっていくでしょう。 既存のPCサイトをレスポンシブ化したい！というご相談が増えつつある 一から制作するよりも費用が抑えられるうえ、期間も手短に済むため、ご要望として多くあります。 元となるPCサイトの組みかたによって対策がまちまちなため、制作前に気づかなかった落とし穴にはまることがあります。 1.タブレット非対応の場合に崩れが発生！？ タブレット非対応にする場合、タブレットでの表示に課題が生まれます。 通常レスポンシブでは横幅が可変になるため、崩れが起きないように%で指定を行います。ですが、既存のPCサイトは多くの場合px幅固定でCSSが組まれています。 ブレークポイントを750pxの1点に設定した場合

.scrollArea{ height: 200px; overflow: auto; padding-right: 20px; } /*スクロールバーの横幅指定*/ .scrollArea.deco::-webkit-scrollbar { width: 15px; } /*スクロールバーの背景色・角丸指定*/ .scrollArea.deco::-webkit-scrollbar-track { border-radius: 10px; background: #f2f2f2; } /*スクロールバーの色・角丸指定*/ .scrollArea.deco::-webkit-scrollbar-thumb { border-radius: 10px; background:#09C9D9; }

今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 以前紹介した記事はこちら hover時に素敵な動きを加えてくれるcss3アニメーション10選 今回は一部jsやSVGと組合せているものもあります。 また、一部IEや古いブラウザなどに対応していないものが多いので、そちらは各ページをご確認ください。 Creative Button Styles DEMO サイト ボタンなどのhoverアニメーションに使えそうなアニメーションです。 押して楽しいボタンがいっぱいあります。 Creative Link Effects DEMO サイト こちらもボタンなどのhoverアニメーションに使えそうなアニメーションです。 動き自体はシンプルながらもおしゃれで使い勝手もよさそう。 Button Styles Inspiration DEMO サイト またまたボタンなどのhove

サイトへ Github Webサイトで画面をスクロールすると、要素がフェード等のエフェクトがかかって出てくることがありますよね。 jQueryを使うことが主だと思うのですが、『AOS』を使うとjQuery不要で実装ができます。 AOSの使い方 とりあえずサイトからcssとjsをダウンロード、またはCDNでも配布されているのでそちらを読み込みます。 CSSの読み込み

仕様も安定していそうだしそろそろ現状のブラウザのシェアのことを考えるとガンガン使ってもいいかなと思うFlexbox。 各プロパティが豊富すぎてよく調べてしまうことになるので、使い方をまとめてみようと思います。 今回はとりあず入門ということで要素を横に並べる方法をご紹介します。 Flexboxって？ Flexboxとは、おおざっぱに言うと要素を簡単にレイアウトできるCSS3の新しい要素です。 今までは可変要素を同じ割合で並べたいときはcalcで計算。 横並びになっている複数個の要素の高さが不確定、かつ高さを全て一番高いものに合わせたい、なんて時にはjsを使っていたと思います。 それをFlexboxは簡単な記述で実現してくれます。 子要素をならべてみよう とりあえず上の画像のように、横に並べてみましょう。 HTML

当社では創業からいくつものWebサービスをリリースしては閉鎖して、ということを繰り返してきました。そんな中で、最近ではBtoBサービス、企業の日常業務で使えるWebサービスに力を入れています。 収益モデルはBtoBサービスですので、広告収入ではなくユーザー課金がメインです。 ありがたいことに、ここ最近でやっと課金してご利用いただけるユーザー様が出てきました。 この記事で紹介するサービスは、具体的にいうと「Grmo(グルモ)」というグループウェアです。 (サービス紹介の記事ではないので、サービスの説明は割愛します。) グループウェアはすでに大手サービスも多々あり、完全に後発でサービスを開始したのですが、色々な試行錯誤をすることで、やっと課金して利用していただけるユーザー様が増えてきました。 とは言ってもまだまだ月に数件ですので、まだまだこれからですが、課金が発生するまでにここまででやってきた

割と使うタブの切り替え。 単純なものであれば自分でもコードを覚えれば書けないこともないのですがもうちょっと様々な効果を使ってみたい…なんて時もあります。 そんな時に役立つのが『Tabslet』です。 使い方 とりあえずダウンロードしましょう。下記サイトから『DOWNLOAD』ボタンでダウンロードしてください。 Tabslet ダウンロード後はcssとjsを読み込ませます。 ダウンロードしたフォルダにある『jquery.tabslet.js』とdemo＞stylesheetsフォルダ内の『styles.css』を読み込ませましょう。

こんにちは、工藤です。 今回はフリーで使えるwebフォント「Google Fonts」を試してみました。 Noto Sansは結構お世話になっているのですが、よく考えると他のフォントはきちんと試したことが無かったもので…。 以降の画像は上段は通常のウェイト、下段は800のウェイトをかけています。 なんとなく表示の参考になりましたら幸いです。 Google Fonts + 日本語 早期アクセス M+ 1p フリーフォントでおなじみM+ 1pです。ちょっと角ばったゴシック体です。 ウェイトの差は分かりやすいですね。 DEMO Rounded M+ 1c M+ 1pが丸みを帯びたフォントです。 細いままだとM+ 1pとの差はわかりにくいですが、ウェイトが大きくなるとわかりやすくなります。 DEMO はんなり明朝 女性的な柔らかさがあるはんなり明朝です。ウェイトはかけない方がきれいな印象です。 漢

thやtdなどに指定するわけではなく、そのままtableに対して『table-layout: fixed;』を設定してしまいます。 これですぐに均等配置になります。 ちなみにtableのデフォルトは『table-layout: auto;』なので、例えばレスポンシブでスマートフォン用のサイズになった時に元に戻したいというときはこちらを指定してください。 画像を丸く切り抜きたい アイコン画像などを丸く切り抜きたいときに使える小技です。 DEMO

「itemtype=”http://schema.org/Person”」これは人物の情報です、「itemprop=”name”」これは名前ですetc… こんな風に、より詳しい情報を検索エンジンに伝えているわけですね。 設定するメリットは？ 検索エンジンのクローラーがサイトを周回する時に、内容を解析しやすくなり、将来的にSEOにも関わってくるのではと期待されています。 また、リッチスペニットといって、検索結果一覧の画面で特別な表示がなされます。 食べログなどでよく見る「評価」「価格帯」「営業時間」や、「パンくず」、レシピ投稿サイトの記事に使用される「料理の画像」なども対象です。 こういう表示ですね。 検索した時に違う表示になる目立つアレ、こういうことだったのですね。 使い方 ◆itemscope プロパティは、マイクロデータの範囲を示します。どんなタグにも記述することが可能です。 常に「

こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html <table class="table01"> <thead> <tr> <th></th> <th>ヘッダー1</th> <th>ヘッダー2</th> <th>ヘッダー3</th> </tr> </thead> <tbody> <tr> <th>項目1</th> <td label="ヘッダー1"><p>項目1の内容<br /> これで長くなった時に対応できます。</p></td> <td label="ヘッダー2"><p>項目1の内容</

こんにちは、工藤です。 今回はローディングアイコを作成してくれるWebサービスをまとめました。 Webサービスだとリアルタイムで色やスピードなどをチェックできるのが嬉しいですね。 画像で作成 Loader Generator サイトへ シンプルで使い勝手のいいローディングのGIF画像を作ってくれます。 作成の際の操作もシンプルで分かりやすいです。 Preloaders サイトへ 無料・有料含めかなりの数のローディングが用意されています。 画像の作成もGIFとPNGで選んで用意できるのがいいですね。 Loadinfo サイトへ かわいらしい画像が用意されています。 ちょっと気づきにくいかもと思ったのですが、ボタンの設定後に下の『generate』ボタンを押すと画像の作成ができます。 Ajaxload サイトへ こちらもシンプルでベーシックな画像を用意してくれます。 CSSで作成 SpinKi

こんにちは、工藤です。 今回はスマートフォン用メニューのプラグインをまとめました。 実用的なものから動きが面白いなと思ったものまで様々です。 アコーディオンメニュー slicknav サイトへ 個人的にかなりお世話になっている『slicknav』です。 デバイスごとの不具合が少なく、カスタマイズもしやすく重宝しています。 こちらの特徴は、ブレイクポイント以下になると指定した要素を複製してくれるところです。 例えば『#mainnavi』を指定していると、その中の要素をブレイクポイント以下になったとき『.slicknav_menu』の要素として複製してくれます。 このおかげで要素は1つなのに『PC表示の時』『スマートフォン表示の時』のそれぞれ見た目に対して、かなり厳密に、自由に設定を行うことができます。（分かり辛くてすみません） ごちゃごちゃと説明してしまいましたが、設定などはいたってシンプル

今年に入ってから新しいお客さまとの受託制作や、社内のWebサイトの制作を行っていて、デザインの進め方の難しさを改めて痛感しています。 デザインに対してのこだわりというのは、担当者によってかなり温度差があり、自分も含めてこだわりの強い方だとデザイン制作はかなり難航します。 難航する理由として、ひとつはデザイナーの個性やセンスとの相性問題があります。 デザイナーも人間ですので、その人なりの個性やセンスがあります。そこが合わないとなかなかお客様の欲しいデザインに近づけなかったりします。個性の問題については「直せ！」と言われてもしょうがない部分もありますので、その辺りをうまくサポートして方向調整するのはディレクターの進め方も大きいのではないかと思います。 現在当社のWebサイトもリニューアル作業をしているのですが、これがなかなかまとまらない。 何回もやり直していて、「これが受託案件だったら恐ろしい

日々めまぐるしく進化していくWeb技術。Webブラウザ達もアップデートを重ねるごとに便利になっていきます。 数年前はFirefoxやChromeで必須だったベンダープレフィックスも、そろそろ必要ないものもでてきているのではと思い、勉強も兼ねて改めて調べ直してみることに。 ※下記は全て2016年07月12日時点のものです。 opacity まずは簡単なのから。懐かしいですね。IE8の全盛期、悩まされたものですね。 過去のIE達に特別に対応するのでなければ、ベンダープレフィックスは必要ないでしょう。 Can I use border-radius Opera Miniが非対応と出ていますが、日本国内シェアは0%とも言いますし、こちらももう問題ないでしょう。 Can I use box-shadow こちらも同様。 Can I use animation いつの間にかanimationまで。 「

こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part4をご紹介します。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 display:inline-blockで要素を並べた時に隙間を作らない 以前の記事でさらっと説明してしまったので、改めてご紹介です。 display:inline-blockで要素を横に並べると『text-align』や『vertical-align』の要素が使えて実はfloatよりも便利だなあと思っています。 が、1つ問題があってどうしても要素同士に隙間ができてしまいます。 今回はそれを解決するための、個人的に一番簡単な方法をご紹介します。 DEMO /*特に何も指定していないリスト*/ ul.incorrectList li{ display:inli

CSSの、 :after 疑似要素で同時に使用される content プロパティ。 「content:attr();」という記述でそのタグのhref属性やtitle属性が取得できます。応用すればjsやPHPと絡めて動的で様々な使い方ができるなと思い、簡単にどんなことが可能か試してみたいと思います。

こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） DEMO GitHub（Boxer） GitHub（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよいかと思います。 『Boxer』の方が設置は簡単です。 このプラグインのいいところはレスポンシブに対応している、かつスマートフォンで見た場合には最適化して表示してくれるところです。 こんな感じにきれいに表示してくれるので重宝しています。 動画やイン