Tailwind CSSを使う時の疑問と解決方法
2024年1月24日 CSS, Webサイト制作 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 ↑私が10年以上利用している会計ソフト！ Tailwind CSSとは Tailwind CSSは、あらかじめ多くのクラスが用意されているCSSフレームワークです。Webサイトを制作する時に、HTMLの要素に直接、定義済みのクラスを付与して使用します。基本的に1つのクラスに1つのスタイルが当てられていて、例えば「m-0」というクラスをつけると margin: 0px; が、「w-full」というクラスをつけると width: 100%; が加えられます。 実際にどんなものか見たほうが早そうで
モバイル幅で作成されたWebサイトの特徴と作例
2022年7月20日 CSS, Webデザイン, スマートフォン モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけます。今回はそんなモバイル幅のWebサイトを見ていこうと思います。 ↑私が10年以上利用している会計ソフト！ モバイル幅Webサイトの特徴 デスクトップで見ても狭いコンテンツの幅 よくあるWebサイトでは、コンテンツ部分の枠がデバイスの幅によって変化します。例えばモバイルサイズでは幅が狭くなり、デスクトップサイズでは幅が広がって画面中央に表示されます。このブログでもそうですよね。しかし、昨今見られるようになったレイアウトでは、デスクトップサイズで見てもコンテンツ枠の幅は狭いままで表示されています。画面中央に表示
色覚障がいの方が作ったサイト【We are Colorblind】が勉強になる
2013年3月23日 Webサイト制作, アクセシビリティ, 色彩 「We are Colorblind」というサイトをご存知でしょうか？サイト名を訳すと、「我々は色覚障がい者です」。そう、色を識別することが困難なデザイナーさんの作ったサイトです。数々の例とともに、Webサイト制作における改善すべき点を指摘してくれています。とっても勉強になったので、簡単に紹介します！ ↑私が10年以上利用している会計ソフト！ Webクリエイターボックスでは以前「色覚障がい者に配慮したWebサイトの作り方」という記事で色覚障がいとは何か、どのように見えるのか、また、Webサイト制作において注意すべき点をまとめました。読んでいない方は、まずはこちらに目をとおしてみてくださいね ;) Webサイト「We are Colorblind」の中の人はオランダ在住のデザイナー、Tom van Beveren氏。サイト名
Facebookページの作り方 2012年1月版
2013年3月23日 Webサイト制作 一年ちょっと前に「Facebookページを自由にカスタマイズする方法」という記事でFacebookページの作成方法を説明したのですが、Facebookはコロコロ仕様を変更するため、その記事を読んでもFacebookページは作れませんｗ 今や使い物にならない記事にもかかわらずアクセス数はかなりあるので、訂正…というか新仕様にあわせたFacebookページの作成方法を説明します。 ↑私が10年以上利用している会計ソフト！ 冒頭でも書きましたが、Facebookページの作り方についての記事は、半年以上前に書かれたものはアテにしないほうがいいです。それほどFacebookは仕様変更のスパンが短いのです。この記事もあと半年後には書き直しなのか…そうなのか…。 基本的なFacebookページの作り方 まずはFacebookページを新規作成します。こちらの「Fac
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
