舞い散る桜の花びらアニメーション【HTML/CSS】
こんにちわ！最近花粉の気配を感じ始めましたね・・・。 なんだかんだでもう3月に入りましたが、もう少しで桜の季節です！ ということで、HTMLとCSSで桜の花びらが舞い散るアニメーションを作ってみました。 用意するもの ●桜の花びら画像(png) 桜の花びら画像を７枚( 7パターン)用意しました。 出来上がりがこちら See the Pen GRNYVxq by adatype (@adatype) on CodePen. 出来上がったものがこちらになります。 コードの内容については下記をご覧ください。 まず#sakura_blockの中に花びら画像たちをまとめる.sakura_parts_boxを作って、 中に先ほど用意した花びら画像たちを入れて、それぞれクラスを付けます。 用意した画像は7枚ですが、画面幅いっぱいに桜を降らようと配置したら中の画像が19枚になりました。枚数は降らせたい場所
【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ | ビジネスとIT活用に役立つ情報（株式会社アーティス）
前回の記事【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編）ではCSSセレクタの基本的な知識と指定方法をご紹介しました。 今回は、よりコーディングの幅が広がる「擬似要素」と「擬似クラス」に関して解説していきます。 擬似要素とは ～擬似要素の適用例～ 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。 例として、下図のように見出しの先頭一文字のみ文字の色を変える装飾を実装してみましょう。 擬似要素を使わない場合 擬似要素を使わずにこれを表現すると、HTMLとCSSの記述は下記のようになります。 見出し要素のh2の一文字目のみをspanタグで囲い、スタイルを適用しています。 この方法でも装飾は可能ですが、テキストをspanタグで無理やり区切って
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
ID名、クラス名に関して｜Tips・コラム｜CSS HappyLife ZERO
ID名やクラス名は、扱える文字さえ守れば任意の文字で付ける事ができます。 いくら任意だからといって、あまりにも適当なID、クラス名を付けてしまうと後々CSSを確認した時に何が何だか分からなくなってしまう可能性もあります。 そのため、どの様なID、クラス名を付けるかは悩める部分でもありますが、特別な理由が無い限り見た目や位置に関するID、クラス名は付けないようにする事が望ましいです。 見た目や位置に関するID、クラス名とは、#left、.rightBox、.red、.font16pxなどが考えられます。 ではなぜ、見た目や位置に関するID、クラス名は付けない方が良いかというのは、そもそも(X)HTMLは文章の構造を表すものでうんたらかんたらといった理由も有りますが、これらのID、クラス名はサイトの仕様が変更された場合に矛盾が生じてしまいます。 例えば、.redと付けたのは良いが、後から太字に
CSS「Flexbox」の使い方。グリッドレイアウトを自在に操ろう！ | WWWクリエイターズ
CSSのFlexboxプロパティを使ってグリッドレイアウト（格子）を作成します。 Flexboxに関するプロパティは、なんだかたくさんあって、複雑でよくわからない、もう覚えられない！やっぱまだ Float にしておこう・・、の状態が長く続いているので、まとめました。 Flexboxとは？ Flexboxとは、「グリッドレイアウト」と呼ばれる、格子状のレイアウトをより直感的に実現するために導入されました。CSS３で新規追加された比較的新しいプロパティです。 CSSではよくあることですが、ブラウザ（Chrome, Firefox, Microsoft Edge, … ）などで、プロパティのサポート状況がまちまちなので、なかなか開発者の間に利用が広まりませんでしたが、近年、ブラウザのバージョンアップが進み、エンドユーザ環境におけるサポート率が高まってきたため、利用しやすくなってきました。特に、問
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
bootswatchのインストール手順 - Qiita
私的メモ 今度もう少しわかりやすいように書き直す予定 実行環境 cloud9 rubyRails 4.2.5 ruby 2.3.0p0 bootswatchのインストールの流れ やる内容によって作業ルートが変わります。 既存のapplication.htmlerbを使って1から作り上げていく用 1→2→3-1→4-1→5 予めテーマで用意されたレイアウトをドンっと使う場合 1→2→3-2→4-2→5 1. Gemへの追記 Gemfileに必要なものを追記する。 #bootswatch用 gem 'twitter-bootswatch-rails', :github => 'scottvrosenthal/twitter-bootswatch-rails' gem 'therubyracer' gem 'execjs' からの bundle install Important:You may
CSSにおけるコンポーネント設計 - Qiita
前提 cssを書いていくうえで、昨今コンポーネントの重要性が言われているので、コンポーネントについてまとめてみました。 コンポーネントとは コンポーネントについてまとめるうえで、深掘りすると非常に深く難しい概念なので、ここではcssを書いていく上で最低限知っておくべき範囲でコンポーネントについてまとめます。 関心の分離 コンポーネントには、前提として「関心の分離」という概念があります。例えば、railsにおいてMVCがあるように、htmlではマークアップ構造、cssではスタイリング構造など、特定の役割・機能・振る舞いなどを厳密にわけることを指します。 カプセル化 そして、分離という機能を実現するうえで、「カプセル化」の概念も重要となってきます。カプセル化とは、外部からの影響を許可したもののみに限定し、また内部の変更等による影響を外部に与えないものとでもいっておきましょう。これをcssで当て
良いCSSとは - Qiita
CSSはスタイルシート言語です。 プログラミング言語のように記述的(imperative)ではなく、宣言的(declarativ）な言語です。 では良いCSSとはどのようなものでしょうか ？ それはプログラミング言語で良いコード、クリーンコードと言われるものと同じではないかと思います。 クリーンコードは、単純で直接的です。 クリーンコードは、うまく書かれた散文のようにも読めます。 -グラディ・ブーチ CSSはセレクタの命名とその記述方法によってのみ制御されるものです。 その制御はクリーンコードのように「うまく書かれた散文」を目指すべきです。 CSSの原則と設計 CSSはHTMLの見た目を制御する宣言が書かれた文書です。 そしてその設計にはHTMLも含まれるべきです。 CSSの仕組みは単純です。 要素を選択し、定義されたスタイル宣言を適応して見た目を変える。 原則も１つしかありません。CSS
極めろ！！Google Chrome Devtools 52の関節技 - Qiita
転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づいて紹介しています。 52の関節技！！ Elements 1.hover時のコンポーネントのCSSルールを表示 使い方 ①DOM要素を選択 ②Stylesペインを開く ③:hovをクリック ④hoverフィルタを適用 2.対応するCSSファイルを開く 使い方
おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
フロントエンドエンジニアなら押さえておきたい！最近登場した注目のJavaScript＆CSSライブラリ8選
Webデザイナーやフロントエンドエンジニアにとって、日々登場するフレームワークやライブラリをキャッチアップすることはとても大切です。 なぜなら、そうしたフレームワークやライブラリによって業務が効率化すれば、他の作業に時間を割くことができるからです。 しかし、フレームワークやライブラリが続々と登場するあまり、キャッチアップに追いついていないひともいるのではないでしょうか。 今回は、最近登場した注目のJavaScriptとCSSのライブラリを紹介していきます。 中には簡単なコードを挿入するだけで驚くほどの機能を実装できるものもあるので、ぜひ確認してみてください。 最近登場した注目のJavaScript＆CSSフレームワーク 1. AOS https://michalsnik.github.io/aos/ AOS(Animate on Scroll)は、スクロールしながら要素をアニメーションでふ
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.okuni.me/entry/css-slide-animation-keyframes
コラム：class名とid名はどうやってつければいい？
#
「出会えたことに感謝したいCSSベスト3」まとめ
Webpark 
http://www.stylish-style.com/csstec/base/link.html