WordPressの投稿や固定ページにそのページ固有のCSSやJavaScriptを設置する方法
以前紹介した記事で、WordPressのサイト全体に適用させるCSSやJavaScriptの設置方法を紹介しました。 今回は、WordPressサイト内の個別の投稿ページや固定ページだけに適用させたい固有のCSSやJavaScriptを設置する方法について紹介していきたいと思います。 WordPressのテーマの中には、初めから今回紹介するのと同じような機能が利用できるようになっているテーマもありますが、今回はそうでないテーマを利用している場合でも、投稿などの中でそれぞれのページだけに個別に適用させるCSSやJavaScriptを設置できるようにする方法について紹介していきたいと思います。 なお、今回はWordPressのプラグイン等は使用せず、テーマ内のファイルであるfunctions.phpにコードを設置する方法を紹介します。 投稿編集ページなどに表示される入力エリア 後ほど紹介するコ
Scroll progress animations in CSS | MDN Blog
Scroll-linked animations can often add a touch of class to a website, but have long been the preserve of JavaScript. Now a brand new specification is being implemented to enable us to create rich scroll-driven experiences with CSS! When we think of scroll-driven animations, we generally mean one of two things: An animation that occurs as the user scrolls, with the progress of the animation explici
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法
2022年9月24日 CSS, JavaScript ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。 ↑私が10年以上利用している会計ソフト！ ローディングアニメーションの設置手順 こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。よく「CSSだけで実装できる！」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単なJavaScriptも必要です。 1. ローディング画面の用意 まずはコンテンツを用意しましょう。上部に
How To Build A Magazine Layout With CSS Grid Areas — Smashing Magazine
Web development, especially what you can do with CSS, has become increasingly complex. With the added capabilities of CSS Grid, it is now possible to achieve layouts that look like they were laid out by hand. Let’s tackle a practical example of how to do something like that. In this article, I want to talk about the amazing possibilities of a CSS grid and how it allows for complex layouts that are
The Guide To Responsive Design In 2023 and Beyond
When you think about building fluid layouts these days isn’t about having fixed-width breakpoints anymore. Instead, the layouts we build today need to work on nearly any device size. To my surprise, I still see websites follow the adaptive design pattern, where it has a container that gets a new max-width value as per the viewport width. The term “responsive” means a lot of things now. We have med
A Complete Guide to CSS Cascade Layers | CSS-Tricks
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels
clay.css - by Adrian Bece
NPM npm i claymorphism-css yarn add claymorphism-css CDN <link rel="stylesheet" href="https://unpkg.com/claymorphism-css/dist/clay.css" /> 2. Apply it Class clay provides bare minimum styles to apply the claymorphism effect to any HTML element. Additional styles (layout, position, colors, borders, etc.) should be added by using an additional CSS class. HTML <div class="clay"> Fluffy ipsum dolor si
8 CSS Snippets for Creating Split-Screen Layouts
Split-screen UIs have become a popular way to showcase content. We often think of them as being utilized in areas where we want users to choose between two options. But we’re also seeing other creative uses of the technique. For example, a split-screen can also be used to great effect as a full-page layout or even as a transitional animation. Here are 10 examples of split-screen UIs, complete with
CSS for Web Vitals | Articles | web.dev
CSS for Web Vitals Stay organized with collections Save and categorize content based on your preferences. The way you write your styles and build layouts can have a major impact on Core Web Vitals. This is particularly true for Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP). This article covers CSS-related techniques for optimizing Web Vitals. These optimizations are broken down
How to Create Neon Text With CSS | CSS-Tricks
Neon text can add a nice, futuristic touch to any website. I’ve always loved the magic of neon signs, and wanted to recreate them using CSS. I thought I’d share some tips on how to do it! In this article, we’re going to take a look at how to add glowing effects to text. We’ll also take a look at various ways to animate the neon signs, all using CSS and keyframes. Here’s what we’ll be making: Addin
To Hell with bad CSS! | | CSS Hell
CSS Hell Collection of common CSS mistakes, and how to fix them content is your Content? I saw a developer using the content property for adding extra text to a label, because why not, he said. Sadly, this raises several issues. .label::after { content: "My label"; } Check out what is going on here ⇸ One size should fit all? In modern web development, there is less and less reason to use fix sizin
10 New CSS Features You Might Not Know About (2021 Edition)
The modern web would not be possible without CSS. The markup language is responsible for the fact that websites look good, have a pleasant layout, and that every element stays where it belongs. Yet, did you know that new CSS features come out all the time? Over the years, CSS has gone way beyond background colors, borders, text styling, margins, and the box model. Modern CSS is capable of a whole
CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説
CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介します。 CSS Scroll Snap by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのスクロールスナップを使う理由 スクロールコンテナの基本 スクロール コンテナの注意点 CSSのスクロールスナップとは scroll-snap-stopの使い方 scroll-paddingの使い方 scroll-marginの使い方 CSSのスクロールスナップの使用例 block値とinline値について アク
2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。Web標準黒帯（ヤフー内のスキル任命制度）の岡部和昌（@kzms2）と申します。 今回の記事はありがちな「たくさんの良さげなCSSのプロパティなどを羅列してひたすらまとめる」だけではなく以下の考えのもと、まとめた記事です。 岡部が「使うケースがある・覚えておくべき」と感じたオススメできる、または有用と判断したCSS 可能な限り2020年からブラウザに実装された、またはこれから実装されるCSS 比較的新しいまたはあまり使われている印象がないCSS 実際のコードや挙動、対応ブラウザを掲載 自分目線でみたコメントや使えそうな場面をできる限り丁寧に説明 つまり2020年に実装されたものを中心に、有益でオススメでき
Creating randomness with pure CSS
Pure CSS random cards, no JavaScript needed.These cards were made using HTML and CSS only, no JavaScript , no Sass and no other external scripts or preprocessors involved. Every time you click on a card, it draws a different one, sometimes it’s a King of Hearts, sometimes it’s an Ace of Spades, sometimes it’s even a 9 of diamonds or any other card in a standard deck of cards. Randomly drawn cards
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】JavaScriptを使わずにハンバーガーメニューを作る
CSS Animation Libraries: 10 Popular Choices
How to Create Simple CSS Grid system | wdrfree ▷
How to Create a Section Divider Using CSS
CSS clip-path Editor