今回はちょっと変わった、おもしろいプラグインをまとめました。 程度を守ればエフェクトがあるとサイトも華やかに見えますね。 要素が揺れるアニメーションを実現！『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』を指定します。 これだ […]
インターネット上でファイルを共有できるオンラインストレージ。 データのバックアップに使用するのはもちろん、法人向けのビジネスプランの提供も増え、企業間でのデータ共有にも使われています。 最近ではWEBだけではなくスマートフォンでも確認できるなど、ますます便利なものが増えてきました。 今回はそんなオンラインストレージの中から、お勧めの物を厳選しました。 ぜひ導入の参考にしてください。 ※紹介しているオンラインストレージの機能や価格は2018年1月現在のものです。 1.Googl […]
社内での情報共有など、業務効率化にかかせない存在になってきたグループウェア。 4月からの新体制に向けて、自社の業務にあったグループウェアをお探しの企業も多いのではないでしょうか。 ただ、一口にグループウェアと言っても機能や価格はさまざまです。 今回はおすすめのグループウェア10つをご紹介します。 数があり過ぎて一体どのグループウェアを使ったら良いか分からない、という方のために最後に選ぶポイントもまとめてみましたので、グループウェア導入をご検討の方は参考にしてみてください。 ※ […]
今最も勢いのあるSNSである『Instagram』。（以後：インスタ） 最近だと飲食店をインスタで探す、なんて若い方も多いようです。 そのため、お店でアカウントを用意して集客に繋げる方法もでてきました。 お店側としても画像と簡単なテキストを投稿するだけで手軽に管理できるのがよいところです。 ただ、手軽に使えるのが良いところとはいえ集客につなげるには少しコツもいります。 今回はそのポイントをチェックしてみましょう！ Instagramで飲食店の集客力をアップするには？ ハッシュ […]
スクロールバーを装飾したい・safariで見た際に常にスクロールバーを表示させたい…という時、手軽に実現させる方法として『::-webkit-scrollbar』があります。 装飾した表示はChromeとsafariのみになってしまいますが、数行のCSSを加えるだけで簡単に実現できます。 HTML まず、スクロールさせるコンテンツを囲みます。 CSS 高さ指定をして『overflow: auto;』で要素をスクロールさせます。 次にスクロールバー自体の装飾の指定をしていきます […]
CSS3のanimationプロパティと@keyframesを使用すると、CSSのみでアニメーションをすることができます。 複雑なものでなければ簡単にできるので、まずは触ってみましょう。 今回は正方形を長方形にするアニメーションを作成します。 記述例 CSS（記述例） HTML（記述例） 基本の形はこうなります。 まず、@keyframesの記述の後に、アニメーションに対して任意の名前を付けます。 0%は最初に表示される形、100%には最後に表示される形を記述します。 次にア […]
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…』といったように反対側から並べる事もできちゃいます。 子要素の並び順を指定しよう-横並び- 左から右に並べる とりあえず通常通りの左から右に並べる方法です。 […]
仕様も安定していそうだしそろそろ現状のブラウザのシェアのことを考えるとガンガン使ってもいいかなと思うFlexbox。 各プロパティが豊富すぎてよく調べてしまうことになるので、使い方をまとめてみようと思います。 今回はとりあず入門ということで要素を横に並べる方法をご紹介します。 Flexboxって？ Flexboxとは、おおざっぱに言うと要素を簡単にレイアウトできるCSS3の新しい要素です。 今までは可変要素を同じ割合で並べたいときはcalcで計算。 横並びになっている複数個の […]
こんにちは。 今回は弊社の便利なWEBサービスやアプリをまとめました。 気になるものがありましたら触ってみていただけるとうれしいです！ ノミトモ ノミトモは一対一のサシ飲みから大人数の飲み会、合コンまで、飲み会を通じた出会いや仲間作りをサポートするコミュニケーションサイトです。 誰かと飲みたいけど身近な人と都合が合わない…という方に便利です。 毎日飲み会が開催されているので、ぜひ気になるものに参加してみてください！ Grmo 「グループウェアをもっとシンプルでリーズナブルに、 […]
こんにちは。工藤です。 今回はSVGアニメーションを気軽に作成できるLazy Line Painterについてご紹介します。 1.jQuery本体とjquery.lazylinepainterを読み込ませよう とりあえずはjQuery本体とGithubからダウンロードした『jquery.lazylinepainter』を読み込ませます。 2.SVG画像を読み込ませてサイト上からコードを作成 サイトをスクロールした箇所にSVG画像を読み込ませるエリアがあります。そちらにillu […]
こんにちは、工藤です。 今回はYouTubeの埋め込み動画をjsでコントロールする方法をご紹介します。 例えば埋め込みの際に『自動再生にした時にミュートにしたい』なんて場合はただ埋め込みではできないのでこちらの方法で実現させます。 IFrame Player APIを読み込ませよう まずjsを読み込みます。 以下は直接htmlの方に記述できる方法 またはjsの方で読み込ませる方法もあります。 お好みの方でどうぞ。 youtubeにアップした動画を表示させる 次にyoutube […]
割と使うタブの切り替え。 単純なものであれば自分でもコードを覚えれば書けないこともないのですがもうちょっと様々な効果を使ってみたい…なんて時もあります。 そんな時に役立つのが『Tabslet』です。 使い方 とりあえずダウンロードしましょう。下記サイトから『DOWNLOAD』ボタンでダウンロードしてください。 Tabslet ダウンロード後はcssとjsを読み込ませます。 ダウンロードしたフォルダにある『jquery.tabslet.js』とdemo＞stylesheetsフ […]
こんにちは、工藤です。 今回はフリーで使えるwebフォント「Google Fonts」を試してみました。 Noto Sansは結構お世話になっているのですが、よく考えると他のフォントはきちんと試したことが無かったもので…。 以降の画像は上段は通常のウェイト、下段は800のウェイトをかけています。 なんとなく表示の参考になりましたら幸いです。 Google Fonts + 日本語 早期アクセス M+ 1p フリーフォントでおなじみM+ 1pです。ちょっと角ばったゴシック体です。 […]
こんにちは、工藤です。 今回はコンテンツを魅力的に演出できるjQueryプラグインのまとめの2です。 [前回] コンテンツを魅力的に演出できるjQueryプラグインのまとめ Enllax.js パララックス効果を得られるプラグインです。 このプラグインの特徴は画像などの前景と背景を簡単な指定で再現できるところです。 軽量ですし、使い勝手のいいプラグインかと思います。 ScrollMagic こちらもスクロール位置をトリガーにアニメーションをしてくれるパララックス効果 […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part9です。 バックナンバー 知っておくと便利なcssの小技 part8 知っておくと便利なcssの小技 part7 知っておくと便利なcssの小技 part6 ナビをhoverしたときに、中央から線を出す ナビなどをhoverしたときに、テキスト下部の中央から線が表示されるあれです。 なんとなくおしゃれになります。 ソースは一見複雑そうですが、登録しておけばちょっとだけ値などを変えるだけで簡単に […]
運営会社:株式会社8bit
制作サービス
運営サービス
