placehold.jp | 簡単！ダミー画像作成
基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。
2022年版：おすすめのWebアイコンフォントサービス10選 | Web Design Trends
Webアイコンフォントを利用することで、数千種類のアイコン素材をWebサイト上で簡単に表示することができます。 Webサイト上で多くの画像ファイルを読み込むとページの表示速度に影響してしまいますが、Webアイコンフォントであればファイルサイズをほとんど気にせず利用することができます。 今回は、Webアイコンフォントの基本と、2022年現在のおすすめWebアイコンフォントサービスをご紹介したいと思います。 【2024】無料で使えるフリーアイコン素材サイト30個まとめ【商用利用OK】 アイコン素材はWebデザインのあらゆる場所で活用することができます。ボタンやリストの見出し、ラベルなどにアイコン素材を取り入れれば、より使いやすくデザインも優れたWebサイトを作ることができますね。 ... Web Design Trends Webアイコンフォントとは Webアイコンフォントとは、HTMLのタグ
Webアイコン「IcoMoon」の使い方とアイコンの追加方法
「IcoMoon」や「Font Awesome」はWebアイコン Webアイコンとは、見た目は画像ですが実はフォントという代物です。 これを使う利点は2つあります。 画像を用意しなくてもいい事と、大きさや色を自由に変えることが出来るという事です。 特に後者が有能で、サイトのデザインを変える度に新しい大きさの画像を用意するという煩わしい作業から解放されます。 デザインなんてそうそう変更する事は無い、と思いがちですが日常的にデザインが変わる機会があります。 それはレスポンシブで画面サイズが切り替わる時です。 例えば、注意書きとして以下のような一文を書いたとします。 気をつけて！ ここで使っている黒丸のチェックマークはWebアイコンですが、これが画像だった場合スマホ用に文字サイズが小さく切り替わった時、一緒に小さくはなってくれません。しかし、Webアイコンであれば勝手に文字のサイズにピタリと合わ
nakamu.life - このウェブサイトは販売用です！ - nakamu リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ドロワーやモーダルをCSSだけで実現する方法 | HPcode（えいちぴーこーど）
ドロワーやモーダルといった、いかにもクリックアクションをJavaScriptで操作している系の動きも実はCSSだけで実現できたりします。 仕組みの大枠としては、以下の3つを組み合わせる感じです。 チェックボックにあるチェックされた時のスタイルを適応できる:checked クリック要素（チェックボックスのon/off）として使うfor属性 アニメーションを制御できるtransition
CSS入門：select要素(プルダウン)の矢印を消す方法 - プロエンジニア
プルダウンメニューなどのselect要素をCSSでカスタマイズして標準の矢印を消す方法を解説します。cssを使って背景やボーダーの色などを装飾する方法についても説明します。 1. select要素で表示される矢印を消す方法 1.1. 通常のプルダウンメニュー まずは通常のプルダウンメニューを作成してselect要素の標準スタイルを確認してみましょう。「select1.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。 ●select1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS入門-select要素の装飾</title> <style> form { width: 50%; /* フォームの横幅を指定する */ padding: 20p
『詳解CSS レスポンシブウェブデザイン編』をVS Codeに対応させました｜ドットインストール
今週は「詳解CSS レスポンシブウェブデザイン編」をVS Codeに対応させました。旧版と内容は変わっていないので再受講の必要はあまりありません。 他のレッスンがVS Codeなので合わせたほうがいいな、と思いついたのが3日ぐらい前だったのですが、スピードリリースできました。ツールや内容が少し変わるぐらいの再収録はこのぐらいのペースで仕上げていきたいところです...。 ↑ スマホ対応サイト制作のテクニックについて学びます。全8回でさっと学べるのでご興味がある方は是非どうぞ。 ・詳解CSS レスポンシブウェブデザイン編 (全8回) https://dotinstall.com/lessons/basic_responsivewebdesign_v3
CSSで文字をシャープに見せる方法。｜shingo ｜signage/web制作/app開発/トータルプロデュース
にじんでいた・・・。 同じフォントを指定しているのに、ブラウザによって微妙に太さが違う事があって、どうにか統一できないものかと調べてみました。 そもそもブラウザによってフォントにそれぞれ独自のレンダリングがフィルターされていたのです。 「にじんでいた」が当てはまるかは怪しいですが、ほんの少しだけ文字がボケて表示されていました。 CSSに書き足すだけでシャープにできた！ 実に簡単でした。 フォントをシャープに表示するCSS body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 例ではBodyに入れちゃってますが、不都合があれば任意の場所に入れてください。 値の意味 Webkit -webkit-font-smoothing: none; //アンチエイリアスをしない -webkit-f
CSS3によるFlexアイテムの折り返し | CSS3逆引き | Webサイト制作支援 | ShanaBrian Website
Flexアイテムの折り返す方法を変更する場合は、flex-wrapプロパティ（旧仕様ではbox-linesプロパティ）を使用します。 Flexアイテムは、通常Flexアイテムの合計幅がFlexコンテナーの幅を超えると、Flexアイテムの幅は自動的に縮小していきます（flex-growに応じて縮小の仕方は異なる）が、flex-wrapプロパティを設定することで、折り返すようになります。 flex-wrapはflex-directionの指定によって折り返す方向が変わります。 なお、flex-wrapプロパティはショートハンドであるflex-flowプロパティの2番目の指定にあたります。 構文
echo.css : CSS framework optimized for CMS theming
すべてのオブジェクトが、画面サイズに応じて適切に伸縮します。 「見出しだけ小さい」「ボタンだけ大きい」と悩むことはありません。 文字サイズなどの変化のパターンは役割ごとにグループ化。スタイルガイドの各ページに値が明記されているので、デザイナーとも簡単に共有できます。 複数カラムレイアウトでありがちな「ここでは伸縮してほしくない」にも対応しています。 echo.cssはグレースケールと2色のシステムカラーのみで構成しています。クリーンなウェブサイトづくりに最適です。 Sassを利用できる環境なら、日本のウェブフォントサービスの大問題「font-weight: bold で太さを変えられない」も変数設定だけで解決します。 パッケージには、色とフォントのスタイルだけを抜き出した、上書き用CSSも含まれています。色を変えたり、クラスを増やすカスタマイズが簡単にできます。
MUSUBii
Simple CSSFramework for JP MUSUBiiは日本語サイトのインブラウザデザインを想定したシンプルで薄味のレスポンシブ対応CSSフレームワークです。Getting StartedCC0-1.0・Repository・Releases 腹が減ってはコードが書けぬ！Web制作の腹ごなしに、CSSフレームワークMUSUBii（むすびー）をどうぞ。 MUSUBiiは、日本語サイトのデザイン・コーディングを元気づけます。 必要なものを食べておくWeb制作は小技の積み重ねなので、毎回1から作っていたら辛いですよね。MUSUBiiにはリセットCSS・ボタン・グリッドなど利用頻度の高い汎用スタイルが詰まっています。まずはMUSUBiiをほおばってからWeb制作を始めてみましょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tailwind CSS Cheat Sheet
https://www.abstractui.com/
10+ Best Tailwind CSS Templates for Your Next Project
UNPKG - tailwindcss
Rails6でTailwind CSSをインストールする｜canesro｜note
「#css」の人気タグ記事一覧｜note ――つくる、つながる、とどける。
CSS:flexでボタンの要素を下揃えにする｜ミヤシタ レン｜note
Style guide | echo-css
★レスポンシブの基本、メディアクエリの書き方 | | それからデザイン スタッフブログ