JAJAAAN代表です。このサイトの制作者です。趣味は、最近始めたアウトドア、最近始めた釣り、最近始めた格闘技です。尊敬する人はさかなくん。人生で学んだことは「女は怖い」ご連絡はメールかTwitterでDMください。 メール Twitter SEE MORE 今回はCSSのみで作れる見出しデザインについて100個サンプルを作ってみました。 見出しなどで使えるデザイン例についてどこよりも詳しく（おそらく..）紹介・解説しています。すべてCSSのみで実現しているものになりまります。 コピペしてそのまま使用していただいて構いません。デザイン例によって作成時のポイントや注意点も書いています。 CSSのみで作る見出しについて見出しについて、マークアップで使用されるHTMLタグはh1〜h6になるかと思います。サンプルのHTMLではh2を例にしていますが、hタグである必要はありません。ご自由なHTMLタ

未経験からコーダーとして仕事をし始めて2年が経過しました。 最初の頃はとにかくスピードややりやすさ、デザインの再現などを重視し、保守性は特に考えていませんでしたが、ページが多くなってきたり自分以外の人と一緒にコーディングする機会が増えるにつれ、当初とはまるで違う意識で書くようになった気がします。 自分のコーディング手法もまだまだ発展途上だとは思いますが、自分なりに保守しやすいであろうコーディング手法が確立されつつあるので、コーディングルールも兼ねて記事に残しておこうと思いました。 デザインが再現できればOKというコーディングから一歩進んだコーディングを目指す方の参考になれたら嬉しいです。 この記事の前提 コーディングに付随するいろんな用語が出てくるかと思いますが、詳しくは説明していません...。なので、今コーディングを勉強中であったり仕事でコーディングしたことない人にとっては、理解しづらい

俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい

私がよく使っているのが、下のボタンです。 ホバーしてね！単色の背景色が、グラデーションに変わるホバーエフェクト。ホバーした時に「おっ！」となるから好きです。 ただ、このホバーエフェクトは、CSS の指定に注意が必要です。 例えば、下記の指定では上手くいきません。 .example { background-color: #039be5; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .example:hover { background-image: linear-gradient( 45deg, #039be5, #00b7ee, #00d0e8, #00e7d8, #7afac4 ); } この指定をしたのが、下のボタンです。 ダメだよ！transition を指定していますが、背景色が瞬時に切り替わります。ふわっとしたホバーエフェク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事では私が2年以上PostCSSを実務で利用してきた、CSS Level 4の状況を振り返ります。 CSS4を使うための環境について まず、PostCSSが出てからcssnextを使ってCSS Level 4を使えるようにという記事が世に多く出回り、（ぼくの中で）実質的にpostcss-cssnextを使うことがPostCSSにおけるデファクトのようになっていました。 PostCSSとcssnextで最新CSS仕様を先取り！ | HTML5Experts.jpにも以下のようにアツいメッセージが書かれています。 cssnextでFuture CSS syntaxを先取る！ これには非常に心を掴まれました。 また、cssnextが発信しているコピーも簡潔に心を捉えています。 Use tomorrow’s CSS syntax, today. これには**「トゥモローズシーエスエスをわれも

こんにちは、めぐたんです。 ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多くあります。 テキストリンクで貼ったりスクリーンショットと一緒に貼ったりと見せ方はその時々によりますが、はてなブログでは他にも「ブログカード」と呼ばれるリンクの形式があることをご存知でしょうか？ ヘルプにはこのように紹介されています。 「ブログカード」とは、ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式です。 実際の投稿画面から試してみました。掲載したいページのURLを指定するだけで、きれいなブログカードを埋め込むことができます。便利！ シンプルなテキストリンクだけよりも断然かっこいいので「はてなブログじゃない場所でも使いたいな〜」と思いますよね。 そこで、1クリックでそれらしきブログカードを生成できるブックマークレット

子要素を親要素からはみ出して画面いっぱいにするは、今までであれば親要素から出してコーディングし直すというのが一般的でした。 ただし、今ではcalcとvwとい新たなCSSの概念があるので、子要素を親要素からはみ出して画面いっぱいにするということが簡単にできるようになっています。 この記事は、その具体的なCSSの実装方法について紹介していきます！（結論から言うと、以下のとおりですが…） 📝 inner幅からはみ出して横幅いっぱいにするCSS わざわざコンテナーを作り直す必要がなくて、自然なHTMLのままでコーディングできます！ — .hoge { margin: 0 calc(50% – 50vw); width: 100vw; } — ピンクのエリアがインナーで、そこからはみ出して画面いっぱいになる pic.twitter.com/8wBUiw7Nzd — はにわまん (@haniwa00

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

CSS を利用したローディングアニメーションのサンプルは既に山ほど Web 上に公開されていますが、別件でコーディングをしていた流れで、たまたまローディングアニメーションのコードも適当に作ってみたので、いくつかのサンプルと共に、jQuery や外部モジュールも利用せず、実際に利用するための簡易的な方法をご紹介します。 まずは、今回適当に作成したローディングアニメーションのデモをご覧ください。 See the Pen Simple CSS Spinner valiation by digistate (@digistate) on CodePen. この HTML と CSS を基礎にして、以下に実際に利用するための手順をまとめます。 HTML の構造 各ローディングアニメーション要素の HTML の構造は至ってシンプルです。 <div class="box"> <!-- type1 〜 t

Firefox の最新版である Firefox 78 が 6月 30日付けでリリースされました。 このバージョンでは、CSS の :is()、および :where() 疑似クラスに対応した他、:read-only および :read-write 疑似クラスも -moz- ベンダ接頭辞が外れて正式対応となりました。 Firefox 78 for developers - Mozilla Firefox 78.0, See All New Features, Updates and Fixes :is() と :where() 疑似クラス どちらの疑似クラスも、引数としてセレクタを任意の数、記述することが可能で、それにより従来ならカンマ（,）区切りで記述していた複数のセレクタをコンパクトに記述することが可能になります。 例えば、 div p, section p, article p, asi

webpackの環境を作成したので、そのやり方と自分の環境のメモです。 webpackとはオープンソースのJavaScriptモジュールバンドラーです。主にJavaScript用のモジュールバンドルですが、対応するローダーが含まれている場合、HTML、CSS、画像などのフロントエンドアセットを変換できます。[7] webpackは依存関係のあるモジュールを受け取り、それらのモジュールを表す静的アセットを生成します。 webpack 作成したデータはこちら GitHub – webdrawer-kashu/webpack node.jsをインストールする node.jsを使うので、インストールしていない場合はnode.jsのページからインストールします。 nodejs.org ダウンロードするのは推奨版でよいと思います。 package.jsonを作成する 次にpackage.jsonを作成

Firefox 75 が CSS の min()、max()、clamp() 関数に対応、メディアクエリ不要でサイズの出し分けなどが可能に CSS の min()、max()、clamp() 関数は、引数を与えることでその中から最小値、最大値、中央値を算出値に応じて適用してくれる便利な関数ですが、Firefox が正式に対応したことで主要なブラウザ環境においてはほぼ実装の足並みがそろいました。 1つ前のエントリーでも触れたのですが、4月 7日に正式リリースされた Firefox 75 が、CSS における min()、max()、clamp() 関数に対応しました。 Firefox 以外のモダンブラウザではすでに実装済み （Microsoft Edge も Chromium 版 Edge で対応します。とはいえ日本では現在 Windows Update での自動配信が保留になっていますけど

Webフォントを使うためのベストプラクティス（最もパフォーマンスがよい、遅延が少ない）をGoogle Fontsの利用を中心に考えてみたいと思います。 形式 EOT・TTF・WOFF・WOFF2・SVG等ありますが、2019年12月現在、ほとんどのブラウザでWOFFとWOFF2がサポートされていますので、この2つを読み込めばOKです。 ※但し、案件ごとのターゲットブラウザは確認しましょう。 Google FontsのCDN利用 Google Fontsをタグで読み込んで使う場合、複数フォントを読み込むと以下のようなタグが発行されます。 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Roboto:400,700&display=swap&subset=japanese" rel="styles

JavaScriptのライブラリ「webfontloader」で、Webフォント読み込み時のコントロールを追加してみます。 webfontloaderを使用しない場合 まずは普通にWebフォントを設定してみます。 HTML <p class="genshinGothic">源真ゴシック</p> CSS @font-face { font-family: 'GenShinGothic'; src: url('GenShinGothic-Regular.eot'); src: url('GenShinGothic-Regular.eot?#iefix') format('embedded-opentype'), url("GenShinGothic-Regular.woff") format('woff'), url('GenShinGothic-Regular.ttf') format('t