これでもう絶対迷わない！ CSSの疑似クラスと疑似要素、:と::の違い

2022/09/15 44 users CSS 疑似要素 疑似クラス before not

CSSで疑似クラス、または疑似要素を使用する時に、:と::のどっちだっけ？ と迷ったことはありませんか？ :beforeと::beforeのどっちだっけ？ :notと::notのどっち？ :と::のどっちが疑似クラスだっけ？ ※CSS3では::beforeですが、CSS2では:beforeでした。 たまに迷ってしまうことがある人に、CSSの疑似クラスと疑似要素... 続きを読む

現在の実装でよく使用されるCSSの機能、これから登場するCSSの新機能のまとめ

2022/02/24 119 users CSS 実装 Web制作 要チェック 下記

現在の実装でよく使用されるCSSの機能をはじめ、まもなく使用できるようになる新機能まで、現在とこれからのCSSを紹介します。 CSS3が登場した2015年以降に登場したCSSの新機能、2022年これから登場するCSSの新機能、最近のCSSについてWeb制作に携わる人は要チェックです。 What's New Since CSS3 by Chris Coyier 下記... 続きを読む

Webフロントエンド開発で役立つサービスまとめ - Qiita

2021/01/31 393 users Webフロントエンド開発 文法 特定 全般 Can I use

この記事では、Webフロントエンド開発において役に立つと思われるサービスやツールをまとめます。 全般 Can I use 指定した特定の機能が、どのブラウザのどのバージョンで利用可能かを確認するためサービスです。比較的新しいJavaScriptの文法やCSS3の機能を使ってモダンなWeb開発を行う場合に必須とも言えるくらい利用... 続きを読む

HTML5/CSS3のニュースやTIPSなどのまとめ (2019年3月2日) :: dotHTML5

2019/03/02 13 users Tips dotHTML5 HTML5 ニュース まとめ

IT大手のリストラ組、人手不足でも転職難しい？ (日本経済新聞) EUの新著作権指令はインターネットを破壊する (CNET) ロシアはインターネットの遮断スイッチをテストへ (TechCrunch) ウェブ業界にも影響大「働き方改革関連法」対応していますか？有休義務化、残業上限規制など (Web担当者Forum) グーグル、広告ブロック... 続きを読む

HTML5とCSS3の機能や役割や対応ブラウザなど、実装に必要な情報がすぐ分かるコーダー必読のリファレンス本 | コリス

2018/08/24 37 users プロパティ CSS 本書 コリス HTML

今持ってるリファレンス本は、最新のHTMLとCSSに対応していますか？ HTML5の要素とCSS3のプロパティについて、機能や役割や対応ブラウザなど実装に必要な情報がコンパクトにまとめられたリファレンス本を紹介します。 本書は2018年6月時点の最新情報が掲載されており、IE11, Edge42をはじめとする各ブラウザの対応状況も... 続きを読む

CSS3で簡単アニメーション「MotionCSS」:phpspot開発日誌

2018/07/03 12 users ライブラリ phpspot開発日誌 アニメーション フレーム

Awesome CSS3 animation - example CSS3で簡単アニメーション「MotionCSS」 豊富なアニメーションがclass指定で簡単に実現できるライブラリ 関連エントリ 超クールなSVGストロークアニメーションデモ フレームがクールにアニメーションするスライドショー実装デモ 超ユニークなアニメーションが詰まった「Woah.css」 続きを読む

CSS3でつくるボタンの最新チュートリアルまとめ「50 CSS3 Button Tutorials For Designers [2017]」 | DesignDevelop

2017/09/08 25 users DesignDevelop Webdesign 要素 web

TOP   >   WebDesign   >  CSS3でつくるボタンの最新チュートリアルまとめ「50 CSS3 Button Tutorials For Designers [2017]」 WEBやアプリ上でのボタンはユーザーにとって大きな意味を持ち、非常に重要な要素。一目でボタンだとわかるようなつくりであることはもちろんのこと、遊び心あるエフェクトはユーザーの目を楽しませます。今回はそういっ... 続きを読む

ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレンド5個まとめ - PhotoshopVIP

2017/08/28 96 users SVG PhotoshopVIP シームレス 図形 キャンパス

はじめにハンバーガーメニューが登場したとき、デザイン業界の反応はさまざまでした。そこから数年が経ったいま、この単純な図形は、インターネットの世界に浸透しています。 ここにくるまでハンバーガーメニューは、特にアニメーションの分野において、新しいレベルの洗練されたスタイルへと進化してきました。CSS3に加えて、SVGやキャンバスは、ユーザーエクスペリエンス全体を高める複雑で、シームレスなコンテンツ遷移... 続きを読む

CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる–[FIT BLOG-フィットブログ]

2017/07/20 34 users 描画モード ブレンドモード オーバーレイ 内藤 コーディング

PhotoshopやIllustratorなどのグラフィックツールに搭載されている、ブレンドモード(描画モード)と呼ばれる機能をご存知でしょうか。要素と要素を重ねあわせることで、様々な効果を作り出すことのできる機能なのですが、実はこのブレンドモード機能、CSSの...コーディング 　内藤 康太 / 2017.07.20 CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる... 続きを読む

web帳 | フロントエンド開発が捗る JSON Serverについて

2017/07/09 19 users プログラマー Ruby CSS PHP フロントエンド開発

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト、WEB帳は只今、web業界で活躍中のデザイナー、プログラマーによる情報統合サイトです。Javascript、HTML、CSS、Ruby、HTML5,、CSS3、PHP等、フロントエンド技術に特化したブログです。どもです。 今回は、新規プロダクトの開発の際に、非常に重宝する「 JSON Server 」についてのご紹介できれば... 続きを読む

CSS3だけで表現！ コピペで使えるマイクロインタラクション作りました - ICS MEDIA

2017/03/13 163 users マイクロインタラクション ICS MEDIA コピペ アラー

マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 例えばFacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラー... 続きを読む

IE 9とIE 10を無視できる日まであと40日! これでCSS3も心置きなく実装できる!? | 編集長ブログ―安田英久 | Web担当者Forum

2017/02/28 125 users 安田英久 Web担 Web担トップ なか コラム

Web担トップ » [コラム] Web担のなかの人――編集部ブログ » 編集長ブログ―安田英久 » IE 9とIE 10を無視できる日まであと40日! これでCSS3も心置きなく実装できる!? 編集長ブログ―安田英久 IE 9とIE 10を無視できる日まであと40日! これでCSS3も心置きなく実装できる!? Windows Vistaのサポート終了で、IE 9もIE 10もサポートすべきブラウザ... 続きを読む

Font Awesomeの設定方法とよく使うアイコンフォント50個まとめ

2016/12/06 47 users Font Awesome リズ アイコンフォント アクセント

Font Awesomeは、CSS3の登場で使用する機会が多くなりました。私の制作でも、ボタンやリストなどのアクセントとして使用する機会は多いです。そこで今回は、Font Awesomeでよく使うアイコンフォントを50個ご紹介します。Webサイト制作時にチェックしながらコーディングしてみてください。Font Awesomeは、CSS3の登場で使用する機会が多くなりました。私の制作でも、ボタンやリス... 続きを読む

Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など | コリス

2016/11/15 556 users コリス Flexbox セレクタ コーディング CSS

CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 ブックマークし ...記事の続きを読む 続きを読む

CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA

2016/08/22 945 users float Flexbox ICS MEDIA CSS 主流

ICS MEDIA Web制作 2016/08/22 CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 « Prev ボックス要素の横並びをCSSで行う場合、これまでは float プロパティを使うのが主流でした。しかし、 CSS3の新機能「Flexbox」を使うと float よりも簡潔なコードで、ボックスの豊富なレイアウトが可能です 。本記事では... 続きを読む

CSS3 Flexbox UIパターン集「Flexbox Patterns」 | DesignDevelop

2016/06/06 165 users DesignDevelop Flexbox レスポンシブ

CSS3で利用できるようになったFlexbox。WEBアプリやレスポンシブを想定して開発されたものですが、まだまだ現場ではそれほど普及していないのが現状です。今日紹介するのはそんなFlexboxを理解・利用するための様々なUIを簡単に利用できるCSSのFlexbox UIパターン集「Flexbox Patterns」です。 「Flexbox Patterns」は利用しやすくなるようにそれぞれのユー... 続きを読む

独学でWebデザインの知識が身につく！デザイナー初心者が絶対に抑えておきたいサイト・記事14選

2016/05/13 463 users 独学 jQuery タイポグラフィ webデザイン 知識

HTML、CSS、JQuery、WordPress、タイポグラフィ、配色、コピーライティングなどなど、Webデザイナーに求められるスキルは多岐に渡ります。 より多くのスキルを使いこなせるほど、Webデザイナーとして活躍できる場面は増えていくでしょう。 本記事では、これらのスキルを身につける必要性を解説した上で、独学でも学べるサイトや記事を紹介します。 HTML5、CSS3を学習できるサイト・記事 ... 続きを読む

Webサイト制作におけるフロントエンドの必須スキル＆開発環境はこれで決まり！ - North-Geek

2016/04/22 428 users North-Geek Git Sass Gulp Emmet

最近フロントエンドの流行がどうのこうのという記事をよく目にしますが、実際に現場で 必要となるスキルと開発環境 を紹介していきます。これくらい知っていると全く問題ない。といったことですね。 主にWebサイトを制作のスキルは、 HTML・CSS、CSS3、Sass、SublimeText、Emmet、gulp、Git についてのスキルがあれば開発がしやすく流行の開発環境ではないかと思います。 さて、そ... 続きを読む

HTML/CSSで実装できる！今どきデザインのホバーエフェクト30個まとめ - PhotoshopVIP

2016/03/15 541 users ホバーエフェクト PhotoshopVIP コピペ CSS

ウェブサイトを魅力的に仕上げるだけでなく、ユーザーの注目を集めることができる、アニメーション・エフェクト。今回は、サイトコンテンツ表示に活用できる、 HTML/CSSのみで実装できるホバーエフェクト をまとめています。 CSS3 を駆使したスタイリングは、コピペで利用することもでき、他と差のつくデザインエフェクトを、手軽に実現することができます。そのままコードを編集し、動作を確認することもできるの... 続きを読む

feature spec と capybara と CSS3 と 私 - Misoca開発ブログ

2016/01/29 18 users Capybara オニオンリング オニ ダンベル 物体

2016 - 01 - 29 feature spec と capybara と CSS3 と 私 こんにちは。 開発チームのめろたん(@ renyamizuno_ )です。 マイブームはダンベルを持ち上げたり、下ろしたりすることです。 最近、学生時代の後輩と新年会して、どうしても オニオンリング が食べたかったので頼んだら じゃがいもをそのまま唐揚げにしたような物体が出てきて困惑しました。 オニ... 続きを読む

「HTML5/CSS3モダンコーディング」を読みました - ryunix's blog

2016/01/23 67 users vim CSS HTML 著者 紹介エントリ

www.shoeisha.co.jp かっこいいプロフィールページを作ってみたいと思い購入しました！ また、VimConf2015で「 Vim で書いた本 」と紹介があったのも惹かれました。 著者による紹介エントリは以下です。 yoshiko.hatenablog.jp 感想 私のHTML/ CSS の知識についてですが、業務画面を作成する程度なら問題ありません。 しかし、 HTML5 /CSS3... 続きを読む

絶対王者「羽生結弦」の４回転サルコウをCSS3で再現してみる。 - 攻めは飛車角銀桂守りは金銀三枚

2016/01/06 17 users 飛車角銀桂守り 羽生結弦 CSS プレッシャー 羽生

2016 - 01 - 06 絶対王者「羽生結弦」の４回転サルコウをCSS3で再現してみる。 CSS シェアする Twitter Google+ Pocket スポンサーリンク もう、説明の必要はないでしょうけど、男子フィギュアスケートの「羽生結弦」君。 素晴らしいの一言ですね。 数々のプレッシャーにも負けずきっちりと結果を出し続ける彼の姿はもう「絶対王者」と呼ぶにふさわしい。 そこで今日は「羽生... 続きを読む

CSS3で画像キャプションのマウスホバーアニメーション5種 | webOpixel

2015/12/25 32 users webOpixel

Posted: 2015.12.25 / Category:  HTML&CSS  / Tag:  CSS3 CSS3オンリーで画像をマウスオーバーするとキャプションがアニメーションして表示するというサンプル集です。 ディレイやイージングを使用してちょっとだけ凝った感じに見える風にしてみました。 基本的なHTML 基本的なHTMLは下記になります。figureでマークアップしてみました。 HTML... 続きを読む

CSSだけで縦書きを表現する | スターフィールド株式会社

2015/12/14 31 users 縦書き CSS Demo span 定石

和風なwebサイトの場合、縦書きのデザインをすると思います。 以下のサイトなんかも縦書きレイアウトをデザインを取り入れています。 グッと和風感がでますよね！！ 深山山荘オフィシャルサイト 縦書きの表現は、画像か１つずつ文字をspanかなんかで囲んでっていうのが定石だったのですが、CSS3で簡単に縦書きが出来るようになっています。 (IEは独自の表現で出来るようです) とりあえず、DEMOを作りまし... 続きを読む

最短で覚える！HTML5/CSS3を無料で学べるサービス・ツール10選

2015/12/07 136 users 最短 HTML5 CSS サービス・ツール10選 実装

いまも今後も進化が止まらない「WEB」を学びたい人たちにとって、必ず学ばなければいけないのがHTMLとCSSです。最新のHTML5/CSS3では、メディアやローカルストレージ関連機能の実装が簡単になりさらに実用性のある言語へと変化しています。しかしながら、HTMLとCSSはプログラミング言語ではないので比較的簡単に学習することができます。さらに学習サービスやツールを活用すれば、最短でHTML5/C... 続きを読む