投稿者: 工藤

マークアップ

jQuery不要!簡単にスクロールアニメーションを実現できるAOSを使おう

Webサイトで画面をスクロールすると、要素がフェード等のエフェクトがかかって出てくることがありますよね。 jQueryを使うことが主だと思うのですが、『AOS』を使うとjQuery不要で実装ができます。 AOSの使い方 とりあえずサイトからcssとjsをダウンロード、またはCDNでも配布されているのでそちらを読み込みます。 CSSの読み込み jsの読み込み CSSはhead内に、jsはbody内で読み込ませてください。 あとは読み込ませた後ろにAOS.init()の記述をして […]

マークアップ

Flexboxを使いこなそう!-子要素の折り返しを指定する-

Flexboxを使いこなそう!の第3弾です。 [第1回] Flexboxを使いこなそう!-基本の書き方- [第2回] Flexboxを使いこなそう!-子要素の並び順を指定する- 今回は子要素の折り返しについて書いていきます。 子要素の折り返し まずは折り返しについてです。 Flexboxは『並べる』ことを前提にした機能なので、デフォルトのままだと外側のサイズ指定したボックスから要素がはみ出してもそのまま横に並び続けてしまいます。 とりあえずどんな感じになるのか見てみましょう。 […]

マークアップ

Flexboxを使いこなそう!-子要素の並び順を指定する-

Flexboxを使いこなそう!の第2弾です。 [前回] Flexboxを使いこなそう!-基本の書き方- 今回は子要素の並び順の指定の仕方についてです。 並びの指定については『flex-direction』プロパティを使っていきます。 これを使えば『1,2,3,4…』と並んだ子要素を『4,3,2,1…』といったように反対側から並べる事もできちゃいます。 子要素の並び順を指定しよう-横並び- 左から右に並べる とりあえず通常通りの左から右に並べる方法です。 […]

マークアップ

Flexboxを使いこなそう!-基本の書き方-

仕様も安定していそうだしそろそろ現状のブラウザのシェアのことを考えるとガンガン使ってもいいかなと思うFlexbox。 各プロパティが豊富すぎてよく調べてしまうことになるので、使い方をまとめてみようと思います。 今回はとりあず入門ということで要素を横に並べる方法をご紹介します。 Flexboxって? Flexboxとは、おおざっぱに言うと要素を簡単にレイアウトできるCSS3の新しい要素です。 今までは可変要素を同じ割合で並べたいときはcalcで計算。 横並びになっている複数個の […]

Webサービス

当社で開発・運用しているWEBサービス・アプリのPR動画を作ってみました。

こんにちは。 今回は弊社の便利なWEBサービスやアプリをまとめました。 気になるものがありましたら触ってみていただけるとうれしいです! ノミトモ ノミトモは一対一のサシ飲みから大人数の飲み会、合コンまで、飲み会を通じた出会いや仲間作りをサポートするコミュニケーションサイトです。 誰かと飲みたいけど身近な人と都合が合わない…という方に便利です。 毎日飲み会が開催されているので、ぜひ気になるものに参加してみてください! Grmo 「グループウェアをもっとシンプルでリーズナブルに、 […]

Webデザイン

SVGアニメーションを気軽に作成!Lazy Line Painterを使おう

こんにちは。工藤です。 今回はSVGアニメーションを気軽に作成できるLazy Line Painterについてご紹介します。 1.jQuery本体とjquery.lazylinepainterを読み込ませよう とりあえずはjQuery本体とGithubからダウンロードした『jquery.lazylinepainter』を読み込ませます。 2.SVG画像を読み込ませてサイト上からコードを作成 サイトをスクロールした箇所にSVG画像を読み込ませるエリアがあります。そちらにillu […]

マークアップ

YouTubeの埋め込み動画をYouTube Player APIでコントロールしよう!

こんにちは、工藤です。 今回はYouTubeの埋め込み動画をjsでコントロールする方法をご紹介します。 例えば埋め込みの際に『自動再生にした時にミュートにしたい』なんて場合はただ埋め込みではできないのでこちらの方法で実現させます。 IFrame Player APIを読み込ませよう まずjsを読み込みます。 以下は直接htmlの方に記述できる方法 またはjsの方で読み込ませる方法もあります。 お好みの方でどうぞ。 youtubeにアップした動画を表示させる 次にyoutube […]

マークアップ

様々なタブの切り替えを簡単に実装!Tabsletを使おう

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

Webデザイン

フリーで使えるwebフォント「Google Fonts」を試してみました

こんにちは、工藤です。 今回はフリーで使えるwebフォント「Google Fonts」を試してみました。 Noto Sansは結構お世話になっているのですが、よく考えると他のフォントはきちんと試したことが無かったもので…。 以降の画像は上段は通常のウェイト、下段は800のウェイトをかけています。 なんとなく表示の参考になりましたら幸いです。 Google Fonts + 日本語 早期アクセス M+ 1p フリーフォントでおなじみM+ 1pです。ちょっと角ばったゴシック体です。 […]

マークアップ

コンテンツを魅力的に演出できるjQueryプラグインのまとめ2

こんにちは、工藤です。 今回はコンテンツを魅力的に演出できるjQueryプラグインのまとめの2です。 [前回] コンテンツを魅力的に演出できるjQueryプラグインのまとめ Enllax.js   パララックス効果を得られるプラグインです。 このプラグインの特徴は画像などの前景と背景を簡単な指定で再現できるところです。 軽量ですし、使い勝手のいいプラグインかと思います。 ScrollMagic    こちらもスクロール位置をトリガーにアニメーションをしてくれるパララックス効果 […]

マークアップ

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

こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part9です。 バックナンバー 知っておくと便利なcssの小技 part8 知っておくと便利なcssの小技 part7 知っておくと便利なcssの小技 part6 ナビをhoverしたときに、中央から線を出す ナビなどをhoverしたときに、テキスト下部の中央から線が表示されるあれです。 なんとなくおしゃれになります。 ソースは一見複雑そうですが、登録しておけばちょっとだけ値などを変えるだけで簡単に […]

マークアップ

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

こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part8です。 バックナンバー 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 知っておくと便利なcssの小技 part7 テーブルを均等配置にしたい テーブルを特にサイズ指定することなく、幅を全部均等にしたい!という時に便利なcssです。 thやtdなどに指定するわけではなく、そのままtableに対して『table-layout: fixed;』を設定してし […]

マークアップ

グラフを描画できるライブラリのまとめ

こんにちは、工藤です。 今回はグラフを描画できるライブラリをご紹介します。 vis.js ネットワーク図を引っ張った時の動きが面白くて個人的に好きです。 あまりに複雑なものでなければアニメーションもサクサク動きます。 D3.js   かなり自由度が高いライブラリらしく、とにかくサンプルの数が豊富にあります。 慣れている人は自分で細かい作りこみもできそうですね。 cola.js サンプルはネットワーク図のようなものが豊富な印象です。 ブラウザ上で数値など変更して確認できるのが便 […]

マークアップ

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

こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part7です。 今回はリセット系の2つです。 バックナンバー 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 safariのようなwebkit系のモバイル用ブラウザのフォーム要素をリセット safariのようなwebkit系のモバイル用ブラウザだと、input等のフォーム要素のデフォルトのデザインが強く残ってしまい、 […]

Webデザイン

WEB/アプリ作成に役立つ!フリーアイコンのまとめ

こんにちは、工藤です。 今回はフリーでアイコンを提供してくださっているサイトをご紹介します。 icooon-mono シンプルで使い勝手のいいアイコンだけではなく、ちょっと変わり種のものまで幅広く扱っているのが魅力的です。 なんと6000種類もあるようです。 pngからAiのようなベクター画像も用意されており、サイズや色を調整してからのダウンロードも可能です。 Icon rainbow 上記のicooon-monoさんと少々似ていますが、こちらはどちらかというとイラストのテイ […]

マークアップ

コンテンツを魅力的に演出できるjQueryプラグインのまとめ

こんにちは、工藤です。 今回は背景を魅力的に見せてくれるjsについてまとめてみました。 covervid   背景いっぱいに動画を表示してくれるプラグインです。 動画を使用するのにすごく軽量なところが魅力的です。 particles.js   幾何学模様を背景に表示してくれるプラグインです。 マウスの動きに合わせて幾何学模様が動いてくれてちょっと楽しいです。 模様の点の数や動きの等もカスタマイズが可能です。 StickyStack   複数のグラデーションが重なり合う背景を作 […]

マークアップ

【2017年版】CSSジェネレーターのまとめ

こんにちは、工藤です。 今回はCSSジェネレーターのまとめ2017年版です。 コーディングの際にいつも本当にお世話になっています…。 グラデーション Ultimate CSS Gradient Generator シンプルながらも使い勝手がよいジェネレーターです。 Blend 2色を選択して、中央の『Let’s Blend!』をクリックするとグラデーションが出来上がります。 右上のアイコンからコードの取得やグラデーションの設定を行うことができます。 動きが面白くて […]

マークアップ

コピペ可!CSSだけでレスポンシブテーブルをつくろう

こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html css ポイント レスポンシブ時にtheadは非表示にします。 tbody内thとtdはブロック要素にして、幅を100%に設定 […]

Webデザイン

Webデザインの参考に!ギャラリーサイトまとめ

こんにちは、工藤です。 今回はWebデザインの参考になる、ギャラリーサイトをまとめました。 日本語サイト I/O 3000 国内外問わずサイトが集められています。 メニューに『シャッフル』があるのが地味に魅力的です。 81-web MUUUUU.ORG 縦長のサイトをメインに掲載しているサイトです。 ARTNOC.COM S5-Style ページャーがないので、スクロールざっと見たい時なんかは便利なサイトです。 Japan Web Design Gallery Web Des […]

Webデザイン

ローディングアイコンを作成してくれるWebサービスのまとめ

こんにちは、工藤です。 今回はローディングアイコを作成してくれるWebサービスをまとめました。 Webサービスだとリアルタイムで色やスピードなどをチェックできるのが嬉しいですね。 画像で作成 Loader Generator シンプルで使い勝手のいいローディングのGIF画像を作ってくれます。 作成の際の操作もシンプルで分かりやすいです。 Preloaders 無料・有料含めかなりの数のローディングが用意されています。 画像の作成もGIFとPNGで選んで用意できるのがいいですね […]

マークアップ

スマートフォン用メニューのjQuery/CSS3プラグインまとめ【2017年版】

こんにちは、工藤です。 今回はスマートフォン用メニューのプラグインをまとめました。 実用的なものから動きが面白いなと思ったものまで様々です。 アコーディオンメニュー slicknav 個人的にかなりお世話になっている『slicknav』です。 デバイスごとの不具合が少なく、カスタマイズもしやすく重宝しています。 こちらの特徴は、ブレイクポイント以下になると指定した要素を複製してくれるところです。 例えば『#mainnavi』を指定していると、その中の要素をブレイクポイント以下 […]

マークアップ

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

こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part6をご紹介します。 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 括弧付きの数字リスト 単純に数字だけではなく、括弧付きでリストを作りたいときはありませんか? そんな時に使える方法です。 今回のポイントはcounter-incrementプロパティを使うことです。 まずliにcounter-incrementでカウ […]

マークアップ

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

こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part5をご紹介します。 今回はレスポンシブ関連のものです。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 ウィンドウサイズによってテキストを改行させたい レスポンシブの時、例えばテキストをPC表示の時は改行させてスマホ表示の時は改行を解除したい、なんて時に使える方法です。 便 […]

Webデザイン

簡単にスクリーンショットが撮れるChrome・Firefox向けプラグイン

こんにちは、工藤です。 今回はページ全体のスクリーンショットを撮るのに便利なプラグインをご紹介します。 Chrome・Firefox向けです。 Awesome Screenshot Plus ChromeFirefox 個人的にお世話になっている『Awesome Screenshot Plus』です。 とにかくかゆいところまで手が届きます。ブラウザの画面上はもちろん、デスクトップ画面までスクリーンショットを撮ることができます。 日本語化はされていないようなのですが、簡単な英語 […]

マークアップ

設定しておくと便利なcssのまとめ

こんにちは、工藤です。 今回は個人的に設定しておくと便利なcssをご紹介します。 box-sizing: border-box;をユニバーサルセレクタで設定 初期状態だとpaddingとborderの幅や高さを含めずに計算してしまうのですが、『box-sizing: border-box;』を記述することでpaddingとborderも含めて計算してくれます。 とても便利なクラスですし、初期状態がこれでもいいのでは…と思うのでユニバーサルセレクタで指定してしまいます。 これで […]

1 3 4 5 6 7 8