CSSでテキスト、画像、何でも点滅！ - ホームページ制作会社 横浜 株式会社ウィル
テキストを点滅させる blink は、FirefoxやOperaなどの過去のバージョンではサポートされていましたが、 現在主要なブラウザでサポートを外されており動作しません。 blinkが使えなくなったことで困る方はいないと思いますが、 知っていて損はありませんので、CSS Animation を利用して点滅させる方法をご紹介します。 まずは、コピペで！ CSS /* 点滅 */ .blinking{ -webkit-animation:blink 1.5s ease-in-out infinite alternate; -moz-animation:blink 1.5s ease-in-out infinite alternate; animation:blink 1.5s ease-in-out infinite alternate; } @-webkit-keyframes blin
色々なパターンの点滅するCSSアニメーションサンプル集 | 1 NOTES
文字や要素を点滅するCSSアニメーションのパターン集です。 各点滅アニメーションのサンプルコードは@keyframes（キーフレーム）を使ったanimationを利用しています。 通常点滅パターンシンプルなフラッシュパターンで、1秒間隔で点滅アニメーションさせています。 See the Pen CSS Flash animation 1 by yochans (@yochans) on CodePen. <div class="box"></div>.box { animation: flash 1s linear infinite; width: 50px; height: 50px; background: #0091EA; margin: 20px; } @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
マウスカーソルの形状を変える
解説 「cursor」プロパティは、ページ上で表示されるマウスポインタ（カーソル）の種類を変えることができるスタイルシートです。 通常、マウスカーソルは矢印で表示されますが、リンクの上にきたときや入力中のはそれぞれ異なる種類のカーソルが表示されるはずです。 これらカーソルの種類を要素ごとに変えることができます。 値 「cursor」プロパティで指定できるカーソルの種類に割り当てられた値は、以下の表のようになっています。 以下はWindows系のOSのポインタの一例です。 OSやブラウザによって表示されるカーソルの形状は異なります。 値 カーソル形状 ポインタ例
OSXのChrome/Safariにて、全角幅=2半角幅で等幅表示するためのCSS - Qiita
OSXのChromeにて、pre要素のfont-familyにmonospaceを指定したのですが、全角と半角それぞれは等幅になっているものの、いわゆる全角文字が半角2つ分で表示されていませんでした。あれれと、以前はそうなっていたのにと色々試していたところ、font-sizeが関係していました。 等幅で全角文字=半角2つ分となる条件 font-familyで等幅フォントを指定し、かつfont-sizeはpxかemで指定しつつ、以下の条件を満たしていればOKのようでした。 pxで指定する場合は、偶数であること emで指定する場合は、自然数であること CSSの例 例えばこんな感じで。 font-family: Osaka-mono, "Osaka-等幅", "ＭＳ ゴシック", monospace; font-size: 14px;
inputやtextarea、buttonなどにfont-familyやfont-sizeが適用されないときの対処法
inputやtextarea、buttonなどにfont-familyやfont-sizeが適用されないときの対処法 ウェブサイトを開発しているとき、なぜかinputタグやbuttonタグにfont-familyやfont-sizeで指定したスタイルが適用されなかった。他にもtextareaタグやselectタグ（ドロップダウンリスト）にも適用されなかった。 調べてみたところ、MDNに答えが載っていた。 フォントとテキスト CSS のフォントやテキストの機能は、任意のウィジェットで容易に使用できます (また、フォームウィジェットで @font-face も使用できます)。ただし、ブラウザの動作にしばしば矛盾があります。デフォルトで、一部のブラウザは親から font-family や font-size を継承しません。代わりに多くのブラウザでは、システムのデフォルトの体裁を使用します。 H
改行コード(\n)が含まれる文字列をブラウザの表示上で改行表示させる方法 - Qiita
はじめに HTMLタグの要素内容として、改行コードを含む文字列を埋め込んだ場合に改行の見せ方をブラウザ側で調整する方法がわかりました。 vue.jsを使用したプロジェクトなのでVue.jsのコンポーネントを使用していますが、vue.jsとかmustache記法は関係ありません。 困っていること 何もしないと、こんな感じになります。 エラーメッセージとはいえ、美しく表示させたいのでエラーメッセージ毎に改行表示させたい。 JS側のコードになるべくHTMLタグを入れ込みたくない。 実行結果 サンプルコード <template> ... <strong>Error: {{message}}</strong> ... </template> <script> export default { data() { return { message: `User nameは必須項目です。 E-m
tableのcolでCSSのtext-alignが効かない！というどぅーでもいい話
全然、科の話では無いのですが授業ネタ。 最近、AKBの総選挙があって、それをネタにHTMLのtableを練習しよう！というお題をやっていました。で、票のところは数値なので、右寄せにしたいじゃないですか！ で、colgroupを使って右寄せにしようとしても、それは反映されません。これはブラウザの実装の問題ではなく、そもそもtext-alignは指定されたブロック要素の中に在るインライン要素に対する指定で、これがtdやthなら有効なのですが、colやcolgroupはtdやthの親要素ではないという扱いなので、こうなります。table要素も他のブロック要素と違う振る舞いをする面もあり、悩ましいですね。これを何とかしようとすると、右寄せしたいtdにclassを設定して、そのstyleでtext-alignを使うしかありません、縦一列を一元化して指定したくても、出来ません。 colって何のために在
col／colgroup 要素で有効なスタイルと無効なスタイル。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog 「ある列だけを改行なしにしたい」というときが結構あります。 確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。 ソースの見栄え的にもいただけない感じ。 そこで、col や colgroup が使えるんじゃないかと思い、事あるごとに試していました。 が、どうしてもうまくいきません。 col と colgroup の組み合わせ方を変えてみたり、CSS の設定を工夫してみたり、いろいろ試しましたが結果は同じ。 ただ、設定したスタイルの中でも適用されるものと適用されないものがあり、その違いがよく分からないままだったので、どうもしっくりこない状態なのでした。 んで今回も似たような場面に遭遇したので改めて調べ
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
※記事更新から1年以上が経っているため情報が古い可能性があります 当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。 投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。 そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。 当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。 デザイン完成図 使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢
HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS
CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。 参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます
SPAN要素の固定幅、高さのスタイル指定 - happynow’s diary
SPAN要素を固定領域で確保したい場合のスタイル指定は下記のとおり。 style で display、height、widthを指定する。 とりあえず、対応ブラウザは次で確認。 CSS2 - The display declaration <html> <head> <title>Span Fixed Style</title> <style type="text/css"> #hoge { display: inline-block; background-color: Orange; height: 10px; width: 30%; } </style> </head> <body> <span id="hoge" /> </body> </html> 参考サイト html - CSS fixed width in a span - Stack Overflow
font-weight - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSS フレームワークを使いたくない - ジンジャー研究室
CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない！」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ
HTML［colgroup要素］表の列グループを表す - TAG index
colgroup要素は、表の列をグループ化します。この要素は、table要素の子要素として使用します。 <colgroup span="3"></colgroup> <colgroup> <col span="1"> <col span="2"> </colgroup> span属性は、colgroup要素内にcol要素がない場合にのみ、指定することができます。 colgroup要素を使用すると、1つ以上の列を意味的なまとまりとしてグループ化することができます。 次の例では、5列の表を3つのグループ（1列：2列：2列）に分けています。 <colgroup span="1"></colgroup> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> グループ化の指定を行なうと、グループ単位でスタイルを設定できるようになり
子孫セレクタ－スタイルシートリファレンス
以下の使用例では、ｐ要素の下にあるstrong要素にスタイルが適用されます。 この際、p要素直下にある子要素のstrong要素だけではなく、孫要素以下のstrong要素にもスタイルが適用されます。 ■使用例 スタイルシート部分は外部ファイル（sample.css）に記述。 p strong {background-color:#3399FF; color:#ffffff; padding:5px;} span {font-size:small;} HTMLソース <html> <head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <h2>今日の<strong>お天気</strong></h2> <p> 今日は<strong>晴れ</strong>です。 <span><strong>洗濯
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
height－スタイルシートリファレンス
heightプロパティは、 <TABLE>・ <TD>・ <IMG>・ <INPUT>・ <TEXTAREA>・ <SELECT> などの領域の高さを指定する際に使用します。 指定方法には、実数値にpxなどの単位をつけて指定する方法と、親ボックスに対する割合を％で指定する方法と、 状況に応じて大きさが設定されるautoを指定する方法があります。heightプロパティに負の値は指定できません。 ■値 auto 状況に応じて自動設定します。これが初期値です。 数値で指定 数値にpxなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。 ％で指定 ％値で指定します。 スタイルシート部分は外部ファイル（sample.css）に記述。 table.sample {height: 100px; backg
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】点滅させる<blink>をCSSアニメーションで実装する | web屋tM
CSS で div の場合でも文字数と背景の幅を揃える
【応用】Flexboxレイアウトまとめ - Qiita
