幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ

2024/06/19 Findy主催イベント「鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック 」で公開した資料です。 https://findy.connpass.com/event/318569/ デモのURLなどはこちらのURLからアクセスできます。 https://ton…

HTMLやCSSをはじめとする、フロントエンドの開発に役立つ最新ツールがひとまとめに利用できるHTML & CSS code generatorを紹介します。 いろいろなツールをどこだっけなと探すときもあると思うので、ブックマークしておくと便利です。 HTML & CSS code generator HTML & CSS code generatorは、フロントエンドのデベロッパー向けに最新ツールがオールインワンで利用できるサイトです。ツールはすべて無料で利用でき、登録など面倒なことは一切不要です。

はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と

覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい

すべての新しい色空間を完全にサポートする新しいグラデーションツールを紹介します。UIデザイン向けの美しいグラデーションのプリセットも豊富に用意されており、カスタマイズも簡単です。 CSSの色指定に何を使用していますか？ #FFFFFFのようなHEX値だったり、whiteのようなキーワードだったり、rgb(255, 255, 255)のようなRGB色空間の人も多いと思います。最近では色相・彩度・輝度で指定できるhsl(0, 0%, 100%)もすべてのブラウザにサポートされており、増えてきたと思います。 さらに今までよりも広色域のP3カラーに対応したoklch()もChrome 111, Safari 15.4でサポートされ、注目されています。 CSS HD Gradients CSS HD Gradientsは、Google ChromeのデベロッパーであるAdam Argyle氏（@ar

400なのか900なのかは表示したいアイコンによって指定が異なりますので注意が必要です。 Twitterアイコンですと、Brands（つまりfont-weight: 400;）のみの提供。 RSSアイコンの場合は、Solid（つまりfont-weight: 900;）と、RegularとLightの３種類があります。 スタイルについては、赤枠部分で確認してください。（提供スタイルが１種類しか無い場合は右側の選択肢は表示されず） 原因その５：バックスラッシュを付けていない ３回目の登場ですが、再びCSSです。 .icon::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; /*←ココ！！！！！！！*/ } contentにUnicodeを記載して呼び出したいアイコンを指定するのです

#444444:root { --ion-color-primary: #0054e9; --ion-color-primary-rgb: 0,84,233; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255,255,255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; --ion-color-secondary: #0163aa; --ion-color-secondary-rgb: 1,99,170; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255,255,255; --io

鹿野さんに聞く！2023年モダンCSSの最新トレンド https://findy.connpass.com/event/278449/ で発表した資料です。 各リンクはこちらから参照 https://tonkotsuboy.github.io/20230413_findy_css/

You need an OpenAI API Key to use Site. Your API Key is stored locally on your browser and never sent anywhere else.

BrowserSyncって何？ テキストエディターでHTML,CSS,JavaScriptのコードを編集して、結果を確認するのにWebブラウザーにフォーカスを移してF5で更新して…… というWeb開発のワークフローを簡素化するプログラムです。 BrowserSyncはファイルの変更を監視して、変更を即座にブラウザーに反映させることができます。 しかもCSSファイルの編集はページの再読み込みをすることなく反映されます。 複数ブラウザーを立ち上げていてもOK！モバイルブラウザーも自動で同期します！ テキストエディター上での作業に集中することができるので、作業効率が劇的に向上します。これを使わない理由はありません！！ インストール方法 Node.jsをインストール BrowserSyncはNode.jsで動くので、まずNode.jsをインストールします。 Node.jsのサイトからインストーラー

Webサイトを訪れたユーザーが、もっとも重要視するのはUIデザインです。 ユーザーが直感的に操作でき、使いやすく、美しくデザインされたWebサイトは、長期的な成功につながります。 しかし、どんなUIデザインを作成したらよいか分からない、という声もよく聞きます。 そこで今回は、コピペで利用できるUIデザインライブラリ UIverse をご紹介します。 1200を超えるUI要素が公開されており、HTML/CSSをコピペするだけで、だれでも手軽に利用できます。 これらを押さえて、あなたのWebサイトをユーザーにとって魅力的で、使いやすくしてみましょう。 UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse UIverseではあらゆるプロジェクトに対応できる、HTML/CSSで作成されたオープンソースのUI要素を作成、共有できるウェブサイトです。 すべてのコードはM

近年、ECサイトからの個人情報及びクレジットカード情報の流出事件が多数発生しており、被害の大半を中小企業の自社構築サイトが占めています。中小企業の自社構築サイトにおいては、セキュリティ対策の必要性が十分に理解されていないため、適切なセキュリティ対策が行われず被害を招いている状況です。 ECサイトのセキュリティ対策を強化するため、IPAではECサイト構築・運用時のセキュリティ対策をまとめた「ECサイト構築・運用セキュリティガイドライン」を作成し、本日(2023年3月16日)、公開しました。 ガイドラインの内容 ECサイトでひとたび事故及び被害を発生させてしまうと、ECサイトの長期間の閉鎖に伴う売上高の大幅な減少や、原因調査や被害の補償等の事故対応費用を含む甚大な経済的損失が発生します。 本ガイドラインは、ECサイトを構築、運営されている中小企業の皆様に、ECサイトのセキュリティ対策を実施する

ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。 ChatGPTで高品質な回答を得るために たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。 さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。 これは

「ブロックテーマ」とは、WordPressのサイトエディタのために用意された新しいテーマのフォーマットで、Gutenbergのブロックを使用してテンプレートを構成するものです。WordPressが後方互換を考慮するかぎり、今までのクラシックエディタや初期のGutenbergも使用できると思いますが、これからWordPressのテーマを制作するなら、このブロックテーマが必須になります。 WordPressのこれからのテーマ制作の標準「ブロックテーマ」をしっかり学べる解説書を紹介します。 著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。 本書もWordPressのブロックテーマをその基礎知識から実践的なテクニックまで詳しく解説されてお

Resources for Developers, by DevelopersDocumenting web technologies, including CSS, HTML, and JavaScript, since 2005. ////////////   ////////////   ////////////   ////////////   ////////////   ////////////   ////////////  ++++++  ++++++  ++++++  ++++++  ++++++  ++++++  ++++++{{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}     ../../    ../../    ../../    ../../    ../../    ../..

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記

button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi

目次 フォーカスしたいもの「この背景って実装できるかな？」：デザイナーの疑問デザインはこんな感じチャットでエンジニアさんに相談！：実装方法の確認デザインの詳しい内容を説明エンジニア・デザイナーから次々と提案が！：実装方法の検討エンジニアIの意見デザイナーMの意見再び、エンジニアIの意見そこに、さらなるアイデアが！：実装方法の解決の糸口デザイナーMの意見エンジニアさんがサンプルを作ってくれました：簡易サンプル作成・検討エンジニアIの意見サンプルを作成してもらい、さらなる検討！ついに、エンジニアYさんが実装を！：実装解決エンジニアYの意見実際の実装画面はこちら日々デザイナー・エンジニアで試行錯誤を重ねる、デパートの制作現場 フォーカスしたいもの株式会社デパートは、基本的にデザインと実装（コーディング）は分業制です。だからこそ、日頃からデザイナーとエンジニアが協力し、スムーズに実装を進めていける