CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
ダミーの画像やテキストを提供するweb components・「</placeholders>」
</placeholders>はダミーの画像やテキストを提供するweb componentsです。SVGで生成され、動作も高速です。 使い方もシンプル。勿論ReactやSvelte、VueなどのJSフレームワーク等でも利用可能です。 <script type="module" src="https://unpkg.com/@placeholders/core@0.0.2/dist/esm/placeholders.js"></script>スクリプトを読み込んで <placeholder-image></placeholder-image>このようなタグを使えば良いだけ。 <placeholder-image width="400" height="200" text="Hello World"></placeholder-image>従来のダミー画像生成サービス同様、サイズ指定や任意の文
ドラッグ&ドロップと簡単な編集作業でTailwind.cssベースのWebサイトを作れるオンラインページビルダー・「Tails」
Tailsはドラッグ&ドロップと簡単な編集作業でTailwind.cssベースのWebサイトを作れるオンラインページビルダーです。 ある程度ユーザー数を伸ばしたCSSフレームワークは大抵この手のツールが出ますね。Tailwindも同様に人気が上昇しているフレームワークといった所なのでしょう。 本ツールは従来のこの手のツールと使い方もさほど違いはなうので難しくないですし、さほど言う事もないのでCSSフレームワークの動向を探ってみます。 少し前にWhat’s Missing From CSS?という、CSSに足りない機能のアンケートを取っているプロジェクトがあるとご紹介しました。 こちらはCSSに関する調査を行っているThe State of CSSというプロジェクトの一環で、同じようにCSSフレームワークに関する調査報告もしてくれています。 上画像はその調査結果のページのスクショです。201
これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ
この記事では、Web制作が快適に捗る、便利な最新オンラインツールをまとめてご紹介しています。 新型コロナウイルスによる影響で、在宅によるリモートワークが増えたことで、誰かと一緒になにかを行う、コラボレーション関連ツールの公開が多くなっています。 その他にも面倒な作業をワンクリックで完了させる、知っておくと便利なジェネレーター系ツールや配色リソースなどが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. デザインコレクション 2. Web制作便利ツール 3. 配色ツール 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ デザインコレクション、UIキット Magma St
CSS GridをChrome デベロッパーツールで検証、デバッグする方法を解説
Chrome デベロッパーツールでWebページ上のCSS Gridを検証し、レイアウトの問題をデバッグする方法を紹介します。 Chromeの次のアップデートで予定されている機能で、現在はChrome Canaryで利用できます。 Inspect CSS Grid by Jecelyn Yeen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスの元、翻訳しています。 はじめに Webページ上のCSS Gridを見つける グリッドの表示オプション オーバーレイの表示設定 グリッドのオーバーレイ はじめに このガイドでは、Chrome デベロッパーツールでWebページ上のCSS Gridを検証し、レイアウトの問題をデバッグする方法を解説します。 使用しているCSS Gridのデモページは、下記の2つです。 Fruit box Snack box Webページ
登録不要で完全無料！ブラウザだけで完結する静的サイトジェネレータ「T3MPL」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上で誰でも簡単にWebサイトを作成できる無料の静的サイトジェネレータをご紹介します！ 特別な開発環境を用意する必要はなくて、コマンドラインからの実行も不要でユーザー登録もありません。そのため、誰でも気軽にWebサイトを作り始められる手軽さが特徴になっています。 本記事の後半では、書き出したソースコードを使ってネット上に公開する手順についても解説しているので、ご興味ある方はぜひ参考にしてみてください！ 【 T3MPL 】 「T3MPL」の使い方 それでは、「T3MPL」をどのように使えばいいのか詳しく見ていきましょう。 まずはサイトのトップページを下方にスクロールして、いくつかのテンプレートが表示されることを確認してください。 2020年10月時点において、以下のようなテンプレートを選択できるようになっています。 ランディングペー
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
Web制作の面倒な作業におさらば！便利な最新オンラインツール30個まとめ
この記事では、Webデザインやグラフィック制作がぐっと快適になる、最新便利オンラインツール、無料デザイン素材をまとめています。 これらのツールやサービスを利用すれば、これまで面倒だった作業も手軽に、そして短時間で行うことができ、普段のワークフロー改善にもつながります。用途や目的に応じて、お好みのツールを見つけてみましょう。 Web制作をもっと快適に！便利な最新オンラインツールまとめ CSS 3D Transform Examples 遠近感を利用した、奥行き感のある３DデザインをCSSで表現するサンプル集。コードをそのままコピーできるので、カスタマイズも自由自在。 BGJar ウェブサイトの背景デザインに適した、SVG画像をオンライン上で手軽に作成できる無料ツール。ボタン操作のみでカスタマイズを自由に行うことができ、商用利用にも対応しています。 VvvebJS 人気フレームワークBoots
Netlify + GitHub 環境で簡単にサイトを公開する方法 - mlog
今回は Netlify + GitHub 環境で簡単にサイトを公開する方法 について解説したいと思います！ 「 Netlify 」は静的コンテンツのホスティングサービスです。 GitHub や GitLab、Bitbucket のリポジトリに置いてある静的コンテンツを比較的簡単な設定で Web 上に公開することができます。 サイトを更新する場合も、GitHub に更新内容をプッシュするだけでサイトが更新 され、非常に便利です。 その他、公開用ブランチやディレクトリの選択が自由 だったり、無料枠の範囲で独自ドメインを設定できる など、簡単設定かつ高機能、懐にも優しいサービス内容となっています。 目次 目次 簡単な流れ 公開用の GitHub リポジトリの作成 リポジトリ作成 & クローン 公開用のブランチを作成 公開用ファイルを追加 コミット & プッシュ Netlify で公開設定 Net
レスポンシブWebデザイン対応のWebサイト開発に特化したオープンソースのWebブラウザ・「Responsively」
ResponsivelyはRWDの開発に特化したWebブラウザです。オープンソースとしてソースコードも公開されています 各スマホのデバイスやタブレット、PCなど異なるデバイスでどのように表示されるかを一括確認できる、というもの Electronベースとなっています。試しに使ってみました こんな感じで設定した各デバイスで指定したWebページが表示されます。スクロールやページの移動は全ウィンドウで連動しています。 ↑ インスペクタもついており、その場で編集、表示確認等を行う事が出来ます ↑ また、全デバイスのフルスクリーンショットもワンクリックで可能となっています。もちろん各デバイス単位でも撮影可能。撮影されたSSはドメイン、日付、撮影した時間を名前としたファイル名やフォルダ名で保存されますので上書きする心配もありません 尚、デバイスはかなりの量が用意されているのでお好みに合わせてウィンドウを
SVG形式のファビコンを設置しよう
2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと
Node.js,Python,RubyなどのWebアプリを完全無料でホスティング可能な「Unubo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、フロントエンドによる静的なWebページだけでなく、Node.jsなどのサーバサイドも含めた動的なWebアプリを無料でホスティングしてくれるサービスをご紹介します。 GitHubのリポジトリと連携することで、とにかくWebアプリを公開するまでの作業が簡単かつ高速に実現できるのが大きな特徴です。 サーバレスによる実行も可能なので、ご興味ある方はぜひ参考にしてみてください！ 【 Unubo 】 ■「Unubo」の使い方 それでは、「Unubo」をどのように使っていけば良いのか見ていきましょう！ まずは、サイトにアクセスしたら【SIGN UP】ボタンをクリックします。 無料のユーザー登録画面が表示されるので、ユーザー名・メールアドレス・パスワードを入力しましょう。 登録したメールアドレス宛にリンクが送られてくるので、それをクリックすれば登録完了
キーワードを入力するだけで自動でAIがイメージに合わせたロゴを作成してくれる「Designwithai」
ロゴを作成したい製品やブランドの名称と、イメージが当てはまるキーワードを入力するだけで、人工知能(AI)が自動で素早くロゴを生成してくれるサービスが「Designwithai」です。ロゴは自動で複数種類生成され、そのままダウンロードしてもよし、フォントや各要素の配置を微調整可能なカスタマイズツールを使ってもよしとなっています。 Designwithai | Artificial Intelligence Driven Design https://www.designwithai.com/ 2021/09/03追記：現在上記URLは別のページに変わっており、サービスの提供は終了しています。 使い方は簡単で、Designwithaiにアクセスして画面上部のテキストボックスにロゴに入れたい文字を入力して「GET STARTED」をクリック。今回は「GIGAZINE」と入力しました。 続いて、ロ
誰でもコンポーネントベースのWebサイトを作れるWebエディタ「Frontnd Builder」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、初心者の方はもちろん中・上級者も便利に活用できるWebサイト制作サービスをご紹介します！ ReactやVueのようなコンポーネントベースの開発を、ビジュアルエディタを使って効率よく開発できるのが特徴です。コンポーネントの再利用はもちろん、さまざまなプリプロセッサも搭載されており、開発から公開までこれ1つで完結できてしまいます。 基本的な機能はすべて無料なので、Webサイトの開発にご興味ある方はぜひ参考にしてみてください！ また、paizaラーニングでは、Webページ作成に欠かせないHTML/CSSを学べる講座やWebデザイン入門講座を公開中です。合わせてチェックしてみてください。 【 Frontnd Builder 】 ■「Frontnd Builder」の使い方 それでは、実際にFrontnd Builderをどのように使っていくのか
Webサイトでどのようなテクノロジーが使われているかを調査できるChrome拡張・「WhatRuns」
WhatRunsは任意のWebサイトでどのようなテクノロジーが使われているかを調査できるChrome拡張です。かなり前にご紹介させて頂いたLargerIOと同じ目的ですが、こちらはブラウザ拡張としてその場で利用できるので手軽で使いやすそうです。 例によって試しに使ってみました 使ってみる 調査対象は見出しでCMS、Analytics、Web Serverといったようにカテゴライズされていてわかりやすい印象でした。また、各テクノロジーはマウスホバーでそのテクノロジーのWebサイトへのリンクも表示してくれます。 かなり細かく調査できる一方で、例えば当ブログのようにWordPressのテーマ名は検出できるのに本体のCMSとしてのWordPressが検出できないケースもあったりと、不完全な部分もあるようです。が、軽量で使い勝手もいいので個人的にはオススメです。 WhatRuns
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Amazon」「楽天市場」「Yahoo!ショッピング」「価格.com」表示スピードNo.1はどこ？ 自社ECとECモール店はどっちが速い？ | 勝手にスピードテスト Powered by SpeedCurve
Gatsby搭載のドキュメントサイト向けサイトジェネレーター・「Docxy」
ファビコンを簡単に作成できる無料ツール！テキスト・画像・絵文字から生成でき、各デバイスのサイズにも対応 -favicon.io
Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap
Webサイト・アプリのページ構成を分析、サイトマップを自動的に作成するオンラインサービス -Visual Sitemaps
