シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
文字サイズ変更ボタン をスマートフォン用テンプレートに設置
文字サイズ変更ボタン をスマートフォン用テンプレートに設置 【 ありのごとくあつまりて 】 この記事に含まれるタグ （Keyword） : jQuery javascript フォント iPad スマートフォン ブラウザ 文字サイズ変更ボタン をスマートフォン用テンプレートに設置 2013/05/26 (日) カテゴリー： ブログカスタマイズ上級 スマートフォン用テンプレートに 文字サイズを デフォルト・大きめ・特大 などに調整できる jQuery のスクリプトを設置してみました。 クッキーを利用しているので、ページを送っても有効です。 iPad からFC2ブログを閲覧した場合、以前は パソコンからのアクセスと同じ扱いになっていましたが、2013年3月頃からは スマートフォン用テンプレート にも切り換えられるような仕様に変わっています。（※現在のデフォルトは PC用テンプレート
WebKit を念頭に作成されたサイトで起きるブラウザー互換性問題に対する Firefox の対応 | Mozilla Japan ブログ
[この記事は米国 Hacks ブログで公開された "Firefox 49 fixes sites designed with Webkit in mind, and more" の抄訳です] 最近 Hacks で公開したいくつかの記事で、 ブラウザー互換性を意識したウェブ制作の重要性 と、優れた開発者がブラウザー互換性を考慮してどのようにウェブを制作しているか について述べてきました。すべての人がウェブを利用できるかどうかは、開発者にかかっています。今日の時点で、多くの 互換性に関する機能 が Firefox のレンダリングエンジンである Gecko に搭載されています。これは WHATWG の定める最新の互換性標準 によるものです。 Firefox の今回行われた更新で、特筆すべき変更が加えられました。それはいくつかの -webkit- のついた属性と、WebKit に固有なインターフェ
何番目系の便利なCSSまとめ - Qiita
最初 :first-child 最初の要素（親要素から見て、子要素すべての最初） デモ :first-of-type ある要素の最初（親要素から見て、ある子要素の最初） デモ 最後 :last-child 最後の要素（親要素から見て、子要素すべての最後） デモ :last-of-type ある要素の最後（親要素から見て、ある子要素の最後） デモ 1個だけ :only-child 1個だけ子要素がある（親要素から見て、子要素が1個だけある） デモ :only-of-type 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） デモ X番目 :nth-child(X) X番目 デモ：５番目 :nth-of-type(X) ある要素のX番目 デモ：５番目 :nth-child(Xn) Xの倍数 デモ：2の倍数 :nth-of-type(Xn) ある要素のXの倍数 デモ：2の倍数
CSSで計算式を可能にするcalc()ファンクション
Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
Windows で游ゴシックが細く見えないようにする CSS - Corredor
最近の Windows と Mac の両方に標準搭載されている「游ゴシック」フォントだが、Windows にのみ細字の「Light」が搭載されているため、CSS でフォント指定をしても、Windows で閲覧したときだけ細いフォントで見えてしまう。 細いフォントも悪くはないが、個人的には少し見づらいので、もう少しだけ太く表示できるようにしてみる。 CSS 今日デザインを変更したぼくのサイト Neo's World - Neo's World では、以下のような CSS 指定にした。 body { font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; font-weight: 500; } 2019-06-04 追記：当時はよく分からず書いてい
unicode-bidiでメアドを変換 - lucky bag
CSS の unicode-bidi プロパティを使ったアイデア。つか、良く思いついたなって感じ。 ネタ元 「 Stu Nicholls | Cutting Edge CSS | Hiding email address 」 文字コードの Unicode では、日本語であれば左から右へ、アラビア語であれば右から左へと言う風に言語により文字方向の表記が決められています。 unicode-bidi プロパティを使えば、これを変える事が出来ます。ネタ元では、これをメールアドレスに適応して、ソース上は逆方向に記述し、CSSの unicode-bidi プロパティによって、見栄えを正しく見せています。ロボットからのメールアドレス収集を防げるかも知れませんね。 メールアドレス： moc.gab-ykcul@ofni 上記の(X)HTMLソースコードは下記のようになっています。 <address> メー
文字の書き始めの位置を左右指定する
解説 文字の横書きに対する方向を指定するスタイルシートです。 日本語では、文章は左側から書き始めるのが普通ですが、アラビア語など中には右側から書き始める言語もあります。 これらに対応するため、CSSでは文字の方向を指定するプロパティがあります。 値（direction） 「direction」プロパティで文字の方向を指定します。 「direction:ltr;」は左から右へ文字を並べます。 一方、「direction:rtl;」とすると、文字が逆転し、右側から左側へ文字が表示されます。 ただし、IEでは日本語の文章に「direction」プロパティを適用しても文字が逆転しません。 そこで、ユニコードに対応する「unicode-bidi」プロパティを併用します。 値（unicode-bidi） 「unicode-bidi」プロパティは、Unicodeで定められた規格に対して「directio
レスポンシブなのを作ってたら、firefoxでtable内の画像が圧迫した件
何かに使える気がするのでメモしておく。 起ったこと レスポンシブなサイトを作っていたら、firefoxで想定通りの動きをしてくれなかったのよ。 具体的には何が起ったのか？ table内に配置した画像が、ウィンドウ幅に合わせて縮小してくれず、隣のthを圧迫してしまった。 なお、thにはwidth設定がし何かに使える気がするのでメモしておく。 起ったこと レスポンシブなサイトを作っていたら、firefoxで想定通りの動きをしてくれなかったのよ。 具体的には何が起ったのか？ table内に配置した画像が、ウィンドウ幅に合わせて縮小してくれず、隣のthを圧迫してしまった。 なお、thにはwidth設定がしてあり、tdにはwidth設定がない状態（つまりtd側が可変） にも関わらずfirefoxのみ出来てない！ あ、OSはmacですのん。だからIEはみてないｗ←ある程度出来てからチェックするつも
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
CSS3 Patterns Gallery
Click on a pattern to expand Textareas are editable Browser support Submit a new one Github repo Enjoy! Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial
CSSブレンドモードで画像を彩ろう
2018年11月12日 CSS Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。 ブレンドモード一覧 基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat;
CSSフィルター：背景の一部をぼかす表現 – ハック｜kousoku AWS
サンプルはこちら。 http://codepen.io/KazuyoshiGoto/pen/nhstF テキストの乗っているレイヤーで擦りガラスを通したような表現を作っています。 CSS(Sass) HTMLはごくシンプルなので要のCSSについて。 body, section:before { background:url("***.jpg"); background-position: center; background-size: cover; background-attachment: fixed; } section:before { content: ""; z-index: -1; -webkit-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); position: absolute; width: 1
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
【alevirita】title属性を使っておくとCDPが捗る
title属性は要素に対しての補足情報を付け足す属性ですが、メニューや見出しのtitle属性に英訳や日本語訳を指定しておくと、デザインに幅を持たせることができます。 <a href="index.html" title="index">最初のページ</a> <h2 title="サイトについて">About Site</h2> CSSの:beforeや:afterとcontentを使って、title属性を併記したり、title属性だけ見えるようにしたりできます。IEは8以上で対応しています。IE7や6だと有効になりませんが、そういう未対応のブラウザでは普通の内容が見えるだけなので、display:noneやtext-indentやpaddingで内容を見えなくして背景画像だけを見せる画像置き換えと違って可読性は損ないません。JavaScriptを使えばIE7や6でも使えます。その部分をコピ
alevirita
2020年7月8日の更新をもってCDPの更新を終了しました（致命的問題を発見した際の修正除く）。サポートは引き続き受け付けています。今後テンプレートが更新されるときはオリジナルのものになります。 2023-12-21 wp-dreamphp をver.2.2にバージョンアップ（不具合修正・機能追加） 2023-11-15 dream.phpをver.5.5にバージョンアップ（機能性・構成の変更）、伴ってwp-dreamphpをver.2.1.0にバージョンアップ（dream.php ver.5.5への対応） 2023-11-10 use-dreamphp.jsをver.2.3にバージョンアップ（不具合修正） 2023-08-02 DreamViewerをver.2.0.1にバージョンアップ（不具合修正） 2023-08-01 DreamphpViewer改めDreamViewerをver.
CSS着せ替えテンプレート企画
CDPで用いられているHTML 4.01は最新のバージョンの仕様ではなく、2018年には「Superseded Recommendation（古いもの）」のステータスになっています。 直ちにCDPがブラウザで表示できなくなるということはないですが、 現在CDPを使っている方やこれから導入を考えている方は、より新しい仕様に書き換えての使用を強く推奨します。 2019年6月追記 基礎HTMLをダウンロードしたい方は基礎HTML配布にアクセスしてください なぜこういった形態の配布法をしているのか知るためにはユーザーMENUにアクセスしてください 配布されているCDPを探したい方はCSS配布サイトリンクを利用してください CDPのCSSを自身で作成し配布したい方は制作者MENUにアクセスしてください 疑問点があったり理解を深めたい方はFAQにアクセスしてください このサイトについて CSS着せ替え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「nth-child」と「nth-of-type」の使い方と違い
gradcolor.com