SVG画像のHTMLでの使い方 | バシャログ。
こんにちは。koyaです。 今回は「コロナに負けない！シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。 svgを使用した理由 今回は牛の肉の部位毎にマウスホバーの判定が欲しかったため、svgを使用しました。 もしpng画像を使用すると、透過された部分にも画像の判定が入ってしまいます。 その点svgを使用すると動画のように見た通りの範囲のみ判定があるため、今回のようなケースではsvgを使用します。 svg画像の出力 今回はAdobeXDを使用したsvg画像の出力を行います。 書き出す際の設定は下の画像のように 形式→svg スタイル→内部CSS 画像を保存→リンク と設定します。 ファイルサイズの最適化については、ファイルサイズを縮小したものは改行が消えたり、pathのidが消えてしまうのでもしコードを参照する場合はチェックを外した方が使いや
Sassでテーマ用CSSを作成する | バシャログ。
どうもfujiharaです。この時期でも暑く感じるのは自分だけでしょうか？ 本日はテーマ用CSSを作成する際に調べていたらSassの !defaultがすごく便利だったのでご紹介します。 Default Values Default Values この値は Sassで変数を使用する際に値の最後に追記すると既に変数として宣言されている場合は、変数を上書きしません。 テーマ用設定 以下のようにファイル構成をします。 --src --_base _variables.scss ... --themes theme-a.scss theme-b.scss common.scss ファイル _variables.scss $mainColor: green !default; $heading1Color: orange !default; ... common.scss import "_base
displayにtransitionが効かなかった | バシャログ。
こんちにちわ。kyamashitaです。だいぶ涼しくなり過ごしやすくなりましたね。 今回は、CSSについて知れたことを紹介します。 問題個所 今回対応したのはこのような検索ボックス。 コードはこちら。 html <div class="search-area"> <div class="search-area-inner"> <button class="search-area-btn">カテゴリ</button> <div class="category"> <ul class="list-first"> <li><a href="#">すべて</a></li> <li> <a href="#">カテゴリ１</a> <ul class="list-second"> <li> <a href="#">カテゴリ１－１</a> <ul class="list-third"> <li><a hr
横スクロールさせたいtableの幅がうまくいかない…を解消しよう | バシャログ。
花粉症が今年はクッソ辛いyanagimachiです。 「スギ花粉症の根本治癒を目的とした次世代型ワクチン」が臨床試験に入るニュースを見たので、実用化されたらとりあえずスギの花粉症だけでも早めにどうにかしたいところです。 さて、先日PCでtableが横スクロールする案件がありました。 とはいえ、サイトの幅が広いとかモジュール化によって中身が足りないtableだってあるわけで、そういう時はなんかうまく幅の指定が動かない時があります。 今までスマホの時は幅が狭かったり、中身が多かったりで大丈夫だったのに、PCだとうまくいかない時のTIPをご紹介します。 HTMLは以下のようなものとします。 <div class="mod-tbl"> <table> //中身 </table> </div><!-- /.mod-tbl --> いままでの実装 tableを囲む.mod-tblに スクロールのove
gulpとgridとIEを仲良くさせる方法 | バシャログ。
引っ越ししたオフィスでは外食してランチを充実させよう！と決意したのに、暑いからとついつい一階のナチュラルローソンや最寄り駅との間にあるローソンに頼ってしまうyanagimachiです。関内のオススメランチの場所があったら教えてください！ さて、フロントエンドエンジニアの間でちょっとgridを使ってみよう、ということになったのですがIE（IE11とIE10）の対応やいつものgulpの環境だと色々大変だったので、メモしておこうと思います。 gridって何さ？ gridって何だろう？と調べてみたところ、MDNのグリッドレイアウトがわかりやすかったです。 行と列で要素を配置することのできるレイアウト配置ができるということで、テーブルレイアウトをHTML構造が正しい要素でできるようになったと考えればいいかと思います。gridという名前から、当初flexと変わらないのでは？と思ったのですが、縦も横も指
第14回 HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ！に参加したよ！ | バシャログ。
なぜか今月のバシャログ担当が2回のyanagimachiです。 5/24に開催されたHTML5ビギナーズに参加してきました。 簡単ですが、それぞれのセッション内容＆スライドのURLをご紹介します。 Foresee 見極めること：菊池 崇さん 多角的な視野で見ること、視点を変えること 変わらないことは自らの価値（価格）を下げること 社長の視点で考える。マーケットを分析しよう。自分のエゴは捨てよう もともと突っ走りやすいので、こういう視点は大切にしていましたが、社長視点も取り入れるよう頑張りたいですね。 ※このとき私の隣には弊社社長がいました。 スライド：Foresee 見極めること // Speaker Deck 慣れる！JS 素早く原因究明？デバッグ入門：国分 佑樹さん 原因究明の時間が多すぎ！ 多段式エラープルーフを使おう 時間のかかり方や守備範囲が違う複数のデバック方法を使う 上のレイ
これって使えたっけ？今だからこそ IE8 対応コーディングのポイントをおさらい | バシャログ。
こんにちは。Latinです。 今年は長めの夏休みが取れそうなので、旅行でも行こうと画策しております。 さて今回は、久々にコーディングネタです。 弊社の最近の案件では、対象ブラウザがIE8+という案件がほとんどになってきました。 「安心してください。IE10以上です。」 なんて言われたら嬉しい限りなんですが、まだまだ少ないのが実状です。 「悪夢のIE7対応」を考えなくて良くなっただけでもコーディングはだいぶ楽になりましたが、「IE8」は「IE8」でいろんなクセを持ってますよね。 今回はそんな今だからこそ、「IE8対応のポイント」をまとめてみます。 【IE8の仕様編】 HTML5に対応していない HTML5のサイトで「IE8対応」が必要になってくる場合、ポピュラーな方法としては二つあります。 html5shiv.js などの拡張ライブラリを IE9 以下のIEで読み込ませる HTML5要素自体
【RWD ーレスポンシブー】右にできた謎の余白を消す方法 | バシャログ。
こんにちは。mackyです。 じめじーめな日々のせいなのでしょうか。6月がとても長く感じます。 今日は右にできた謎の余白を消す方法をまとめます。 そもそも余白って？ できあがったサイトをipadやiphoneで表示確認したとき、以下のような余白ができたことはないですか？ 先日、携わった某サイトはiphoneとipadで表示チェックを行ったのですがその際右のスクロールバーの横に白い余白ができてしまいました。ヘッダーも背景画像もそこで切れてしまいます。その時色々試してみて解決した方法をメモしておこうと思います。（サンプルコードは一部内容を変更しています。） サイトの大まかな構成としては、bodyにwidth:100%;。 内側（ipadおよびiphoneで見切れないで表示させたい幅）sectionに固定サイズの1024pxを指定しました。 ipadとiphoneでみてみたら… (※下の図はip
【RWD ーレスポンシブー】PCとSPで違う画像を表示させる | バシャログ。
こんにちは。mackyです。 今日はタイトル通り、PCとSPで違う画像を表示させる方法を紹介します。 ちなみに、初心者向けです。では早速。 <p class="logo"><img src="img/img_sp.png" width="100" height="100" alt="c-brains"></p> とりあえず、これだけでいいです。 みてわかるとおもうのですが、imgタグで埋め込んでいるのは、SP用の画像です。 css CSSも割とシンプルです。 img { vertical-align: top; } @media only screen and (max-width: 640px) { img { width: 100%; height: auto; } } .logo { width: 300px; height: 300px; margin: 0 auto; backg
「なんとなく」を解消。z-indexを掘り下げてみた。 | バシャログ。
こんにちは。mackyです。 春なので、足元をスニーカーに変えて駅までダッシュしてみたら、ブーツでのダッシュより2分ほど早く駅に着けるようになりました。が、その分5分ほど長く寝てしまうようになったせいか、結局ギリギリです。そして汗だくです。夏にむけて、このダイエット法でいこうかと思います。 さて今日は、なにげにあやふやに理解していると痛い目にあう、z-indexについてまとめてみました。 スタックコンテキストとスタックレベル まず、重なりを自由に操るためには、スタックコンテキストとスタックレベルを理解しておく必要があります。 z-indexの意味やpositionとの併用のしかたをどれだけ知っていても、ここを理解していなければあまり意味がありません。 しかし、私は何度か説明を読みましたが、最初はほぼ意味不明。 とりあえず説明してみます。 スタックコンテキストとは ざっくり言うと、同じスタッ
width:auto;とwidth:100%;の違い＋中央寄せについて。 | バシャログ。
どうも。mackyです。 花粉症とは無縁の私は、早くお花見シーズンにならないかなー…なんて、今はそれだけを楽しみに生きています。のみたい！食べたい！食べたい！ さて今日は、その大切さ＆重要さに近すぎて気づかない、みたいな存在の「width」についてちょっと書こうと思います。 これからレスポンシブどんどん勉強していきたいという方は是非。 width:100%とwidth:autoの違い 例えばPC版のコーディングから行うとして、widthをpx指定したときなどはブレイクポイントを設けてSP版用に幅を上書きする。この流れはよくあります。共に、親要素の幅に合わせるとういう意味では同じですが、paddingやborderを指定する場合にちょっと違ってきます。 width:auto;の場合 Media Queriesをつかってwidthを上書きする場合はこちらが便利です。 上の図を使って説明すると.
nth-childやlast-childをIE8でどうしても使いたいときの代替手段。 | バシャログ。
ご無沙汰してます。mackyです。 最近、目覚めると14:00で、やってしまった…。今日はどんな言い訳をしようか…。と朝から真剣に考える「夢」をよく見ます。 「落し物を届けたのは先週使ったしな～！」と毎回言うのですが、なかなか言い訳の嘘くささもリアルで面白いです。 さて今日は、タイトルにもありますようにIE8で、nth-childやlast-childと同等の指定ができる方法について書こうと思います。 そもそも、こんなことが必要にならないようにコーディングを行うよ。と言われればそれまでなのですが、 自分の未熟さはわかっている。くそ！悔しい！でもてっとり早く何とかしたいの。という仲間たち、つづきを読んでやってください。 HTML <h3>寝坊したときの言い訳リスト</h3> <ul> <li>朝から腹痛</li> <li>道に人が倒れていた</li> <li>愛犬が逝く</li> <li>（
CSS で「吹き出し」をつくってみる | バシャログ。
こんにちは。mackyです！ 最近、何かと吹き出しを目にすることが多かったので自分でもサンプルを作成してみることにしました。 よかったら読んでみてください。 では、早速。 HTML HTMLはこの一行。 <div class="baloon">お久しぶりです。まっきーです。ここに好きなテキストをいれてね。</div> CSS：スタンダードな角丸長方形 使える環境であれば使いたい :before 。CSSもシンプルにできてしまいます。 .baloon { width: 400px; padding: 10px; background: #FF3399; position: relative; color: #fff; border-radius: 5px; text-align: center; } .baloon:before { content: ""; position: absolu
CSS: 画像をCSS animation を使ってクルクルまわす。 | バシャログ。
どうもfujiharaです。最近、掛け布団の量が難しい季節ですね。 皆さん体調管理には十分ご注意下さい。ちなみに私は風邪引きました。 先日、業務で先輩社員から以下のような依頼を受けました。 先輩 『アイコンを3つ並べてあるから、左から順番にクルッ、クルッ、クルッとJSで回して下さい。 rotate ってクラスを与えてあげて、animationend でイケるから～』。 私 『なるほど、画像のCSS animation 終了で次の画像にrotate クラスを与えてあげれば良いワケね』。 イメージとしては以下の画像になります。 まずはCSSを見ていきます。以下のように書かれています。 <style> .rotate { -webkit-animation: spin 0.4s ease-in-out 1; -moz-animation: spin 0.4s ease-in-out 1; ani
displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる | バシャログ。
こんにちは。まだ何一つ夏を感じていないmackyです。 今日は、RWDでdisplayプロパティを使ってtableレイアウトのデザインを変化させる方法をまとめてみました。 RWDでテーブルレイアウトを定義リスト風に変化させてみよう tableタグのdisplayの値はデフォルトではtable、thとtdタグはtable-cellとなっていますが、この値をblockやlist-itemなど他の値に変えてみます。 (1) (2) (1)の状態から(2)の状態へデザインを変化させます。 メディアクエリ―を使ってブレイクポイント（480px）を設定し、その中に上書きするCSSを書いていきます。 今回はこんな感じです。 HTML <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>項目A</th> <td>この文章はダミーです。</
【ツール】CSSのフォントサイズの相対指定に活躍！「PXtoEM.com」 | バシャログ。
こんにちは Latin です。いや～、ワールドカップのブラジル×ドイツ戦、凄い試合でしたね！（見てないけど） 決勝は欧州勢になりそうな予感。 さて今回は、フォントサイズの相対指定時に便利なツール「PXtoEM.com」をご紹介します。 フォントサイズの一覧や任意のサイズを出力してくれるツール「PXtoEM.com」 このツールの特長は大きく3つあります。 基準サイズからの相対サイズを一覧で表示 任意のサイズの相対サイズを出力 「px」と「em」の相互変換が可能 といった感じ。 例えば、ベースのフォントサイズが「14px」で、「20px」を指定したかった場合に、「1.429em だね！」って感じで一々、計算しなくて済むので便利です。 サイトのフォントサイズに「rem」を採用している場合にも同じで、ルートのフォントサイズを基準値とし、「em」の倍率をそのまま「rem」として使ってあげればOKで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG画像のHTMLでの使い方 | バシャログ。
cssでPhotoshopのように画像にエフェクトを追加する方法 | バシャログ。
【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。 | バシャログ。
【書籍紹介】レスポンシブEメールデザイン マルチデバイス時代の魅せるメルマガの作り方 (WEB PROFESSIONAL) | バシャログ。
