デザインを華やかに！Photoshopの花柄ブラシ10選
女性的なデザインでよく使うPhotoshopの花柄ブラシ。 今回は配布されている花柄ブラシを紹介していきます。 ※一応無料の物などを集めたつもりですが、規約が変わっている可能性もあるので使用の際にはチェックしてしてください。 Flower Brushes Part 3 – The Smell Of Roses ペンで書かれた花のブラシのセット。主線がある状態で塗り色を変えて使いたい時に便利そうです。 にじんだ水彩花柄 フェミニンな雰囲気を出せるにじんだ水彩の花柄の […]
知っておくと便利なcssの小技 part15
今回は知っておくと便利なcssの小技 part15です。 バックナンバー 知っておくと便利なcssの小技 part14 知っておくと便利なcssの小技 part13 知っておくと便利なcssの小技 part12 テキストが空の場合、要素を表示させない テキストがないときにpaddingだけが残って中途半端に表示されてしまう、なんてことがあったりします。 こういう時はCMSで生成されたりしていることが多いので、phpで処理するのが1番よいかとは思いますがそれが難しいときはcss […]
知っておくと便利なcssの小技 part13
今回は知っておくと便利な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セレクタ。 ただfirst-childとfirst-of-typeの違いって最初のうちってよくわからないですよね。 今回はその2つの違いについてお話しようと思います。 first-childが効かない？そんな時はfirst-of-typeで！ 例えば上の画像のようにpタグの中で、1番最初にあるものに色を付けたいとします。 とりあえずHTMLは以下のような感じです。 HTML このときなん […]
知っておくと便利なcssの小技 part12 -複数の背景要素-
今回は個人的に知っておくと便利だなと思うcssの小技part12 -複数の背景要素-です。 バックナンバー 知っておくと便利なcssの小技 part11 知っておくと便利なcssの小技 part10 知っておくと便利なcssの小技 part9 cssで複数の背景画像・背景色を指定する 1箇所の背景に複数の画像や色を指定したいという事があるかと思います。そんな時に使える方法です。 グラデーションもあるので複雑なように見えるかもしれませんが、案外簡単です。 HTML css とり […]
知っておくと便利なcssの小技 part11 -ボーダー編-
今回は個人的に知っておくと便利だなと思うcssの小技part11 -ボーダー編-です。 バックナンバー 知っておくと便利なcssの小技 part10 知っておくと便利なcssの小技 part9 知っておくと便利なcssの小技 part8 線の最初だけ色を変える タイトルなどでよくあるボーダーの最初だけ色を変えるあれです。 今までは結構画像などでやることも多かったのですが、レスポンシブが多くなってからはcssでやってしまうのが一番いい感じですね。 HTML css まずは本体に […]
【対策あり】flexboxを使用したページをIEで印刷すると改ページで要素が消える
現象 flexboxを使用したページをIEで印刷すると改ページで要素が消える、というバグに遭遇しました。 最新のIE11でも再現したので、おそらくIEのバージョン関係なく起こっているかと思います。 このように1ページ目は平気なのですが、flexboxを使用した要素が改ページ後に真っ白になってしまいます。 対策 印刷用のcssの設定でflexbox部分の代わりにfloatやinline-blockを使用します。 作りによっては高さが揃わない等の悩みが出てくるかもしれませんがmi […]
知っておくと便利なcssの小技 part10 -画像編-
今回は個人的に知っておくと便利だなと思うcssの小技part10 -画像編-です。 バックナンバー 知っておくと便利なcssの小技 part9 知っておくと便利なcssの小技 part8 知っておくと便利なcssの小技 part7 画像をcssでモノクロやセピアにする なんとcssだけで画像をモノクロやセピアにできます。大変便利です。 HTML css filterプロパティを使いモノクロに対しては『grayscale』を、セピアに対しては『sepia』を指定します。 これだ […]
【お勧めオンラインストレージ10選】個人から企業まで安心・便利に使えるオンラインストレージ。
インターネット上でファイルを共有できるオンラインストレージ。 データのバックアップに使用するのはもちろん、法人向けのビジネスプランの提供も増え、企業間でのデータ共有にも使われています。 最近ではWEBだけではなくスマートフォンでも確認できるなど、ますます便利なものが増えてきました。 今回はそんなオンラインストレージの中から、お勧めの物を厳選しました。 ぜひ導入の参考にしてください。 ※紹介しているオンラインストレージの機能や価格は2018年1月現在のものです。 1.Googl […]
【お勧めグループウェア10選】中小企業からスタートアップ企業まですぐに使えるグループウェア。
社内での情報共有など、業務効率化にかかせない存在になってきたグループウェア。 4月からの新体制に向けて、自社の業務にあったグループウェアをお探しの企業も多いのではないでしょうか。 ただ、一口にグループウェアと言っても機能や価格はさまざまです。 今回はおすすめのグループウェア10つをご紹介します。 数があり過ぎて一体どのグループウェアを使ったら良いか分からない、という方のために最後に選ぶポイントもまとめてみましたので、グループウェア導入をご検討の方は参考にしてみてください。 ※ […]
Instagramで飲食店の集客力アップ！押さえておきたいポイントを確認しよう！
今最も勢いのあるSNSである『Instagram』。（以後：インスタ） 最近だと飲食店をインスタで探す、なんて若い方も多いようです。 そのため、お店でアカウントを用意して集客に繋げる方法もでてきました。 お店側としても画像と簡単なテキストを投稿するだけで手軽に管理できるのがよいところです。 ただ、手軽に使えるのが良いところとはいえ集客につなげるには少しコツもいります。 今回はそのポイントをチェックしてみましょう！ Instagramで飲食店の集客力をアップするには？ ハッシュ […]
CSSでスクロールバーの装飾をしよう！
スクロールバーを装飾したい・safariで見た際に常にスクロールバーを表示させたい…という時、手軽に実現させる方法として『::-webkit-scrollbar』があります。 装飾した表示はChromeとsafariのみになってしまいますが、数行のCSSを加えるだけで簡単に実現できます。 HTML まず、スクロールさせるコンテンツを囲みます。 CSS 高さ指定をして『overflow: auto;』で要素をスクロールさせます。 次にスクロールバー自体の装飾の指定をしていきます […]
@keyframesアニメーションを使ってみよう-初心者用-
CSS3のanimationプロパティと@keyframesを使用すると、CSSのみでアニメーションをすることができます。 複雑なものでなければ簡単にできるので、まずは触ってみましょう。 今回は正方形を長方形にするアニメーションを作成します。 記述例 CSS（記述例） HTML（記述例） 基本の形はこうなります。 まず、@keyframesの記述の後に、アニメーションに対して任意の名前を付けます。 0%は最初に表示される形、100%には最後に表示される形を記述します。 次にア […]
Flexboxを使いこなそう！-垂直方向の配置指定の仕方-
Flexboxを使いこなそう！の第5弾です。 [過去の記事] [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する- [第4回] Flexboxを使いこなそう！-水平方向の配置指定の仕方- 今回は垂直方向の配置指定についてです。 垂直方向の配置指定 [HTML] [CSS] こちらが基準になるHTMLになります。ここから垂直方向 […]
hover時に素敵な動きを加えてくれるcss3アニメーション10選 part2
今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 以前紹介した記事はこちら hover時に素敵な動きを加えてくれるcss3アニメーション10選 今回は一部jsやSVGと組合せているものもあります。 また、一部IEや古いブラウザなどに対応していないものが多いので、そちらは各ページをご確認ください。 Creative Button Styles ボタンなどのhoverアニメーションに使えそうなアニメーションです。 押して楽しいボタンがいっぱいありま […]
Flexboxを使いこなそう！-水平方向の配置指定の仕方-
Flexboxを使いこなそう！の第4弾です。 [過去の記事] [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する- 今回は水平方向の配置指定についてです。 通常でしたらfloatやtext-align等の指定を行いますが、Flexboxは独自の指定があります。 水平方向の配置指定 [HTML] [CSS] こちらが基準になるH […]
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サービス・アプリのPR動画を作ってみました。
こんにちは。 今回は弊社の便利なWEBサービスやアプリをまとめました。 気になるものがありましたら触ってみていただけるとうれしいです！ ノミトモ ノミトモは一対一のサシ飲みから大人数の飲み会、合コンまで、飲み会を通じた出会いや仲間作りをサポートするコミュニケーションサイトです。 誰かと飲みたいけど身近な人と都合が合わない…という方に便利です。 毎日飲み会が開催されているので、ぜひ気になるものに参加してみてください！ Grmo 「グループウェアをもっとシンプルでリーズナブルに、 […]
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フ […]
運営会社:株式会社8bit
制作サービス
運営サービス
