UAスタイルシートとリセットCSSとは - 2023 - kojika17
以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。 そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。 UAスタイルシートとは？ UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド
2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
【px・em・rem・%】CSS単位の使い分けについて考察 - PENGIN BLOG
今回はWebコーディング時に迷いがちな単位の使い分けについて自分なりにまとめました。 よく議論が起こるテーマですが、先にお伝えしておくとコーディング時の単位に正解は無いです。 案件によってルールが引かれてる場合もありますし、基本的に適材適所使うことが前提です。 あくまで様々な方の意見や情報を見たうえで、一つの考え方としてまとめた形になっているということをご了承ください！ 当記事の結論 フォントサイズ：rem要素の大きさ、marginやpadding：rem親要素にあたる包含的なcontainer要素や画面幅いっぱいに表示させたい要素：％letter-spacingや擬似要素との間隔：emboderなどの可変させたくない要素：pxヒーローイメージやモーダルウィンドウ など画面を占有して表示させる要素：vw 次からその根拠と解説を紹介していきます。 絶対値と相対値単位には「絶対値」と「相対値」
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説 | 模写修行メディア
サイトを制作する際、画像の最適化は複雑でベストプラクティスがわからなかったり、疎かにしている人は多いのではないでしょうか？ レスポンシブイメージ decoding="async" loading='lazy' レイアウトシフト WebPやAVIF等の次世代画像フォーマット 画像周りでは知っておかないといけないことが多くあります。 この記事では、その中でも特にややこしい、srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説します。 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
WP-functions generator
metaリンクの削除 DNS Prefetchの削除（emojiを削除する場合は不要） 絵文字を削除 外部アプリケーションから情報を取得するタグを削除 フィード削除 rel=”canonical”タグの非表示 短縮URLの非表示 現在の文書に対する「索引」であることを示すタグ link rel=next等のタグ WordPressのバージョン情報を削除(5.6ではそもそも表示されない) デフォルトのjQueryを読み込ませない jsのパラメータに付与されるWordPressのバージョン情報を削除 タイトルタグ出力（直接titleを記述する場合は不要） 管理画面のカスタマイズ コメント機能削除（comment_form()の強制削除） 管理画面から「コメント」削除（wp-admin/edit-comments.phpでアクセス可能） Adminバーの非表示 AdminバーのWordPress
【jQuery】コンテンツの表示順を簡単に入れかえる方法 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
JQueryを使ってコンテンツの表示順を入れかえたい こんにちは、サポート部の市川です。毎日暑い日が続いていますが、体調などは崩されていませんでしょうか。 さて、Web制作をしていると、ページのテキストや画像といったコンテンツの順番を入れかえたいという状況がでてくるかと思います。 多くの場合、HTMLを単に書き換えるだけでよいのですが、例えばCMSでの会員登録画面の「名前」や「会社名」、「住所」といった項目の表示順を入れかえたいといった場合にシステムの都合上、設定で簡単に入れ替えることができない場合もあると思います。 今回はそのような時に、Jqueryを使って簡単にコンテンツの表示順の入れかえするための方法を紹介します。 【Jquery】beforeメソッドとafterメソッドを使ってdivコンテンツを入れ替える 次のURLで表示されるページのdivでくくられた５つのコンテンツ「A・B・C
よく使うSassのmixinとfunctionのスニペットをまとめてみた
こんにちは。TAK(@tak_dcxi)です。 2020年最後のZennの投稿ということで、Web制作テンプレートの年末大掃除も兼ねて僕がよく使うSassのmixinとfunctionを厳選してまとめてみました。 Sassを使っている方でmixinとかfunctionをあまり利用してないという方は参考にしてみてください。 ブレークポイントの指定 おそらくmixinで最も利用されているのはレスポンシブでのブレークポイントの指定だと思います。 $breakpoints: ( 'xs': (min-width: 0), 'sm': (min-width: 576px), 'md': (min-width: 768px), 'lg': (min-width: 992px), 'xl': (min-width: 1200px), 'xxl': (min-width: 1400px) ) !defau
実装者が作業前にデザイナーへ確認しておくとよいこと
TAK(@tak_dcxi)です。 コーダーやフロントエンドエンジニア（以下実装者と呼ぶ）が作業に取り掛かる前に事前にデザイナーに確認しておくとよいことを独断と偏見でまとめました。過去に面倒臭がって聞くのを放棄して失敗した経験もあるので、自戒の念も込めています。 デザインの共通ルールを確認する 余白のサイズやフォントサイズや使用している色などはルール決めがされているとは思いますが、デザインのルールを実装時に分かりやすくしておくことで効率的かつ保守性や拡張性に強いコードが書きやすくなります。 逆に実装時にルールが分からないと、実装者がデザインカンプを見てもそのルールを理解するのに時間がかかってしまうことも多いです。余白であれば感覚で配置されてるのか、似たような箇所で17pxであったり23pxであったり…と意図が分かりかねる場合もあります。余白は原則8の倍数で行うみたいなルールが事前に実装者に
CSS Background Patterns by MagicPattern
CSS Background Patterns is fun little free tool that lets you create cool CSS patterns for your website background. We've curated and parameterized this collection of pure CSS patterns to help you generate & customize the most cool CSS seamless patterns around the web. The collection is being updated regurarly! Patterns are everywhere! From your website to your favorite book cover. There're severa
iPhone 12系統のレスポンシブ対応のメモ書き
今朝発表されたiPhone 12系統のレスポンシブ対応についてのメモ書き。取り急ぎ。 12 Pro Max 👉 428px (3x) PlusシリーズやXR,11,11 Maxの414pxよりも14px広い。 12 / 12 Pro 👉 390px (3x) 6〜8、Xや11 Proの375pxよりも15px広い。 12 mini 👉 360px (3x) ただし、miniの場合は375pxで描写してスケーリング表示するらしい？ とは言え、Androidのデバイスの多くは360pxなのでiPhone 12 miniの描写サイズが375pxだろうが360pxだろうが関係なかったりします。 横幅360pxでしっかり表示されていることは必須条件です。 追記1：これからも4インチ(320px)を意識する必要はあるのか？ 個人的見解ですが、あります。 理由としてはiPadのSlide Over
CSS設計において特に大切にしている思想をまとめてみた
Zennの投稿は初です。TAK(@tak_dcxi)です。 今回投稿するのは自分なりのCSS設計のメモ。ある程度の規模感のサイトでのCSS設計において、僕がいくつか大切にしている思想の中から特に重要だと思っているものをピックアップしてまとめてみた。 「ある程度の規模感」とは以下のようなイメージ。 テンプレートの数（※サイトのページ総数ではない）が10枚以上 ローンチ後もPDCAが定期的に行われ、その都度サイトの更新や改修が行われるようなWebサイト サイトの更新や改修は自分以外のスキルを定義しないコーダーやエンジニアによって行われる 最後の「スキルを定義しないコーダーやエンジニアによって更新や改修が行われる」というのがポイントで、つまりスキルに大きな幅がある、とりわけ未経験入社の方のようなマークアップの知識が乏しい方が更新する可能性があることを前提としている。場合によっては急遽量産で知識の
FLOCSSを導入して気づいたCSS設計のメリットまとめ｜WEB CHIPS
この記事では、 ・FLOCSSとは何か ・FLOCSS導入のメリット ・実例 をまとめていきたいと思います！！ FLOCSSを取り入れることで保守性しやすい・再利用しやすい・拡張しやすいCSSを書くことができるので、是非取り入れましょう！ FLOCSSとは FLOCSSとは、「フロックス」と呼びます。CSS設計思想の一つで、他にはOOCSS・BEM・SMACSSなどいろいろあります。 公式URL：https://github.com/hiloki/flocss FLOCSSの大まかな概念やルールについては、公式を参考にしていただければと思います。 最初はFLOCSSの構造に混乱するのですが、その度に公式を見返していました。 また、FLOCSSは日本の方が作られたCSS設計なので、他の方もブログ等で使い方を詳細に書いている方もたくさんいらっしゃいます。 FLOCSSって何！？よくわからないよ
Dart Sass、使ってる？Preprosを使えばコンパイルも楽勝！
2020年6月14日 CSS, 便利ツール 最近Sass界隈が賑わっているように感じます。おそらく「Sassを@importから@useに置き換えるための手引き」という記事でDart Sassダートサスの存在を知った方も多いでしょう。今回はそんなDart Sassをザックリと、そして便利なコンパイラー「Prepros」について紹介します。 ↑私が10年以上利用している会計ソフト！ Dart Sassとは 一口にSassと言っても、実装している言語によって3つに分かれます： Ruby Sass … Ruby製。2019年没。サポートされません。 LibSass … C++製。今一番広く使われている様子。 Dart Sass … Dart製。公式推奨。 ICS MEDIAの池田氏によるアンケートだと、LibSassがだんとつ人気ですね。 ウェブのフロントエンジニアに質問。 Sassのコンパイル
Slack（スラック）に「RSS（アールエスエス）」を導入してインプットの効率を上げる方法とは？
マーケターにとって、日々移り変わる情報の収集は必要不可欠です。そこで、効果的なインプット方法として紹介するのが、Slackに「RSS」を導入する方法。知りたいサイトの情報をこまめに確認しなくても、更新情報を通知で知らせてくれるので、無駄な作業がなくなり効率的にインプットが可能です。 RSS（アールエスエス）とは RSSとは、ニュースやブログなど、各種Webサイトの更新情報を配信するための文書フォーマットの総称です。Slackと連携させることによって、気になる記事やブログが更新されると通知が来るようになります。 今までは調べたい情報を探すために、わざわざそれぞれのメディアに訪問して情報を得る必要がありました。RSSを使うことで、Slack上に欲しい情報が集まり、更新情報チェックの作業を効率化できるので、大幅にインプットの時間を削減できます。 参考：SlackのRSS機能を使って情報収集するや
WordPress（ワードプレス）の初期設定方法と基本的な使い方
Web集客にとって大切なことの一つに、品質の高いコンテンツを作成することが挙げられます。ユーザーのニーズを捉えたコンテンツを作成することに注力したいので、Webサイトの制作や管理にはできるだけ時間やコストをかけたくない人も多いでしょう。 CMS（コンテンツ・マネジメント・システム）は、誰でも簡単にWebサイトの制作や管理ができるものです。その中でも代表的な存在であるWordPressは無料で利用でき、世界中の企業や個人に利用されています。 そこで今回はWordPressをこれから使いたいと思っている人のために、初期設定や基本的な操作方法をまとめました。 圧倒的に使いやすいCMS！見たまま編集のferret One 直感的な操作で、Webサイト・LP・フォームも作成も自分で完了！さらに、問い合わせの管理や効果測定もできてPDCAが高速に回ります。 WordPress（ワードプレス）とは Wo
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div
初めてのGulp導入！【まとめ】 インストール手順から数々のエラー解消まで｜みずなみ
先日、初めてGulp（ガルプ）を導入しました。 参照した手順サイトや実行したインストール方法、どんなエラーが出てどうやって解消したかなど、Gulpに関する経験を備忘録として投稿します。 【こんな悩みを持つ方へ】 ・Gulpってたまに聞くけど、そもそも何？ ・Gulpを導入したいけど初めてなのでやり方がいまいちわからない ・インストールしたいのにエラーばかり出て困っているこんな悩みを解決できる記事を書きました。 ぜひ初めてSassの開発環境を整える上で、Gulp導入にチャレンジしてほしい！という思いを込めています。 なぜなら、プログラミング初学者の私がGulpの便利さと効率の良さを今なお体感しているからです。すごい賢いこの子･･･！ 1.Gulpって何？ そもそもGulpってなあに？という方、大丈夫です。私も作業を始めるまでどんなものなのか分かりませんでした。 唯一思いついたのは、釣りで使う
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
