不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
5000兆円欲しい！.css
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
HTML の q タグが日本語のサイトではカギ括弧を出すようになってた
HTML に q という要素がありますね。 Quotation の Q ですか。 <q> について 文書内で引用をしたいとき、 ブロック要素を含むような場合には <blockquote> ですが 一言とか一行とかそれくらいのときには <q> を使うのがいいみたいです。 q 自体がデフォルトでインライン要素だしね。 こんなぐあい。 <q>ここは引用ですよー。</q> 多くのブラウザでは、この <q> で括った部分が ダブルクォーテーションで挟まれて表示されます。 上記の例だとこう。 “ここは引用ですよー。” カギ括弧になってた 「表示されます」って書いたんだけど、 本当は「と思ってました」でした。 こないだふと気づいたら、 日本語のページではこれがこうなってました。 「ここは引用ですよー。」 クォーテーションマークじゃなくてカギ括弧になってる。 知らんかった。いつの間に。 <q> を初めて使
スタイル・リポジトリ
10年以上HTMLやCSSを書いてきた中で他の人達の書いたHTMLやCSS、そしてJavaScriptから僕が学んだものは少なくありません。というより全てをそれから学んだと言っても良いでしょう。Max CSSに書かれている意見には大いに賛成することができますし、ホワイトスペースとコメントを取り除いて圧縮されたCSSから得られるものがほとんどないことにも同意できます。 しかし、今私達に必要なのは圧縮されていないCSSのコードだけなのでしょうか？ 僕はそうは思いません。「このWebサイトのこのデザインはどう実現してるんだろう？」という疑問に対する答えは確かにCSSコードを見ればわかりますが、そのデザインに隠された制作者の意図やその歴史を知ることはできません。CSSコードは「どういう機能を持つものなのか」についてのみ語り、「どうしてこうしたのか」については解説していません。コメントで追加される情
Firefox Nightly が position: sticky; に対応
Firefox Nightly で position: sticky; がサポートされたので紹介。指定することで特定の要素を相対位置に固定表示することが可能です。 ちょっと前の話になってしまいますが、現在、Firefox Nightly としてリリースされている、Firefox 26 で、CSS の position プロパティに対する新しい値、position: sticky; がサポートされました。 今のところ、Firefox Nightly でもデフォルトでは無効になっていますが、layout.css.sticky.enabled を true にすることで試すことができます。 h2 {position: sticky} ： Air Mozilla Sticky Positioning position: sticky; とは 簡単にいってしまえば、position プロパティの値と
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗ
Plastic Prison - Diary - HTMLにおける画像の拡大縮小
使ってる人がいるかは知りませんが、まな板(旧名:ドット絵掲示板(辛口))には投稿されたドット絵をその場で拡大縮小する機能があります。 その場でやっている以上、サーバーサイドのテクニックではなく クライアントサイドのテクニック、すなわちJavaScriptを用いているわけですが、 今日はJavaScriptを用いた画像の拡大縮小の僕の個人的なメモ的なお話です。 JavaScriptで拡大縮小をする方法はそんなに多くはなく、 imgタグのwidthとheightを弄るのが最もメジャーであると思います。 100x100の画像に対して二倍表示したい場合はwidth=200、height=200を設定してやれば良いのです。 まな板もつい最近までこれによって画像の動的拡大縮小を実装していました。 dotllectなんかも同じようにやってるようです。 ですが、この方法には一つ問題があります
JamGraffiti: リニューアルしました
Random thoughts, note and graffiti that have piqued my creative interest. サイトを全部CMS化して管理しようと思い立ち、ついでなのでHTML5にしました。さようならxhtml1.1。こんにちはHTML5。CMSはいつも通りTextpatternです。 CSS3も使ってます。SafariとGoogleChromeではうっすらとアニメーションが適用されると思います。IEはver9以外は壊滅的なので、IE9でご覧になってくれると嬉しいです。 さて、この度HTML5で書くにあたり色々と調べてメモしながら作業をしたので、そのへんも書いていこうと思います。 参考書にしたのは、オライリーから出ている入門HTML5という本です。これは既に手元にあったので改めて読み返しました。ミツエーリンクスの矢倉さんが訳しています。 また、入門HT
t32k.com - このウェブサイトは販売用です！ - t32k リソースおよび情報
このウェブサイトは販売用です！ t32k.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、t32k.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
HTML5対応：divで乗り切れ - 万象酔歩
中央に置くことはできなくなります。 また<p>タグの場合も <center> <p> AAA<br> abcdef<br> G<br> hi-jkl<br> MMMMM </p> </center> で という表現を得るということができなくなります。 divで乗り切れ： <table>タグや<p>タグのstyle=設定で中央寄せ設定することはできますが どう配置するかは内容とは別問題なので、直接tableタグのstyleとして設定することは デザインと内容の分離の観点から好ましくありません。 また、同じstyle=設定を文章中に何度も繰り返し書くのは好ましくないので class定義をすることになります。しかしながら、設定したいスタイルには 全体の配置だけでなく色などもあります。classは多重派生させることは できませんので、中央寄せのこの色、左寄せのこの色といった具合に 無数のclass
フォントサイズチェッカー
スタイルシートでフォントサイズを指定したときに、どのくらいの大きさになるのかを表示。 ブラウザの文字サイズ設定は「中」「標準」を推奨。 IE・Firefoxなら フォントサイズ100％は、 フォントサイズ16pxと同じ。 フォントサイズ12pxは、 フォントサイズ75％と同じ。 フォントサイズ50% フォントサイズ51% フォントサイズ52% フォントサイズ53% フォントサイズ54% フォントサイズ55% フォントサイズ56% フォントサイズ57% フォントサイズ58% フォントサイズ59% フォントサイズ60% フォントサイズ61% フォントサイズ62% フォントサイズ63% フォントサイズ64% フォントサイズ65% フォントサイズ66% フォントサイズ67% フォントサイズ68% フォントサイズ69% フォントサイズ70% フォントサイズ71% フォントサイズ72% フォントサイズ
XHTML & CSS Lightbox
A valid XHTML & CSS Lightbox (no JavaScript) by Jenna Smith / Opera fix by Tobias Wiersch Click any of the links below to see it in action Lorem ipsum dolor sit amet, consectetur about us adipiscing elit. Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et, interdum ac ipsum. Nulla ullamcorper vulputate erat ac gravida. Mauris facilisis, leo ac condi
Bonn-note > XHTML & CSS リファレンス [WEB ARCHIVES より]
はじめに 以下のリファレンスはフライソンさんが作られたものです。 以前、フライソンさんのサイト[WEB ARCHIVES]には、このリファレンスが掲載されていました。 しかし、ある日サイトにアクセスすると...おつかれ 煮るなり焼くなりご自由にと書いてあり、このリファレンスが入った圧縮ファイルが置いてありました。 なお、現在[WEB ARCHIVES]は完全に閉鎖されているようです。(ちなみにURLはhttp://fls.moo.jp/) このままではこの素晴らしいリファレンスがもったいないと言うことで、Bonn-noteで掲載することにしました。 そんなわけで、以下の事をご留意下さい。 最近検索して分かったんですが、結構いろんなところで公開されてるみたいですね。とりあえずこのまま置いておくつもりですが... 注意 以下のリファレンスはフライソンさんが作られたものです 掲載するにあたって許
Web標準普及プロジェクト
ブラウザを選ばないWebサイトを作ろう! オーサリングツールや、テキストエディタを使ってHTMLファイルを作り、 自分の使っているWebブラウザで表示を確認する、 多くのWebサイトを作る人にとって当たり前かもしれない作業です。 しかし、ご存じでしょうか? あなたの表示確認に使っているWebブラウザを全ての人が使っているわけではありません。 あなたの持っていないWebブラウザで、あなたのWebページはどのように表示するのでしょうか? それは実際に表示させてみなければ分かりません。 しかし、WebブラウザはWeb標準仕様に沿うように開発が進められています。 そのため、Web標準仕様を知ることによって、Webブラウザを選ばないWebサイトを作ることができるようになるのです。 当サイトではWeb標準仕様に関する様々な情報を公開していますので、 あなたも是非、Web標準仕様に沿ったWebブラウザを
段落と字下げ - カナかな団首領の自転車置き場ダイアリー
とかなんとか、まあ、真名垣タンの物言いは、なんとなく生意気で、どこか恥ずかしくさせてくれるモノがあって、何か言ってやりたい心境にはなるのね。確かに。でも、それもいいんぢゃないかと、思ったり思わなかったりしちゃうわけぇ。 んでね。 どうでもいいけど、「カナかな団首領の日記」の人は、何故、段落の始めの一マスを空けないんだろう？ うわあ、一本取られたなぁ。そうですね。それではとりあえず、以下のスタイルをユーザースタイルシートに加えてみましょう。 p { text-indent : 1em ; } どうです、段落の最初が一字下げになりましたか？ユーザスタイルシートが何か分からない人は、W3C信者の首根っこを掴まえて聞いてみてね。 なんてね。 まあ、段落の最初を字下げするっていうのは、紙媒体では、割とポピュラーの書き方だし、小学校の作文の時間にもそうするように言われてたり言われてなかったりするもので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
池田 泰延 on Twitter: "「Webフォントが重たい」ことへの対策。 ちょっとマニアックですが、各サービスの工夫が興味深かったので、まとめました。 #HTML #CSS https://t.co/nzYBU8JpPf"
Web制作 W3G
