SVG画像のHTMLでの使い方 | バシャログ。
こんにちは。koyaです。 今回は「コロナに負けない！シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。 svgを使用した理由 今回は牛の肉の部位毎にマウスホバーの判定が欲しかったため、svgを使用しました。 もしpng画像を使用すると、透過された部分にも画像の判定が入ってしまいます。 その点svgを使用すると動画のように見た通りの範囲のみ判定があるため、今回のようなケースではsvgを使用します。 svg画像の出力 今回はAdobeXDを使用したsvg画像の出力を行います。 書き出す際の設定は下の画像のように 形式→svg スタイル→内部CSS 画像を保存→リンク と設定します。 ファイルサイズの最適化については、ファイルサイズを縮小したものは改行が消えたり、pathのidが消えてしまうのでもしコードを参照する場合はチェックを外した方が使いや
Chrome の loading="lazy" を試す | バシャログ。
どうもfujiharaです。梅雨の時期がやってきましたね。 皆さん梅雨の対策はしていますか？私はしていません。 本日は Chrome の img のプロパティ loading を試しましたので、 ご紹介します。 Loading Attribute 今まで画像の遅延読み込みする場合は img タグに クラスをつけて、 疑似画像を出しておき、スクロール範囲に入ったらローディングして表示などしていましたが、 これがあると自動で遅延読込してくれます。(Chrome) 既存のイメージと動画の遅延読み込み 確認 4月くらいでしたか、Chrome 75 からと言われていましたが、クロームのステータスを見ると 76になってますね。当初使えると思ってやってみたんですが、chrome:flags で Enable lazy image loading を Enabled にしてあげないと有効になりませんでした
入力できないけど送信はできるフォームコントロールを作る | バシャログ。
2年待ちわびたサガ2015もとい『サガ スカーレット グレイス』を嬉々として予約した kagata です。 さて、今回は最近身近で話題にのぼった HTML の小技をお送りします。 disabled なフォームコントロールは値を送信しない あるとき、チームメンバーから「入力できないようにしたフォームコントロールの値が送信されないようだ」という話を聞きました。そのフォームコントロールには、以下のように disabled 属性がつけられていました。 <!-- 入力できないし送信もされないテキスト入力欄 --> <input type="text" name="character" value="ウルピナ" disabled> <!-- 入力できないし送信もされないプルダウンメニュー --> <select name="characters" disabled> <option>レオナルド</op
ラジオボタンに初期値をおくべきかという議論 | バシャログ。
近ごろ職場近辺で「モーニングがある」「きちんと分煙されている」「携帯電話の電波が入る」の3条件をいずれも満たすようなカフェを探している kagata です。2つまではわりとどこも満足できるのですが、3つすべてとなるとなかなか難しいようです。 さて、先日弊社内で「ラジオボタンには初期値を設けるべき」とごく軽い気持ちで発言したところ、社内外で思いのほか活発な議論が巻き起こるということがありました。その際に調べた前提的な話を備忘のためここにまとめるとともに、今考えている疑問や課題をご紹介します。「そんなことも知らないの？」ということがあったら、ご教授いただければ幸いです… m(__)m HTML の仕様を確認する 「ラジオボタンには初期値を設けるべき」だとわたしが最初に学んだのは10年くらい前のことです。当時はプログラミングでなく主に HTML を書いて生計を立てていました。そのころに次の記事を
これって使えたっけ？今だからこそ IE8 対応コーディングのポイントをおさらい | バシャログ。
こんにちは。Latinです。 今年は長めの夏休みが取れそうなので、旅行でも行こうと画策しております。 さて今回は、久々にコーディングネタです。 弊社の最近の案件では、対象ブラウザがIE8+という案件がほとんどになってきました。 「安心してください。IE10以上です。」 なんて言われたら嬉しい限りなんですが、まだまだ少ないのが実状です。 「悪夢のIE7対応」を考えなくて良くなっただけでもコーディングはだいぶ楽になりましたが、「IE8」は「IE8」でいろんなクセを持ってますよね。 今回はそんな今だからこそ、「IE8対応のポイント」をまとめてみます。 【IE8の仕様編】 HTML5に対応していない HTML5のサイトで「IE8対応」が必要になってくる場合、ポピュラーな方法としては二つあります。 html5shiv.js などの拡張ライブラリを IE9 以下のIEで読み込ませる HTML5要素自体
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
「ユニバーサルHTML/XHTML」を読み返してみた (2) | バシャログ。
前回は、ユニバーサルHTML/XHTMLを数年ぶりに読み返してみた感想のなかで、いくつかの要素についての解説の章の感想を述べました。今回はその続きです。 目次 楽をしたい！(1へ) 情報とはなにか？(1へ) title要素やh1要素のこと(1へ) リストを使って読者に楽をしてもらう(1へ) class属性、id属性で簡単にHTMLを拡張する テーブルレイアウトのコラムから ウェブプロジェクトへの関わり まとめ class属性、id属性で簡単にHTMLを拡張する 私は業務でJavaScriptを使ってプログラムを書くことが多いです。JavaScriptから見ると、class属性やid属性は、処理対象を特定するための名前みたいな考えになりがちですが、書籍での見出しは異なります。 3.3 HTMLの定義を越えた文書構造を扱う 3.3 HTMLの定義を越えた文書構造を扱う - ユニバーサルHTML
「ユニバーサルHTML/XHTML」を読み返してみた (1) | バシャログ。
セマンティック HTML/XHTMLという本が最近発売されました。今、わくわくしながら読んでいる最中です。そのことがきっかけで、同じ著者(神崎正英さん)による書籍「 ユニバーサルHTML/XHTML 」を読み返してみて思ったことを書き並べてみます。一度読まれた方なら再読するきっかけに、読んだことのない方なら読みたいと思うきっかけになれば幸いです。 目次 楽をしたい！ 情報とはなにか？ title要素やh1要素のこと リストを使って読者に楽をしてもらう class属性、id属性で簡単にHTMLを拡張する(2へ) テーブルレイアウトのコラムから(2へ) ウェブプロジェクトへの関わり(2へ) まとめ(2へ) 楽をしたい！ Web技術について話をするときに「楽をしたい」みたいなことを言うのは、下品に思われるかもしれませんが、Webに限らず技術というのは人が楽をするためのものという側面があります。W
国内の大手サイトが採用しているHTMLのバージョン | バシャログ。
最近は立て続けに WEB サイトの CSS コーディング（※コメントで間違いをご指摘いただいたので修正。書いたらちゃんと読み返せですね。お恥ずかしい…）の設計をやっていまして、毎回最初に悩むのが採用する HTML のバージョンです。 弊社では XHTML1.0 Transitional か XHTML 1.0 Strict のどちらかを要件によって使い分けることが多いですが、実際のところ世の中の大手といわれているサイトではどのバージョンが採用されているのか。 調べてみました。 全て日本国内サイトのトップページで、2008年8月4日現在のものです。調査対象の選定は良く言えば「柔軟」、悪く言えば「適当」に選びましたので、若干の偏りはご容赦ください。 IT大手
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン
[使える CSS テクニック] CSSで実現するプルダウンメニュー | バシャログ。
使える CSS テクニックの第 4 回は「CSS で実現するプルダウンメニュー」です。 確認ブラウザは IE7、Firefox2、Opera9、Safari3.1 です。 CSS のみでは IE6 対応が不可能ですが、IE の独自機能（DHTML）を併用することで IE6 でもプルダウンメニューを実現しています。 まずは、以下のサンプルをご覧ください。 シーブレイン コーポレート WEBサイト制作 マニュアル制作 ローカライズ 検索エンジン Yahoo! Japan Google Goo excite Biglobe 週刊少年漫画 少年ジャンプ 少年マガジン 少年サンデー このサンプルの HTML は以下のようになっています。 <ul id="pulldown-menu"> <li><a href="#">シーブレイン</a> <ul> <li><a href="http://c-brai
![[使える CSS テクニック] CSSで実現するプルダウンメニュー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
XHTML+CSSの「ボックスモデル」の復習 | バシャログ。
XHTML+CSSでページを制作する場合、必ず理解していないといけないのが「ボックスモデル」です。 ボックスは以下のプロパティで構成されます。 border（ボーダー）： 枠線 margin（マージン）： 枠線の外側の余白 padding（パディング）： 内容と枠線の間の余白 width（幅）： 内容(コンテント)の幅 height（高さ）：内容(コンテント)の高さ 以上の 5 つで構成されています。 ボックスモデルでよく勘違いしてしまうのが width の値です。 ボックス全体の幅、もしくは border と padding を含む幅と思ってしまいがちですが、実際は内容(コンテント)の幅が width の値になります。 ですので、ボックス全体の幅は、 margin（左右のマージン）＋border（左右のボーダー幅）＋padding（左右のパディング）＋width（内容の幅） ＝ボックスの
短期集中連載企画： コレだけ読めばバッチリお勧め書籍紹介「第 1 回 XHTML+CSS 編」 | バシャログ。
バリバリの現場スタッフである当ブログの執筆者が、それぞれの得意分野でお勧めの書籍をご紹介する短期集中連載企画。全 8 回の予定でお送りします。 第 1 回目は 「XHTML+CSS 編」です。 STEP1 「なぜ WEB 標準に準拠する必要があるのか」 現役のデザイナーやコーダーでも「なぜ WEB 標準に準拠する必要があるのか？」を理解している人はそれほど多くないのではないでしょうか。 まだ WEB 標準が一般的ではなかった時代、当時主流だったテーブルでのレイアウト手法に慣れてしまっていた自分は、それまでに培ったノウハウとは違うベクトルの技術を覚えるために時間を割くことに抵抗がありました。 しかし、この本を読んで頭の中のモヤモヤは消し去りました。そして必死に XHTML+CSS を勉強し始めました。 この本には XHTML や CSS の実践的なテクニックはそれほど書いてありません。しかし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【急募】フロントエンドエンジニア / マークアップエンジニア募集！ | バシャログ。
【Webデザイナー・コーダー】アルバイト・契約社員募集！ | バシャログ。
CSS Nite in Ginza, Vol.49「バシャログ LIVE」 でデモとして使用したhtmlをどうぞご自由に | バシャログ。