10分で理解する Beautiful Soup - Qiita
Beautiful Soup とは HTML や XML から狙ったデータを抽出するためのライブラリです。 公式ドキュメントの冒頭の説明を見るとこれは HTML や XML のパーサーそのものではなく、パーサーをラップして扱いやすくするライブラリのようです。 Beautiful Soup is a Python library for pulling data out of HTML and XML files. It works with your favorite parser to provide idiomatic ways of navigating, searching, and modifying the parse tree. It commonly saves programmers hours or days of work. この記事では Beautiful Soup
CSSのmarginをあまり書かなくなった話
この記事は、Lancers（ランサーズ） Advent Calendar 2023 の9日目の記事です。 本記事では、マークアップで、CSSのmarginプロパティをあまり書かなくなった話を紹介します。 Webサービスのレイアウトについて 大きく以下が考えられます。 縦に並べる 横に並べる 絶対配置 さらに、それぞれに対して以下が考えられます。 不規則的な配置 規則的な配置 今回は、縦に並べることに着目して、マークアップを考えてみます。 不規則的な配置のパターン marginを利用する .mt-4 { margin-top: 4px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } <div class="box box1"></div> <div class=
CSS サポート | Gmail | Google for Developers
Gmail に送信されるメールのスタイル設定には、インライン <style> ブロックと標準の CSS を使用できます。ほとんどの CSS セレクタ、属性、メディアクエリがサポートされています。サポートされていない CSS プロパティとセレクタは、Gmail で無視される場合があります。 サポートされている CSS プロパティとクエリの一覧については、リファレンス ガイドをご覧ください。 CSS セレクタ CSS セレクタのサブセットを使用してスタイルを適用できます。Gmail は、クラス、要素、ID セレクタをサポートしています。 例 <html> <head> <style> .colored { color: blue; } #body { font-size: 14px; } </style> </head> <body> <div id='body'> <p>Hi Pierce,
【CSS】borderを使って、三角形作るのはやめませんか？ - Qiita
はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と
1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl
CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解
iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。 本日（2022/11/30）リリースされたGoogle Chrome 108で対応したsvhを使えば、手軽に画面いっぱいのヒーローイメージを作れます。 Safari・Firefoxでは対応済み、Chromeと中身が同じEdgeは12/1週リリースの108で対応するので、全ブラウザで使える時代が来ます。もちろん、iOS・Androidも対応です。 本記事では、svhの使い方、同様に使えるようになったdvhやsvmaxなどの違い、従来の手法のデメリットをデモを交え
CSSの自動インラインとメールを送れるHTMLメールの作成ツールをgulpで作った - Qiita
はじめに この記事はZOZOテクノロジーズ #3 Advent Calendar 2019 16日目の記事です。 昨日は、@zt_takumi_ito さんのPowerShellでサーバアクセスするときのパスワード入力で楽するでした。 HTMLメールを作成する機会があり、調べてみると通常のコーディングと異なり下記の制約の下で作成する必要があることがわかりました。 メーラーによってCSSの各種プロパティの対応状況が異なる スタイルは要素にインラインで記述する（外部読み込みやstyleタグによる記述はメーラーにより非対応） 実際にメールを送信して表示を確認する必要がある 一度作成して終わりであれば、スタイルをタグに直接書いて作成するのもありだと思いますが、 今後も運用が予想されたためクラスを使用してスタイルを適用させることでなるべく楽をしたいと考えました。 機能 そこで下記の機能を持つツールを
ダークモード設定時のHTMLメールについて | ブログ | 株式会社ディレクタス
コミュニケーションデザイングループの山口です。 最近のスマートフォンやPCには「黒」を基調とした画面になる「ダークモード」というのがあります（眩しくないので、目に優しいらしいです）。 この設定をすると、ウェブサイトだけでなく、メールアプリも黒ベースに変更になります。そうすると、今まで白を背景としてキレイに見えていた（HTML）メールも、作り方や環境によっては、白黒と混ざり合って読みづらくなってしまうことになります。 あくまでも、ユーザーが選んで設定しているので、その設定をすべて覆すようなことはもちろんできません。ただ、その設定においてもメールを読みやすくすることは可能です。 ダークモードの種類として、 ① 部分的な色反転 ② フルカラー反転 ③ 色の変化なし という3種類のパターンがあります。このうち「①部分的な色反転」と「②フルカラー反転」の特徴をまず説明します。 明るい背景のある領域を
メルマガをダークモード対応する備忘録 - style01
ダークモード対応する機会があったのでメモ。 ダークモードに対応しているメーラーは背景色と文字色が反転したり、文字色の彩度が落ちます。 2021年8月時点でiOS , mac 標準搭載のメールアプリでは制御を確認しました。 :root { color-scheme: light dark; supported-color-schemes: light dark; } /* ライトモードの時 */ body { background-color: #FFFFFF; color: #333333; } /* ダークモードの時 ※ダークモードが存在しないアプリだとこの記述は読まれない。 */ @media (prefers-color-scheme: dark) { body { background-color: #333333; color: #FFFFFF; } } Gmailだと上記の記述
VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法
Visual Studio Code 通称「VSCode」で、Sass（Scss）を自動でコンパイルしてCSSに変換する方法をご紹介します。 セーブするたび自動でコンパイルしてくれるので非常に楽です。 すでに「VSCode」はインストール済みという前提で手順を紹介していきます。 まだインストールしてないよ！という方は、下記リンクよりインストールしてください。 Sass（Scss）の自動コンパイルに使用するプラグイン・Live Sass Compiler ひとつプラグインを入れるだけで、自動でコンパイルできるようになるとは、、 VSCodeめちゃくちゃ便利ですね。 Live Sass Compilerのインストールから設定まで全ての手順1.Live Sass CompilerをVSCodeに追加する画面左、黄色の点線のボタンをクリック。 Extension（プラグイン）の一覧が表示されるので
【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集
AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ
CSSだけで単色じゃない背景の上にドッグイヤー（折り返し）を作る方法
.title { position: relative; width: 300px; padding: 30px; box-sizing: border-box; background: #bad3ff; } /* 擬似要素を使ってドッグイヤー部分を表現 */ .title::after { content: ""; position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; border: 7px solid #4689ff; border-right-color: #fff; /* 背景色 */ border-bottom-color: #fff; /* 背景色 */ box-sizing: border-box; } ドッグイヤーを実装したことある方にはよく見慣れたコードだと思います。borderを使って三角
ファイル更新日時を付加してCSS／JSファイルのキャッシュ対策！結局これが一番
CSS や JSファイルを更新しても、ブラウザのキャッシュが読み込まれてしまい、更新後の新しい状態が確認できないということがあります。 更新したことを知っている人であれば、［Ctrl］+［F5］ や ［Ctrl］+［R］ などのスーパーリロードすれば済むことですが、そうでない場合、閲覧者のブラウザ環境によっては古い状態が表示され続けてしまうなんてこともあり得ます。コレ、顧客先のWebサイトの更新で、担当者がPC初心者担当者だったりすると結構大変・・。 従来の方法 そこで良く紹介されている対策は、下記のように参照するCSSやJSファイルの後に ?ver=3.3 のように任意のパラメータを付加するという方法。CSSやJSファイル更新時に、このパラメータを一緒に変えてあげることで、ブラウザはキャッシュ済みファイルとは別物と認識し、結果、特別なリロードをすることなく最新のファイルを読み込むようにな
進化し続けるフロントエンド技術「Web Components」はライブラリ不要！――気軽に始めて開発の生産性を高めよう
再利用可能なUI部品を組み合わせて画面を構築していくのは、多くのGUIアプリケーションにとって効率の良い開発手法です。ブラウザ向けにも多くのライブラリが再利用性を担保するための工夫を重ねてきましたが、実はブラウザ自身が再利用可能なUI部品を作成するための機能を備えていることはご存知でしょうか。本記事では、Web Componentsという名称で総称されるブラウザの機能について解説します。 対象読者 AngularやReactなどのフレームワークに頼らずに再利用可能なHTMLやCSSを整備したいマークアップエンジニア AngularやReactなどのフレームワークとWeb Componentsを併用する利点を学びたいJavaScriptエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.3.1 Google Chrome 100.0.4896.127
iOS 15.4で追加されたCSS単位「dvh」が高さ100%問題を解決する
iOS 15.4でSafariに様々なアップデートがありましたが dvh という単位が追加されたことがWeb開発において大きな意味を持ちます。 これまでiOS Safariではスクロールを始めるとURLバーが小さくなり画面のサイズが変わるという問題がありました。 そのため高さ100%を「URLバーが大きい状態」と「URLバーが小さい状態」のどちらかで設定する必要があり、現在のURLバーの状態を反映した高さ100%をCSSだけで実現することは難しかったのです。 これを解決するのが dvh です。 結論 これまで height: 100%; や height: 100vh; と記述していた部分を height: 100dvh; と記述すればOK。 これまでの解決策 これまでiOS Safariで高さ100%を実現するためにはいくつかのパターンがありました。 パターン1: 100% パーセントで
CSS Variablesを使ってWeb LP制作のエンジニア作業時間を0にした話 - Mirrativ Tech Blog
こんにちは。Webフロントエンジニアの駒木です。 Mirrativでは毎週の様に運営主催イベントやゲーム会社様とのコラボ企画イベント等が開催されます。 そのイベント情報をユーザーへお伝えするメディアとして、イベント毎にWebページ いわゆる LP ( Landing Page ) を制作・公開しています。 Mirrativで公開している多種多様なLP ですが毎週の様に新しいイベントが企画・開催されますので、LPをエンジニアが都度制作していてはとても追いつきません。 そこでミラティブではCSS Variablesを活用することで、イベントの魅力が伝わるWeb LPをエンジニアが作業することなく制作・運用できる体制を構築しています。 本記事ではここまでに至った過程も含めお伝えします！ 目指すはイベント運用の効率化と専門性の排除 遡ること半年ほど前、イベント企画チームの目標として『より多くのイベ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【最新】レスポンシブデザインのブレイクポイントまとめ｜どのデバイスでも綺麗に見える秘訣とは ｜カロアタイムズ｜東京のデザイン会社/Web制作会社が運営するWeb制作・運用のナレッジメディア
How to Enable Dark Mode in HTML Email – Everything You Need to Know
CSS設計って最近こういう感じだと思うんですけどどうですか
https://pengi-n.co.jp/blog/vscode-extensions/
