メインビジュアルに合うフェードインアニメーションをCSSで実装する | Pulp Note
フェードインアニメーションをCSSのみで実装する方法です。アニメーションを発火させるタイミングの調整ができないので、ヘッダーやメインビジュアルといったファーストビューに使える方法になります。 See the Pen Fade-in Animation by Kobayashi (@Pulp_Kobayashi) on CodePen. h1 { position: absolute; top: 30px; animation: 0.4s fadeinlogo 0.9s forwards; opacity: 0; } @keyframes fadeinlogo { 0% { left: 20px; } 100% { left: 30px; opacity: 1; } } button { position: absolute; right: 30px; animation: 0.4s fad
【追加CSSのみ】WordPressテーマ『SnowMonkey』をカスタマイズしてお洒落なウェブサイトを作ろう | もっとウェブを。
どうも、たっくん（@wakutakublog）です。 今回はWordPressテーマ『SnowMonkey』をカスタマイズして、お洒落なWEBサイトを作っていきます。 こちらが完成イメージ↓（クリックで拡大表示できます） 『Snow Monkey』はかなり使い勝手のいいWordPressテーマで「少しでも多くの人に広まるといいな…」と思ったので、知識がなくても同じサイトを作れるよう、カスタマイズに使うCSSはコピペ可能にしておきました。 たっくんぜひ一緒に作りましょう…！ ※ 動画を見ながら進めたい方はこちらの「再生リスト」をご覧ください↓ ※ WordPress環境をまだ用意していない方は、『 Local by Flywheel 』でWordPressローカル環境を作って初期設定をしよう を参考に環境構築をしておきましょう。 あわせて読みたい『 Local by Flywheel 』でW
CSSのみでメガメニューを実装する方法 | TechMemo
jQueryプラグインなどを使わずに、CSSのみでメガメニューを実装する方法をご紹介いたします。 以下デモページのようなメガメニューを作成します。デモページでは、”メニュー1″にマウスホバーすると、メガメニューが表示されます。 デモページを見る HTMLのマークアップは、以下のようにします。 <nav class="gnav-wrapper"> <ul class="gnav main-wrapper"> <li> <a href="">メニュー1</a> <div class="megamenu"> <ul class="megamenu-inner main-wrapper"> <li> <a href=""> <div class="megamenu-inner-img"><img src="images/megamenu-inner1-1.png" alt=""></div> <d
Chromeで画像を縮小表示すると文字がなんだかぼやける現象を回避するTips
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 今日は現在(2018/01/09現在)Chromeで起きている問題をちょっとした事で解決できることが分かったので検証もかねて記事にしてみました。 早速いってみましょうどうぞー！ 問題：Chromeで画像を小さく表示してるとなんだかぼやける(Windowsの場合) お気づきの方も多いかと思いますが、クライアントのサイトをブラウザチェックしていた時ですが、画像にしたテキスト文字がぼやけて見えました。 最初は画像の縦横比が違うのかな？って思って色々チェックしてみたのですが、どうやら違うみたい。 調べた結果、どうやらChrome(Windowsの)でのみ起きている問題だということが判明しました。どうやら縮小する時の処理の仕方がChromeだと他と違い文字がぼや
CSS Gradient Animator
@-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
読んだ内容まとめてLT会「インクルーシブHTML+CSS&JavaScript」
2018.10.11の「読んだ内容まとめてLT会」の発表資料です。
初心者向け！HTML/CSSのコーディング手順をイチからしっかりと。
2019年1月24日 CSS, HTML, Webサイト制作 HTMLやCSSの書き方を勉強してみたという初心者さんから、いざ自分でWebページを作っていくとなると、何から始めればいいのやら…？という声をよく耳にします。きちんと構成を考えてコーディングを始めないとレイアウト崩壊の危機…！今回は完成したデザインをHTML/CSSでコーディングしていく第一歩目の手順を紹介します。 ↑私が10年以上利用している会計ソフト！ 今回作るWebサイト例 こんな感じの、よくあるヘッダー・メイン・サイド・フッターで構成されたWebサイトを作っていく手順を考えていきましょう！ 1. ファイル、フォルダーを作る まずは必要なファイルとフォルダーを用意します。必要なファイルやフォルダーはそのWebサイトによって変わりますが、基本的にはプロジェクトフォルダーの中に index.html、CSSを入れる「css」フ
【css】どこまでselectをデフォルトの状態で装飾出来るか - Make note
納期に追われて時間が無かった為、久しぶりの投稿となります。 今回は、簡単なことでしたが、随分とハマってしまったselectの装飾をメモしたいと思います。 目的 「デフォルト状態」のデザインを弄らずに装飾を行いたい 先に結論から言うと、この「デフォルト状態」ってのミスリードを誘った原因です。こいつが厄介だったわけですね。 何を勘違いしてハマったかは今回のテーマにも関係していくので、順々に分かり易く伝えられたらと思います。 通常selectをレイアウトするには？ まず先に述べておきますが、通常デザインされていないselect（プルダウン）を用いることはあまりないと考えていいでしょう。 なのに何故デフォルトを装飾する必要があるのか？ それはデザイン資料が足りず、最低限のトンマナを揃えて表示しておく時など、特定の要望があった場合に限られると思います。 なので今回は特殊なケースとなりますが、覚えてお
CSSを使って便箋風ラインを引く簡単な方法！ブログで効果的！
この様にCSSで便箋風のラインを引くことが出来ます。 この「便箋風ライン01」は、線が点で出来ています。 少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。 スマホでも、PCでもタブレットでも大丈夫！コピーして使ってみてくださいね。 HTML <div class="line01 bgred"> <p>この様にCSSで便箋風のラインを引くことが出来ます。<br /> この「便箋風ライン01」は、線が点で出来ています。<br /> 少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。 スマホでも、PCでもタブレットでも大丈夫！コピーして使ってみてくださいね。</p> </div> CSS .line01 p { line-height: 36px; background: url(/images/bg-note01.png) bo
【比較】覚えておきたいロールオーバー画像切替え 5つの手法（CSS？JS？onmouseover？）｜クロノドライブ
Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。 「ロールオーバー表現」とは主にリンク要素にマウスポインタを載せた際に、色や画像等が切り替わる表現のことです。 「ロールオーバー」に似た表現で「マウスオーバー」「オンマウス」「ホバー」といった言い方があります。 どれも同じ意味で使われることがありますが、厳密には「ロールオーバー」は切り替わる動作そのものを指し、「マウスオーバー」「オンマウス」「ホバー」はマウスポインタが何かに乗った状態のことを指します。 今や画像のロールオーバーは、グローバルナビゲーションやボタン等Webサイトを構築する上で必ず使用すると言っても過言ではない技術ですが、実装方法がいくつか存在するため、どの方法で実装すればいいのか迷うことがあるかと思います。 また、普段使っている方法が果たしてベストなのか？疑問に思いながらコ
Autoprefixer CSS online
What is it Autoprefixer online — web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used by Twitter and Taobao. How does it work The Autoprefixer uses data on the popularity of browsers and support for vendor prefixes by browsers. Based on this information, it arranges and deletes the prefixes. I
まだベンダープレフィックスで消耗してるの？ – ysklog
最近時間に余裕ができたのでこれまで放置していたサイトのデザイン周りに手を入れているのですが、不要なコードやマーキングルールに沿っていないものが多数あることに気づきました。 例えば、HTML5の黎明期には（確か）header要素にバナーを含めるときはバナーロール属性「role=”banner”」が必要と言われていたのに実は不要になってたり、h1タグは1ページに複数あっていいという話だったのに1つしかダメだったり・・・ そして一番不要になったものが「ベンダープレフィックス」でした。 ベンダープレフィックスとは？ 「ベンダープレフィックス」とは、主に、CSS3で採用予定（草案段階）の機能を各ブラウザが先行的に実装し、その先行実装した機能を有効化させるために必要な各ブラウザ毎の「-moz-」や「-webkit-」という接頭辞のことをいいます（詳細は後述）。 ベンダープレフィックスの一覧 各主要ブラ
CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える ｜ Tips Note by TAM
「どうやってコーディングをして組み立てていこうか？」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
flexbox-cheat.site
IE9～IE11でtransformにcalcを使用すると無視される | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website
pxをvwに変換する4つの方法 | インソースマーケティングデザイン | ホームページ制作・リニューアル・運用改善で課題を解決
Letter-spacing wrong text center alignment
Letter Spacing — Potion — Magic of CSS — Adam Schwartz
https://blog.mismithportfolio.com/web/20150826ios841failure
