Webサイトの基本要素 見出し・リスト・引用文のスタイルを整えるWebサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用の HTML と CSS コードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらっても OK です :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Sa
CSS3 を使って Windows から見るブラウザ上の "MS Pゴシック" をメイリオみたいに、アンチエイリアスさせて表示する方法を発見してしまったので紹介します。 さて、↓の２つのの文字を見比べてください。 実はどちらも同じ "MS Pゴシック"なんです（Chromeで画像化しています）。 CSS3 の transform を使う さて、これをどうやって実現しているかと言うと、CSS3 の transform を使って、アンチエイリアスさせたいテキストを、少しだけ縦方向に拡大しています。 .clear-type { -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 1.01); -moz-transform-origin: 0 0; -moz-transform: scale(1, 1.01); -ms-transf
The following error occurred: The requested URL was not found on this server. Please check the URL or contact the webmaster.
CSSはよくも悪くも柔軟で、構造的に管理するのが難しい。デザインが乱れた時に、よくよく確認してみると別な場所で定義されているクラスやID、またはタグ名に対する直接指定のプロパティが影響していたということはよくある。 ブックマークレット形式という珍しいオープンソース・ソフトウェア そのようなデザイン上の問題を素早く解決してくれる手助けをしてくれるのがSelectorGadgetだ。 今回紹介するオープンソース・ソフトウェアはSelectorGadget、ブックマークレット型のCSS構造解析ツールだ。 SelectorGadgetはオープンソース・ソフトウェアではあるが、ブックマークレットをコピーするだけでも利用を開始することができる。任意のページでブックマークレットを実行するとSelectorGadgetがローディングされる。 HTMLの構造が手軽に分かる それが終わったらCSS設定を知りた
てんぽ: サイドバー読み込みの進行割合に応じて画像を変化させる CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど CSSのみでプログレスバーを再現したものにはアニメーションGIFを用いた例が知られているが、 実際に何かの進捗状況を反映してバーの進行度を変化させている例はほとんどない。 今回は、ブログでよくある2カラムレイアウトにおいて「サイドバー」の読み込み状況を反映して進行するプログレスバーの実装方法を提案する。 <div class="sidebar"> <div class="blog-parts"> （各種ブログパーツ） </div> <div class="blog-parts"> （各種ブログパーツ） </div> （以下省略） </div> <div class="sidebar">～</div>がサイドバーであり、その内容として複数の「ブログパーツ」（<d
「ブログが作りたい！」はブログの作り方をご紹介する入門サイトです。FC2ブログ、ブログのカスタマイズ、Google Analytics、SEO、GIMPなどの情報をご紹介しています。 CSSの小技（8） 画像を重ねて表示したい場合は、1枚は CSS（background-image）で、もう 1枚を HTMLで指定するという方法が一般的ではないかしら。 ただそれは、1箇所くらいなら、良いのですが、複数箇所となると、その度に CSSを更新する手間があり、また何より CSSファイルが大きくなってしまって、運営上も好ましくありません。 そこで、今回の CSSの小技は、background-imageを使わずに画像を重ねて使う方法をご紹介いたします。 何の話なのだか分からないかもしれませんが、ご覧いただくと「あ、こういうことにも使えるかも！」という発見があるかもしれません。
JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。 popup.html 最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。 .photo a.popup:hover { background-color: #fff; } 何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。 あの頃のように… - CSS で画像ポップアップさせる (2005年6月10日 19:02) CSS で画像ポップアップ私の中ではかなりの革命です。なぜ今までこれに気が付かな
select要素の未選択時にだけ灰色に装飾する方法（CSSだけでplaceholder的な項目を加える書き方） 2022年06月17日 17:21 テキスト入力欄の高さを画面の高さ100％に合わせるCSSには、単位vhを使うと楽 2020年08月02日 14:00 日本語Webフォントでシャギーが出るのを防ぐ簡単なCSS 2020年06月24日 21:00 ボタン上のマウスポインタをリンクと同様に指さす手の形に変化させるCSS 2020年06月20日 10:57 プレースホルダの文字列をもっと薄く表示させるCSS 2020年06月10日 10:42 極細～極太まで、丸ゴシック日本語Webフォントを7段階の細さ(太さ)で表示する方法 2020年06月02日 13:48 偶数番目と奇数番目で画像の配置を左右逆転させるCSS 2020年05月16日 12:22 最後の要素の後には区切り線を引かな
idとclassの違いと使い分け！スタイルシート(CSS)適用法idとclassの違いと、使い分け方法をご紹介いたします。HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。 スタイルシート(CSS)を記述する際、「特定の要素すべて」を一括して装飾するのではなく、「特定の要素のうち一部だけ」を装飾したい場合、HTMLに付加できる属性は2種類ありますね。class属性と、id属性です。この「class」と「id」を、正しく使い分けられていますか？ この「class」と「id」は、どちらでもよい方法が2種類用意されているわけではなく、明確に役割が異なります。そこで今回
![idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
属性ウィンドウで[Window]タブを開きます。 [Form]から、Width,Height,Padding（省略可）, Margin（省略可）を 指定します。 [Scrollbar]から、ウィンドウのスクロールバー属性を指定します（省略可）。 scrollbar-track-color スクロールバーのない部分の色 scrollbar-face-color スクロールバー表面とバーのない部分の色 scrollbar-shadow-color 内側の枠と右下の色 scrollbar-darkshadow-color 外側の枠の右と右下の色 scrollbar-highlight-color 内側の枠の左と左下の色 scrollbar-3dlight-color 外側の枠の左と左上の色 scrollbar-arrow-color 矢印の色
ひとくちにCSSと言われますが、略さないで言うとCascading Style Sheetsであり、つまりカスケーディングするという特徴を備えたスタイルシート、ということになります。じゃあカスケーディングって何? と問われてみると、ふだんは直感的にCSSを使っているものの、言葉で説明するとなると難しいものです。 そもそもcascadingというのが日本人には難しい言葉です。英語のcascadeの元の意味を説明するなら「階段状になった滝」となるのだと思いますが、それが動詞化するとなると、なんかそれっぽい(=階段状になった滝のような)動作、としか言いようがなく、どうにもぴったりとくる日本語訳が無さそうなので、ここではそのままカスケーディングと書くことにします。 取り敢えずcascadeのイメージを湧かせるため、以下の画像を眺めてみてください。 cascade waterfall - Googl
これ…引用元のURIがコピペできないのはどういうわけなのか（そーす開いて探したぞ）あと対象のリンクぐらい入れて欲しい 引用元URIはCSSで自動生成しています。 blockquote:after{ display: block; content: "引用元URI: "attr(cite); color: #999; font-size: 85%; text-align: right; border-top: dashed 1px #999; } Firefox だと content された文をコピペできないぽいですが Opera なら可能です。マンセー。あと Firefox をお使いなら、引用文の上にマウスポインタを置いた上で右クリック→プロパティ(P)から引用元情報を参照できます。あとはてブユーザなら JavaScript を有効にしているはずで、それならあれこれポッ
CSS生成内容による属性値の表示とあれこれポップアップを組み合わせて使っている場合の問題点と、解決方法について述べてみます。 CSS2では、:before擬似要素や:after疑似要素とcontentプロパティを使うことにより、HTML文書の本文に無い内容を生成することができます。例えば、引用文のマークアップ(blockquote, q要素)について、title属性で示した引用元を表示させたりすることが可能です。 CSS生成内容表示サンプル ※ Firefox, OperaなどCSS2生成内容に対応したブラウザでご覧ください。CSSはHTML文書内にstyle要素として記述しています(以下のサンプルも同様)。 このようにCSSによりtitle属性の値を表示させている文書で、あれこれポップアップを同時に使用していると問題が起ります。マウスカーソルを該当の要素の上に移動させると、生成内容のうち
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
