マークアップ

マークアップ

まだ必要?ベンダープレフィックスまとめ

日々めまぐるしく進化していく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 […]

Webデザイン

レスポンシブ対応したモーダルウィンドウのプラグインのまとめ

こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer(Lightbox) 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は(見た限りだと)そんなに違わないので好きな方を使ってよ […]

マークアップ

【CSS】マウスオーバーで画像がニュッと拡大するエフェクトをつける

口で説明しづらいのですが、最近よく見かけるこれです。 ↓ マウスカーソルあわせてみてください。 マウスオーバーのエフェクトなので、スマフォからは見れませんが、PCでマウスを乗せるとボタンの画像がニュッと拡大するエフェクトがついています。jsかと思いきや、CSSでも簡単に付けることができます。 ざっくり説明すると、ニュッとしたい画像をdivなどでくくって、「:hover」した際に画像のscaleを大きくするという手順です。 HTML CSS 親要素のdivには overflow […]

Webデザイン

【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 […]

Webデザイン

また新しくなった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点の場合は&#8221 […]

マークアップ

【怖くないJavaScript + jQuery】要素の数に合わせて値を自動で付与する

今回は、要素の数に合わせて値を自動で付与します。例えばliの数を数えて、widthを割り振ったりなど様々な事に応用が可能です。CMSが入っていて要素の数が可変の際、「要素を数える」という処理を行ってみましょう。 デモはこちら まず下準備 まずこちらはいつも通り、必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル(今回は count.js とします)を読み込みます。 Step2:次にHTMLの準備 今回は、全体を囲むd […]

マークアップ

phpの勉強をしてみました

こんにちは、工藤です。 今回は普段の作業がデザインとHTMLとcssコーディングがほとんどの私がphpの勉強をしたのでその過程でわかったことだとかを載せようかと思います。 私ごとなのですがいかにも『プログラム言語』というものに若干苦手意識がありまして…。 ですが浅くでも知っておいた方が何かしらの役には立つだろう、と思い至ったのでとっつき易い(と言われている)phpを勉強することにしました。 とりあえず今回はお問い合わせフォーム(っぽいもの)の作成をしました。 目標 確認画面を […]

マークアップ

【怖くないJavaScript + jQuery】画像の縦横比を保ったままサイズを変更する処理

画像の縦横比(アスペクト比)を保ったまま、サイズを変更したい。「印刷対応が必要な場合」「常にwindowサイズ-150pxで拡大表示したい場合」など、訳ありでとあるサイズにjsで拡大縮小する処理を紹介します。 下準備 jQueryと、自分で作ったjavascriptのファイル(今回は aspct.js とします)を読み込みます。 縦横比を調べるには? 画像の縦横比を調べるには、当たり前なのですが、画像の横幅と縦幅を取得して「横幅÷縦幅」の計算をすれば簡単に割り出すことができま […]

マークアップ

【怖くないJavaScript + jQuery】デバッグのススメその2 ~デバッグクイズ:初級編~

明けましておめでとうございます。本年もどうぞよろしくお願い致します。 皆様仕事始めも無事迎えられたようで、如何お過ごしでしょうか。週も半ば、エンジンはかかりましたでしょうか。渋谷は生憎のお天気ですが、今日も張り切って参りましょう。 さて、今日は前回に引き続き、javascriptのデバッグについて書いていきたいと思います。 デバッグのやり方は分かったはいいものの、実際にやってみないとどんな風に使うものかピンとこないと思います。今回はクイズ形式で見て慣れていってもらいましょう。 […]

マークアップ

【怖くないJavaScript + jQuery】デバッグのススメ ~なぜ動かないのか調べる~

jQueryのコードを見よう見まねで書いてはみるものの、動かず、そして結局諦める。初心者の方ならよくあることかと思います。今日は「なぜ動かないのか」を調べる方法を書こうと思います。デバッグの方法ですね。書いたコードのどこがおかしいのか調べて、直してみましょう。 方法は2つ デバッグの方法ですが、2つあります。アラートで出してしまうか、コンソールを使用する方法です。私は、一か所だけちょっと調べたい時とかはアラート、複数個所あったりする時はコンソール、と使い分けています。  01 […]

マークアップ

【怖くないJavaScript + jQuery】SVGデータを使用しての処理

今日はSVGデータを使用してアニメーションさせてみましょう。 SVGデータとは何かといいますと、端的に言うとXML形式で書かれた画像です。 SVGの基本 例えばこのSVGデータをテキストで開くとこんなかんじ。 イメージマップのように頂点の座標が数値で記述されています。 テキストで描画情報を持った画像ってところでしょうか。ベクトルデータなので拡大縮小してもボケることはありません。 pointsの部分、頂点の座標をちょっと増やしてやると、簡単に移動させることができます。 ↓ この […]

マークアップ

【怖くないJavaScript + jQuery】new Date()で日付を動的に書きだしてみる

毎度おなじみ怖くないシリーズです。そろそろ年の瀬ですし、カウントダウンとか作って遊びたくなりますね。 今日はnew Date()を使用して、日付で遊んでみましょう。 日時取得の基本 new Date()を使用すると、現在の日付時刻を取得することができます。 始めの日時の値は「 Fri Dec 04 2015 11:24:37 GMT+0900 」といった形で取得されます。 そこから「年だけ」「年と月だけ」と必要なデータだけ抜き出していきます。 Step1:まず下準備 まずいつ […]

マークアップ

【怖くないJavaScript + jQuery】ウィンドウサイズに合わせてメイン画像のサイズを変えたい

毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 かゆい所に手が届くような、ニッチなjsをどんどん作っていきたいと思います。 「今回はウィンドウサイズに合わせてメイン画像のサイズを変えるjs」を作ります。 ファーストビューは維持したいんだけどメイン画像はウィンドウサイズに合わせて大きく取りたいと要望があった時には最適です。ウィンドウをリサイズした時の処理も入れて行きます。スマホにもちょっとだけ配慮します。 仕組みとしては、全体のウインドウのhei […]

マークアップ

Androidでつまずいたバグについて 2

こんにちは、工藤です。 Android4系の標準ブラウザのバグで引っかかったことがありましたので書き留めておきます。 前回:Androidでつまずいたバグについてのまとめ 画像をcssで丸く切り抜ぬくと標準ブラウザでのみ表示が異なる ここ最近よく見る画像の丸い切り抜きです。 ユーザーさんが登録したアイコンなどはcssで切り抜く(ように見せる)のが手っ取り早いですね。 今回は下の画像のように表示させるつもりでcssを設定しました。 IEの古いバージョンなどは今回は置いておいて… […]

マークアップ

hover時に素敵な動きを加えてくれるcss3アニメーション10選

今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 2016年1月にIE8のサポートが切れる…とのことなのでいつかバンバンつかえる日が来たらいいなと思います。 Hover.cssサイト・デモ 主にボタンにカーソルを当てた時に使えそうなCSSライブラリです。 綺麗にまとめてくださっているので使いたいものがすぐに見つかりそうですね。 CSSのみで実装するボタンデザインやホバーエフェクト 20+α 目次 サイト・デモ 使い勝手のよさそうなエフ […]

マークアップ

【怖くないJavaScript + jQuery】マウスオーバーで注釈を表示させる

毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は、マウスオーバーで注釈を表示させるjsを作ります。 デモ 実際に動かしてみるとこんな感じになります。 ボタンにマウスを載せてみてください。 デモを別ページで開く ファイル一式ダウンロード Step1:まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル(今回は tips.js とします)を読 […]

マークアップ

【jQuery】「.animate」で「border-radius」の値を変更すると変な動きをする

ある正円形の要素にマウスオーバーをすると、角丸四角になるような効果をつけたくて、jQueryの.hover()使用してborder-radiusが変化するアニメーションを設定した所、一旦正方形に戻ったうえで角丸にアニメーションしていくという動きをして調査したので記事に。(正しい動きと言えば正しいのでしょうが…) ▽やりたい動き ▽現実 まずマウスオーバーして実際の動きをご確認ください。 デモを別窓で開く 対策しても、ページ表示後の初回のアニメーションのみ未対策の時と同じ動きを […]

マークアップ

【怖くないJavaScript + jQuery】スクロールの位置によってついてくるメインメニュー

毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は、スクロールに合わせてついてくるメニューを作ります。 デモ 実際に動かしてみるとこんな感じになります。 フレーム内を縦にスクロールすると、ナビゲーションが途中から上部に固定になります。 デモを別ページで開く ファイル一式ダウンロード ナビゲーション要素のid、切り替えるスクロール位置の高さがそれぞれ変更できます。 そのままでもお使い頂くこともできますが、下記に動作の解説です。 Step1:ま […]

1 3 4 5 6 7