【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ブラウザからプッシュ通知を送信 【Push.js】の使い方
2017年のトレンド予測で「ネイティブアプリが減少、WEBアプリケーションに移行が本格化」というものがありました。 確かにAndroidとiOSで言語も異なるし、開発コストはいつもよりかかるし、ARなどの複雑な内容でなければわざわざネイティブアプリを作る必要はありません。 ネイティブアプリは少し前までプッシュ通知が送信可能という大きな利点を持っていたのですが、ついにWEBブラウザでもプッシュ通知が可能になりつつあります。 調べたところ、なんと便利なjsライブラリが存在するそう […]
スマートフォン用メニューのjQuery/CSS3プラグインまとめ【2017年版】
こんにちは、工藤です。 今回はスマートフォン用メニューのプラグインをまとめました。 実用的なものから動きが面白いなと思ったものまで様々です。 アコーディオンメニュー slicknav 個人的にかなりお世話になっている『slicknav』です。 デバイスごとの不具合が少なく、カスタマイズもしやすく重宝しています。 こちらの特徴は、ブレイクポイント以下になると指定した要素を複製してくれるところです。 例えば『#mainnavi』を指定していると、その中の要素をブレイクポイント以下 […]
社会人のための三角関数復習[基本編]
前回書いた扇形状にアニメーションする記事、非常に残念な動きをしています。無念としか言いようがありません。 これを機におさらいをしてみようと、過去の薄れかけている記憶を呼び覚まし、高校数学の「三角関数」を調べてきました。 円弧上の点の座標を求める必要がある場合、これの理解がもう必須なんですよね。「Math.sin(x)」とかで値だけ出すことは可能なのですが、そもそも関係を理解していないと正しく関数を組めません。 sin、cos、tanの基本の公式 このような直角三角形の場合、三 […]
svgで扇形を書きたかった。
勉強も兼ねて、円グラフのようにぐるっと描写するjsを書きたかったのですが、どうにもうまくいきませんでした。。 角度の計算がおかしいんだろうなと思うのですが、どうにも数学が苦手で、もう少し調査してリベンジしたいです。 単純に90度ごとだととても簡単なのですが、終点の座標が曲線の部分にかかってくると三角関数が関わってくるので数学が苦手な人間にとってはとても大変なんですよね。 このソースコードだと、こんな図形になります。90度の単純な扇形。 pathタグの「d=”M 0 […]
知っておくと便利な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表示の時は改行させてスマホ表示の時は改行を解除したい、なんて時に使える方法です。 便 […]
設定しておくと便利なcssのまとめ
こんにちは、工藤です。 今回は個人的に設定しておくと便利なcssをご紹介します。 box-sizing: border-box;をユニバーサルセレクタで設定 初期状態だとpaddingとborderの幅や高さを含めずに計算してしまうのですが、『box-sizing: border-box;』を記述することでpaddingとborderも含めて計算してくれます。 とても便利なクラスですし、初期状態がこれでもいいのでは…と思うのでユニバーサルセレクタで指定してしまいます。 これで […]
デザインに活かしたい jQueryプラグインまとめ
こんにちは、工藤です。 今回はデザイン面の魅せ方に活かすことができそうなjQueryプラグインをあつめてみました。 mage Blur Plugin このプラグインを使うと画像をPhotoshopなどで加工をしなくても画像に簡単にぼかしを入れることができます。 なんとなくおしゃれな雰囲気になりますよね。 Space.js パララックス系のプラグインです。 スクロール時に3Dのように飛び出して見えるのが面白いです。 Raphaël.js JavaScriptでSVGを […]
フォーム周りの装飾に便利なプラグイン集
こんにちは、工藤です。 今回はフォーム周りで活躍してくれそうなプラグインを集めました。 icheck チェックボックス・ラジオボタンのカスタマイズを簡単に行うことができます。 用意されているデザインも豊富で、なんだかこれを使うだけで一気におしゃれになります。 .customSelect() cssで行うと割と表示が違って苦労するselect要素の装飾が簡単にできます。 マウスオーバー時やセレクトメニューを開いた時…などの細かい設定も行うことができます。 Validetta リ […]
まだ必要？ベンダープレフィックスまとめ
日々めまぐるしく進化していくWeb技術。Webブラウザ達もアップデートを重ねるごとに便利になっていきます。 数年前はFirefoxやChromeで必須だったベンダープレフィックスも、そろそろ必要ないものもでてきているのではと思い、勉強も兼ねて改めて調べ直してみることに。 ※下記は全て2016年07月12日時点のものです。 opacity まずは簡単なのから。懐かしいですね。IE8の全盛期、悩まされたものですね。 過去のIE達に特別に対応するのでなければ、ベンダープレフィックス […]
知っておくと便利なcssの小技 part4
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part4をご紹介します。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 display:inline-blockで要素を並べた時に隙間を作らない 以前の記事でさらっと説明してしまったので、改めてご紹介です。 display:inline-blockで要素を横に並べると『text-align』や『vertical-a […]
【 content:attr() 】CSSでタグのdata属性やtitle属性を取得して表示する
CSSの、 :after 疑似要素で同時に使用される content プロパティ。 「content:attr();」という記述でそのタグのhref属性やtitle属性が取得できます。応用すればjsやPHPと絡めて動的で様々な使い方ができるなと思い、簡単にどんなことが可能か試してみたいと思います。 基本の使い方 これは色々なサイトで紹介されていますが、基本の使い方です。 aタグのhref属性をattrで取得し、リンク先URLを表示してみます。 HTML CSS 表示結果 ・C […]
レスポンシブ対応したモーダルウィンドウのプラグインのまとめ
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよ […]
【CSS】マウスオーバーで画像がﾆｭｯと拡大するエフェクトをつける
口で説明しづらいのですが、最近よく見かけるこれです。 ↓ マウスカーソルあわせてみてください。 マウスオーバーのエフェクトなので、スマフォからは見れませんが、PCでマウスを乗せるとボタンの画像がﾆｭｯと拡大するエフェクトがついています。jsかと思いきや、CSSでも簡単に付けることができます。 ざっくり説明すると、ﾆｭｯとしたい画像をdivなどでくくって、「:hover」した際に画像のscaleを大きくするという手順です。 HTML CSS 親要素のdivには overflow […]
【CSS】Webでマルチカラムレイアウトが可能に
雑誌の組版でよくある、マルチカラムレイアウト。Illustratorなどではテキストボックスを2つ作ってスレッドテキストリンクという機能で繋げれば、長い文章は自動で次のカラムへ文章が送られます。 Illustratorのスレッドテキストリンク機能。文章が隣のカラムに送られているのが分かります。 今までWebでは、文章は手動でカラム分けしなければいけなかったのですが、なんと気が付いたらCSSでマルチカラムレイアウトの設定が可能になっていました。 対応ブラウザ おなじみの Can […]
知っておくと便利なcssの小技 part3
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part3をご紹介します。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 テキストに蛍光ペンのようなマーカーをつける 文字の強調に。使い方によっては分かりやすく、おしゃれになります。 方法は非常に簡単です。該当のテキストに とつけるだけ。 linear-gradient(transparent 開始位置, 色の指定 終了位置);といった感じで、開始位置と終了位 […]
知っておくと便利なcssの小技 part2
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part2をご紹介します。 前回⇒知っておくと便利なcssの小技 part1 2行目のインデント以降にインデントを付ける 上の画像のように2行目以降はインデントを付けたい…という時はありませんか？ そんな時に簡単なコードで済ませられる小技です。 『padding-left:1em』『text-indent:-1em』を指定するだけで2行目以降が1文字下がって表示されます。 アイコンなどは適宜backg […]
また新しくなったGoogle MAP、埋め込み表示の縮尺を変更する
Google MAPのインターフェースが一新されたのも記憶に新しいかと思います。その後も各種機能がハンバーガーメニューになったりと、度々変更が加えられておりましたが、気がつくと、GoogleMAPの「マップの埋め込み」機能も少々勝手が変わっていました。 URLが見慣れない形に 通常のGoogle MAPを開き、住所や建物名で検索し、「共有」から「地図の埋め込み」でマップを自分のサイトへ張るためのソースコードが取得出来ます。ここまでは今まで通りですね。 下記は当社の位置表示なの […]
Chromeでpage-breakが効かない
今回は印刷対応 print.css について。 Webページを印刷する際、地図や図版が紙面の途中で切れて印刷されないように、CSSの「page-break」を設定すると改ページを行うことができるのですが、これがどうしてもChromeで効かない現象が起きます。page-break-after、page-break-before、どちらにも共通して行える対策なので、一度試してみて下さいね。 現象が起きるHTMLデモ 現象を確認できるHTMLを用意しました。画面右部の「コンテンツ」 […]
知っておくと便利なcssの小技 part1
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技をご紹介します。 ブロック要素（div等）全体にリンクを付ける div等のブロック要素全体にリンクさせたい…なんてことありますよね。 HTML5やjsで解決出来る場合もありますが、そうはいかないなんて時もありますので…自分はよくこの方法に頼ることが多いです。 HTML とりあえずHTMLの記述です。 全体リンクにするaタグを空で置いています。 もし空で置くのが気になるようでしたら中にテキストを置いて、 […]
【怖くないJavaScript + jQuery】if文のいつもと違った使い方
今回は、条件分岐について。 条件分岐と言えば、if文で書いてしまうのが一番シンプルな形ですが、今日はいつもと少し違った使い方をご紹介します。 まずクリックするとランダムで値を吐くボタンを作ります。 ▼ボタンをクリックすると0~100までの点数が表示されます。 クリック 例えば、この結果に応じて下記のコメントを表示させるとします。 ・0～29点の場合は”初心者” ・30～49点の場合は”中級者” ・50～79点の場合は” […]
【怖くないJavaScript + jQuery】要素の数に合わせて値を自動で付与する
今回は、要素の数に合わせて値を自動で付与します。例えばliの数を数えて、widthを割り振ったりなど様々な事に応用が可能です。CMSが入っていて要素の数が可変の際、「要素を数える」という処理を行ってみましょう。 デモはこちら まず下準備 まずこちらはいつも通り、必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は count.js とします）を読み込みます。 Step2:次にHTMLの準備 今回は、全体を囲むd […]
phpの勉強をしてみました
こんにちは、工藤です。 今回は普段の作業がデザインとHTMLとcssコーディングがほとんどの私がphpの勉強をしたのでその過程でわかったことだとかを載せようかと思います。 私ごとなのですがいかにも『プログラム言語』というものに若干苦手意識がありまして…。 ですが浅くでも知っておいた方が何かしらの役には立つだろう、と思い至ったのでとっつき易い（と言われている）phpを勉強することにしました。 とりあえず今回はお問い合わせフォーム（っぽいもの）の作成をしました。 目標 確認画面を […]
運営会社:株式会社8bit
制作サービス
運営サービス
