こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part6をご紹介します。 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 括弧付きの数字リスト 単純に数字だけではなく、括弧付きでリストを作りたいときはありませんか？ そんな時に使える方法です。 今回のポイントはcounter-incrementプロパティを使うことです。 まずliにcounter-incrementでカウ […]
こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part5をご紹介します。 今回はレスポンシブ関連のものです。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 ウィンドウサイズによってテキストを改行させたい レスポンシブの時、例えばテキストをPC表示の時は改行させてスマホ表示の時は改行を解除したい、なんて時に使える方法です。 便 […]
こんにちは、工藤です。 今回は個人的に設定しておくと便利な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 リ […]
日々めまぐるしく進化していくWeb技術。Webブラウザ達もアップデートを重ねるごとに便利になっていきます。 数年前はFirefoxやChromeで必須だったベンダープレフィックスも、そろそろ必要ないものもでてきているのではと思い、勉強も兼ねて改めて調べ直してみることに。 ※下記は全て2016年07月12日時点のものです。 opacity まずは簡単なのから。懐かしいですね。IE8の全盛期、悩まされたものですね。 過去のIE達に特別に対応するのでなければ、ベンダープレフィックス […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part4をご紹介します。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 display:inline-blockで要素を並べた時に隙間を作らない 以前の記事でさらっと説明してしまったので、改めてご紹介です。 display:inline-blockで要素を横に並べると『text-align』や『vertical-a […]
CSSの、 :after 疑似要素で同時に使用される content プロパティ。 「content:attr();」という記述でそのタグのhref属性やtitle属性が取得できます。応用すればjsやPHPと絡めて動的で様々な使い方ができるなと思い、簡単にどんなことが可能か試してみたいと思います。 基本の使い方 これは色々なサイトで紹介されていますが、基本の使い方です。 aタグのhref属性をattrで取得し、リンク先URLを表示してみます。 HTML CSS 表示結果 ・C […]
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよ […]
口で説明しづらいのですが、最近よく見かけるこれです。 ↓ マウスカーソルあわせてみてください。 マウスオーバーのエフェクトなので、スマフォからは見れませんが、PCでマウスを乗せるとボタンの画像がﾆｭｯと拡大するエフェクトがついています。jsかと思いきや、CSSでも簡単に付けることができます。 ざっくり説明すると、ﾆｭｯとしたい画像をdivなどでくくって、「:hover」した際に画像のscaleを大きくするという手順です。 HTML CSS 親要素のdivには overflow […]
雑誌の組版でよくある、マルチカラムレイアウト。Illustratorなどではテキストボックスを2つ作ってスレッドテキストリンクという機能で繋げれば、長い文章は自動で次のカラムへ文章が送られます。 Illustratorのスレッドテキストリンク機能。文章が隣のカラムに送られているのが分かります。 今までWebでは、文章は手動でカラム分けしなければいけなかったのですが、なんと気が付いたらCSSでマルチカラムレイアウトの設定が可能になっていました。 対応ブラウザ おなじみの Can […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part3をご紹介します。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 テキストに蛍光ペンのようなマーカーをつける 文字の強調に。使い方によっては分かりやすく、おしゃれになります。 方法は非常に簡単です。該当のテキストに とつけるだけ。 linear-gradient(transparent 開始位置, 色の指定 終了位置);といった感じで、開始位置と終了位 […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part2をご紹介します。 前回⇒知っておくと便利なcssの小技 part1 2行目のインデント以降にインデントを付ける 上の画像のように2行目以降はインデントを付けたい…という時はありませんか？ そんな時に簡単なコードで済ませられる小技です。 『padding-left:1em』『text-indent:-1em』を指定するだけで2行目以降が1文字下がって表示されます。 アイコンなどは適宜backg […]
Google MAPのインターフェースが一新されたのも記憶に新しいかと思います。その後も各種機能がハンバーガーメニューになったりと、度々変更が加えられておりましたが、気がつくと、GoogleMAPの「マップの埋め込み」機能も少々勝手が変わっていました。 URLが見慣れない形に 通常のGoogle MAPを開き、住所や建物名で検索し、「共有」から「地図の埋め込み」でマップを自分のサイトへ張るためのソースコードが取得出来ます。ここまでは今まで通りですね。 下記は当社の位置表示なの […]
今回は印刷対応 print.css について。 Webページを印刷する際、地図や図版が紙面の途中で切れて印刷されないように、CSSの「page-break」を設定すると改ページを行うことができるのですが、これがどうしてもChromeで効かない現象が起きます。page-break-after、page-break-before、どちらにも共通して行える対策なので、一度試してみて下さいね。 現象が起きるHTMLデモ 現象を確認できるHTMLを用意しました。画面右部の「コンテンツ」 […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技をご紹介します。 ブロック要素（div等）全体にリンクを付ける div等のブロック要素全体にリンクさせたい…なんてことありますよね。 HTML5やjsで解決出来る場合もありますが、そうはいかないなんて時もありますので…自分はよくこの方法に頼ることが多いです。 HTML とりあえずHTMLの記述です。 全体リンクにするaタグを空で置いています。 もし空で置くのが気になるようでしたら中にテキストを置いて、 […]
今回は、条件分岐について。 条件分岐と言えば、if文で書いてしまうのが一番シンプルな形ですが、今日はいつもと少し違った使い方をご紹介します。 まずクリックするとランダムで値を吐くボタンを作ります。 ▼ボタンをクリックすると0~100までの点数が表示されます。 クリック 例えば、この結果に応じて下記のコメントを表示させるとします。 ・0～29点の場合は”初心者” ・30～49点の場合は”中級者” ・50～79点の場合は” […]
今回は、要素の数に合わせて値を自動で付与します。例えばliの数を数えて、widthを割り振ったりなど様々な事に応用が可能です。CMSが入っていて要素の数が可変の際、「要素を数える」という処理を行ってみましょう。 デモはこちら まず下準備 まずこちらはいつも通り、必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は count.js とします）を読み込みます。 Step2:次にHTMLの準備 今回は、全体を囲むd […]
こんにちは、工藤です。 今回は普段の作業がデザインとHTMLとcssコーディングがほとんどの私がphpの勉強をしたのでその過程でわかったことだとかを載せようかと思います。 私ごとなのですがいかにも『プログラム言語』というものに若干苦手意識がありまして…。 ですが浅くでも知っておいた方が何かしらの役には立つだろう、と思い至ったのでとっつき易い（と言われている）phpを勉強することにしました。 とりあえず今回はお問い合わせフォーム（っぽいもの）の作成をしました。 目標 確認画面を […]
画像の縦横比（アスペクト比）を保ったまま、サイズを変更したい。「印刷対応が必要な場合」「常にwindowサイズ-150pxで拡大表示したい場合」など、訳ありでとあるサイズにjsで拡大縮小する処理を紹介します。 下準備 jQueryと、自分で作ったjavascriptのファイル（今回は aspct.js とします）を読み込みます。 縦横比を調べるには？ 画像の縦横比を調べるには、当たり前なのですが、画像の横幅と縦幅を取得して「横幅÷縦幅」の計算をすれば簡単に割り出すことができま […]
明けましておめでとうございます。本年もどうぞよろしくお願い致します。 皆様仕事始めも無事迎えられたようで、如何お過ごしでしょうか。週も半ば、エンジンはかかりましたでしょうか。渋谷は生憎のお天気ですが、今日も張り切って参りましょう。 さて、今日は前回に引き続き、javascriptのデバッグについて書いていきたいと思います。 デバッグのやり方は分かったはいいものの、実際にやってみないとどんな風に使うものかピンとこないと思います。今回はクイズ形式で見て慣れていってもらいましょう。 […]
jQueryのコードを見よう見まねで書いてはみるものの、動かず、そして結局諦める。初心者の方ならよくあることかと思います。今日は「なぜ動かないのか」を調べる方法を書こうと思います。デバッグの方法ですね。書いたコードのどこがおかしいのか調べて、直してみましょう。 方法は2つ デバッグの方法ですが、2つあります。アラートで出してしまうか、コンソールを使用する方法です。私は、一か所だけちょっと調べたい時とかはアラート、複数個所あったりする時はコンソール、と使い分けています。 01 […]
今日はSVGデータを使用してアニメーションさせてみましょう。 SVGデータとは何かといいますと、端的に言うとXML形式で書かれた画像です。 SVGの基本 例えばこのSVGデータをテキストで開くとこんなかんじ。 イメージマップのように頂点の座標が数値で記述されています。 テキストで描画情報を持った画像ってところでしょうか。ベクトルデータなので拡大縮小してもボケることはありません。 pointsの部分、頂点の座標をちょっと増やしてやると、簡単に移動させることができます。 ↓ この […]
毎度おなじみ怖くないシリーズです。そろそろ年の瀬ですし、カウントダウンとか作って遊びたくなりますね。 今日はnew Date()を使用して、日付で遊んでみましょう。 日時取得の基本 new Date()を使用すると、現在の日付時刻を取得することができます。 始めの日時の値は「 Fri Dec 04 2015 11:24:37 GMT+0900 」といった形で取得されます。 そこから「年だけ」「年と月だけ」と必要なデータだけ抜き出していきます。 Step1：まず下準備 まずいつ […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 かゆい所に手が届くような、ニッチなjsをどんどん作っていきたいと思います。 「今回はウィンドウサイズに合わせてメイン画像のサイズを変えるjs」を作ります。 ファーストビューは維持したいんだけどメイン画像はウィンドウサイズに合わせて大きく取りたいと要望があった時には最適です。ウィンドウをリサイズした時の処理も入れて行きます。スマホにもちょっとだけ配慮します。 仕組みとしては、全体のウインドウのhei […]
運営会社:株式会社8bit
制作サービス
運営サービス
