はじめに https://silurus.dev/articles/6qI4Ldg0VRdQJXDfxlqElf 一般的なブログサービスやQiita、Zennといったサービスでは、Markdownに記述した外部リンクがカード的なUIで表示されることがある。これは OGP (Open Graph Protocol) という仕組みを使った表現で、単なるテキストリンクよりもずっと見栄えがいいのでこのブログでも実現したいと思っていた。先日試行錯誤してひとまず形になったので、この記事ではその実装の方法についてまとめておきたいと思う。上に貼り付けたこのブログ自身へのリンクがそれにあたる。 Next.js （ブログ記事のSSGに使用） marked （Markdownのマークアップに使用） Material UI (スタイリングに使用） Markdownの何をカードに変換するか marked でMark
CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation Draft, 14 October 2025 More details about this document This version: https://www.w3.org/TR/2025/CRD-css-flexbox-1-20251014/ Latest published version: https://www.w3.org/TR/css-flexbox-1/ Editor's Draft: https://drafts.csswg.org/css-flexbox/ History: https://www.w3.org/standards/history/css-flexbox-1/ Implementation Report: https:
これからのCSSレイアウトはFlexboxで決まり！FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ 対応ブラウザーCan I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari 用に -webkit- のベンダープレフィックスが必要です。IE については 11 から正式に対応。IE10 にも対応していますが、書き方が少し変わって
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 �&�View in English Їv ��Always switch to English CSS の視覚整形モデル (visual formatting model) は、ユーザーエージェントが文書ツリーをどのように受け取り、視覚メディア用に処理して表示するかを説明するものです。これには、コンピューター画面のような連続メディアと、ブラウザーの印刷機能によって印刷された本や文書のようなページメディアが含まれます。情報の大部分は、連続メディアとページメディアに等しく適用されます。 視覚整形モデルでは、文書ツリーの各要素は、モデルに応じてゼロ個以上のボックスを生成します。これらのボックスのレイアウトは、次のようにして制御されます。 ボックスの寸
サンプルはこちら。 http://codepen.io/KazuyoshiGoto/pen/nhstF テキストの乗っているレイヤーで擦りガラスを通したような表現を作っています。 CSS(Sass) HTMLはごくシンプルなので要のCSSについて。 body, section:before { background:url("***.jpg"); background-position: center; background-size: cover; background-attachment: fixed; } section:before { content: ""; z-index: -1; -webkit-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); position: absolute; width: 1
《2017年6月25日 13:00 公開/更新》 テキストの背景色を半透明にしつつ、文字色は不透明にするCSS [CSS3,テキスト,色] スタイルシートを使って対象の要素を半透明にしたい場合(透明度を指定したい場合)はopacityプロパティを使えば良いだけです。テキストでも画像でも半透明になります。しかし「対象の要素の全体」が半透明になってしまいます。そうではなく、「背景色は半透明にして背後を少しだけ透過させたいが、文字色は不透明にしてハッキリ見えるようにしたい」という場合もあるでしょう。その場合はRGBAカラーモデルでの色指定を使うと望みの配色が作れます。 テキストの背景色を半透明にしつつ、文字色は不透明にしたい場合もある ▼背景色は半透明だが、文字色は不透明にした例 ▼背景色も文字色も合わせて半透明にした例 背景色も文字色も合わせて半透明にしたければ、opacityプロパティ 背景
CSSで中央寄せ方法(inlineやblockで方法をかえよう！)。text-align:centerやmargin:auto。レスポンシブの場合なんかも紹介します！ CSSで中央寄せにする方法(inlineとblockで方法をかえよう！) おはこんばんちわ、やのっぱです(´・ω・｀) そういえば、周りでcssによる中央寄せがうまくいかないって声をよく聞いてたのでいくつか書いてみたよ。 思いつく限りの中央寄せの方法を書きます。 注意！ 本記事はreset.css、clearfixを導入した状態を基準としてソースコードを載せています。 １．margin: 0 auto;【block要素を中央に】 定番の中央寄せです。 でも、要素がwidth:100%;だと無理です。 margin取れないからです。 例） <style> .marginTest { width:100%; height:40p
ここ数年フロントエンドフレームワークが熱いです。Bootstrap、Zurb Foundationをはじめ、多種多様なフロントエンドフレームワークが登場しています。プログラマにとっては便利な反面、意外とデザイナーには好まれていないのではないでしょうか。 作法に則って記述している分には良いのですが、ちょっとでも逸脱しようとするととたんに面倒になるものが多い印象があります。その半分も機能は使われないフロントエンドフレームワークを止めて、Concise.CSSを使ってみてはいかがでしょう。 Concise.CSSの使い方 まずはConcise.CSSで作られたサイトのサンプルから。 テキストベースでもちゃんと作り込めるのが良いですね。 スクロール系のページ構成です。 ここから画面要素についてみていきます。 グリッド。 ヘッダー。 小さい文字や斜体。 引用。 住所。 文字寄せ。 背景色。 階層対応
Bootstrapの実際のページ表示を確認しながら、リアルタイムに簡単にカスタマイズできるオンラインツールを紹介します。 カスタマイズにはスタイルシートの知識はあまり必要なく、直感的にできます。もちろん知識がある人はより高度なカスタマイズが可能です。
今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin
この記事は、Selenium Advent Calendar 2013の1日目の記事です。 Selenium の locator Selenium を使って、ブラウザの操作を自動化するときに、どのリンクをクリックするか、どのフォームに値を入力するかを指定する必要があります。 画面上のどの要素を操作するかを指定するための情報をSeleniumではlocatorといいます。Seleniumでは、ブラウザ（厳密にいうとSelenium Server)とクライアント間の仕様としてJSON Wire Protocolが定められており、利用できるlocatorもそれに従います。 要素を探索する場合 /session/:sessionId/element に、locatorを含むJSONをPOSTするのですが、その locator として、class name、css selector、id、name、
1. Introduction 1.1 Watir gems Watir consists of three gems (or projects): Watir - This gem is just a loader. Based on the browser that you want to run and your operating system, the Watir gem will load either Watir-Classic or Watir-Webdriver. Watir-Classic - This is the original Watir gem that drives Internet Explorer. Watir-Webdriver - This gem allows the driving of additional browsers - eg Chro
Latest topics > CSS3セレクタとXPathでの表現の対応表 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « getElementsByなんちゃら の代わりにXPathを使う Main Mozilla 24 » CSS3セレクタとXPathでの表現の対応表 - Sep 13, 2007 拡張機能勉強会の時に焚き付けられた、Text Shadowのコード（textshadow.js）を教材にして拡張機能開発のノウハウを解説していくシリーズ。 XPathをノードの検索に活用する方法を紹介したけど、肝心のXPathが書けなきゃ意味がないわけで。でもXPathって、ノードセットがどうとかノードテストがどうとか軸がどうとか修飾がどうとか、い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く