こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part8です。 バックナンバー 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 知っておくと便利なcssの小技 part7 テーブルを均等配置にしたい テーブルを特にサイズ指定することなく、幅を全部均等にしたい！という時に便利なcssです。 thやtdなどに指定するわけではなく、そのままtableに対して『table-layout: fixed;』を設定してし […]
こんにちは、工藤です。 今回はグラフを描画できるライブラリをご紹介します。 vis.js ネットワーク図を引っ張った時の動きが面白くて個人的に好きです。 あまりに複雑なものでなければアニメーションもサクサク動きます。 D3.js かなり自由度が高いライブラリらしく、とにかくサンプルの数が豊富にあります。 慣れている人は自分で細かい作りこみもできそうですね。 cola.js サンプルはネットワーク図のようなものが豊富な印象です。 ブラウザ上で数値など変更して確認できるのが便 […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part7です。 今回はリセット系の2つです。 バックナンバー 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 safariのようなwebkit系のモバイル用ブラウザのフォーム要素をリセット safariのようなwebkit系のモバイル用ブラウザだと、input等のフォーム要素のデフォルトのデザインが強く残ってしまい、 […]
こんにちは、工藤です。 今回はフリーでアイコンを提供してくださっているサイトをご紹介します。 icooon-mono シンプルで使い勝手のいいアイコンだけではなく、ちょっと変わり種のものまで幅広く扱っているのが魅力的です。 なんと6000種類もあるようです。 pngからAiのようなベクター画像も用意されており、サイズや色を調整してからのダウンロードも可能です。 Icon rainbow 上記のicooon-monoさんと少々似ていますが、こちらはどちらかというとイラストのテイ […]
こんにちは、工藤です。 今回は背景を魅力的に見せてくれるjsについてまとめてみました。 covervid 背景いっぱいに動画を表示してくれるプラグインです。 動画を使用するのにすごく軽量なところが魅力的です。 particles.js 幾何学模様を背景に表示してくれるプラグインです。 マウスの動きに合わせて幾何学模様が動いてくれてちょっと楽しいです。 模様の点の数や動きの等もカスタマイズが可能です。 StickyStack 複数のグラデーションが重なり合う背景を作 […]
こんにちは、工藤です。 今回はCSSジェネレーターのまとめ2017年版です。 コーディングの際にいつも本当にお世話になっています…。 グラデーション Ultimate CSS Gradient Generator シンプルながらも使い勝手がよいジェネレーターです。 Blend 2色を選択して、中央の『Let’s Blend!』をクリックするとグラデーションが出来上がります。 右上のアイコンからコードの取得やグラデーションの設定を行うことができます。 動きが面白くて […]
こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html css ポイント レスポンシブ時にtheadは非表示にします。 tbody内thとtdはブロック要素にして、幅を100%に設定 […]
こんにちは、工藤です。 今回はWebデザインの参考になる、ギャラリーサイトをまとめました。 日本語サイト I/O 3000 国内外問わずサイトが集められています。 メニューに『シャッフル』があるのが地味に魅力的です。 81-web MUUUUU.ORG 縦長のサイトをメインに掲載しているサイトです。 ARTNOC.COM S5-Style ページャーがないので、スクロールざっと見たい時なんかは便利なサイトです。 Japan Web Design Gallery Web Des […]
こんにちは、工藤です。 今回はローディングアイコを作成してくれるWebサービスをまとめました。 Webサービスだとリアルタイムで色やスピードなどをチェックできるのが嬉しいですね。 画像で作成 Loader Generator シンプルで使い勝手のいいローディングのGIF画像を作ってくれます。 作成の際の操作もシンプルで分かりやすいです。 Preloaders 無料・有料含めかなりの数のローディングが用意されています。 画像の作成もGIFとPNGで選んで用意できるのがいいですね […]
こんにちは、工藤です。 今回はスマートフォン用メニューのプラグインをまとめました。 実用的なものから動きが面白いなと思ったものまで様々です。 アコーディオンメニュー slicknav 個人的にかなりお世話になっている『slicknav』です。 デバイスごとの不具合が少なく、カスタマイズもしやすく重宝しています。 こちらの特徴は、ブレイクポイント以下になると指定した要素を複製してくれるところです。 例えば『#mainnavi』を指定していると、その中の要素をブレイクポイント以下 […]
こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part6をご紹介します。 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 括弧付きの数字リスト 単純に数字だけではなく、括弧付きでリストを作りたいときはありませんか？ そんな時に使える方法です。 今回のポイントはcounter-incrementプロパティを使うことです。 まずliにcounter-incrementでカウ […]
こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part5をご紹介します。 今回はレスポンシブ関連のものです。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 ウィンドウサイズによってテキストを改行させたい レスポンシブの時、例えばテキストをPC表示の時は改行させてスマホ表示の時は改行を解除したい、なんて時に使える方法です。 便 […]
こんにちは、工藤です。 今回はページ全体のスクリーンショットを撮るのに便利なプラグインをご紹介します。 Chrome・Firefox向けです。 Awesome Screenshot Plus ChromeFirefox 個人的にお世話になっている『Awesome Screenshot Plus』です。 とにかくかゆいところまで手が届きます。ブラウザの画面上はもちろん、デスクトップ画面までスクリーンショットを撮ることができます。 日本語化はされていないようなのですが、簡単な英語 […]
こんにちは、工藤です。 今回は個人的に設定しておくと便利なcssをご紹介します。 box-sizing: border-box;をユニバーサルセレクタで設定 初期状態だとpaddingとborderの幅や高さを含めずに計算してしまうのですが、『box-sizing: border-box;』を記述することでpaddingとborderも含めて計算してくれます。 とても便利なクラスですし、初期状態がこれでもいいのでは…と思うのでユニバーサルセレクタで指定してしまいます。 これで […]
こんにちは、工藤です。 今回はデザイン面の魅せ方に活かすことができそうなjQueryプラグインをあつめてみました。 mage Blur Plugin このプラグインを使うと画像をPhotoshopなどで加工をしなくても画像に簡単にぼかしを入れることができます。 なんとなくおしゃれな雰囲気になりますよね。 Space.js パララックス系のプラグインです。 スクロール時に3Dのように飛び出して見えるのが面白いです。 Raphaël.js JavaScriptでSVGを […]
こんにちは、工藤です。 今回はフォーム周りで活躍してくれそうなプラグインを集めました。 icheck チェックボックス・ラジオボタンのカスタマイズを簡単に行うことができます。 用意されているデザインも豊富で、なんだかこれを使うだけで一気におしゃれになります。 .customSelect() cssで行うと割と表示が違って苦労するselect要素の装飾が簡単にできます。 マウスオーバー時やセレクトメニューを開いた時…などの細かい設定も行うことができます。 Validetta リ […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part4をご紹介します。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 display:inline-blockで要素を並べた時に隙間を作らない 以前の記事でさらっと説明してしまったので、改めてご紹介です。 display:inline-blockで要素を横に並べると『text-align』や『vertical-a […]
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよ […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part3をご紹介します。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 テキストに蛍光ペンのようなマーカーをつける 文字の強調に。使い方によっては分かりやすく、おしゃれになります。 方法は非常に簡単です。該当のテキストに とつけるだけ。 linear-gradient(transparent 開始位置, 色の指定 終了位置);といった感じで、開始位置と終了位 […]
こんにちは、工藤です。 今回はおすすめのWordPressプラグインをご紹介します。 前回⇒おすすめのWordPressプラグイン集 part1 ウィジェット部分に独自のclassを付けたい Widget CSS Classes サイトへ ウィジェットで管理している部分にclassを付加して、そこのみにデザインを当てたいときはありませんか？ 確かに追加した順などにclassは付加されたりはしていますが、自分でつけておいた方が管理もしやすいですよね。 そんな時役に立つのが『Wi […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part2をご紹介します。 前回⇒知っておくと便利なcssの小技 part1 2行目のインデント以降にインデントを付ける 上の画像のように2行目以降はインデントを付けたい…という時はありませんか？ そんな時に簡単なコードで済ませられる小技です。 『padding-left:1em』『text-indent:-1em』を指定するだけで2行目以降が1文字下がって表示されます。 アイコンなどは適宜backg […]
こんにちは、工藤です。 アプリのアイコンって割とサイズを用意しないといけなくて、何を用意したのか作業中よくわからなくなったりします・・。 今回はアイコンのリサイズを一気に行ってくれるサービスと簡単ではありますが使い方をご紹介します。 App Icon Resizer サイトへ 使い方 使い方はとても簡単です。 まずは赤枠内にアプリのアイコンにしたい画像をアップします。 推奨サイズは1024×1024pxです。 次に画面下部でアイコンを作りたい対象やサイズにチェックを入れます。 […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技をご紹介します。 ブロック要素（div等）全体にリンクを付ける div等のブロック要素全体にリンクさせたい…なんてことありますよね。 HTML5やjsで解決出来る場合もありますが、そうはいかないなんて時もありますので…自分はよくこの方法に頼ることが多いです。 HTML とりあえずHTMLの記述です。 全体リンクにするaタグを空で置いています。 もし空で置くのが気になるようでしたら中にテキストを置いて、 […]
こんにちは、工藤です。 今回はこのブログでも使っているWordPressのおすすめプラグインと、簡単ではありますが使い方をご紹介します。 手軽にブログの記事の装飾をしたい Shortcodes Ultimate Shortcodes Ultimate ブログの記事を書いているとボタンなどの装飾やアコーディオンなどをつかいたい…けれどcssやjsに詳しくない…なんて時はないでしょうか。 その時役に立ってくれるのが『Shortcodes Ultimate』です。 なんと、40種類 […]
こんにちは、工藤です。 この度こちらの『モノづくりブログ』をリニューアルしました。 コンテンツも多くなってきたため、それらをシンプルかつ見易くまとめることが目的でした。 今回は前のブログと比較しつつ、色々とご紹介できたらと思います。 TOPページ 見た目についてはよりシンプルに、どちらかというとコンテンツの写真や画像を活かすようなものになりました。 前より線が細い印象になったかと思います。 コンテンツの並びについては、以前は新着の記事を並べていただけだったのですが、今回は新着 […]
運営会社:株式会社8bit
制作サービス
運営サービス
