サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBentoUIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。CSS Grid Generator BentoUIの実装については、BentoUIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。
htmlのSVGを使えば、テキストを波状や円形にできます。SVGですがベクターデータではなくテキストデータなのでフォントを使ったりCSSで装飾することも可能です。SVGtextPathを使った実際のサンプル まずは実例をご覧ください。 このように自由な線に沿ってテキストが流れていく表現ができます。 この手法は、docomoのahamo(アハモ)のサイトで実際に使われていました。 2021年3月の時点でのキャプチャですが、このような表現が画像ではなくテキストで実現できます。 docomoのahamoサイトの中のデザイン(2021年3月時点)SVGtextPathのソースコード 次のようなソースコードがベースとなります。 <svg class="test1" viewBox="0,0,600,400" xmlns="http://www.w3.org/2000/svg"> <path
![SVG textPathを使ってテキストを波状にする方法｜DESIGN REMARKS [デザインリマークス]](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f877e142c6f0532a5cd5764ec5a45e0439c50a166%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fdesign-remarks.com%252Fwp-content%252Fuploads%252F2021%252F03%252Fsvg_textpath_thumb-1200x675.jpg&f=jpg&w=240)
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 UsefulCSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タイプライターのようなエフェクト 2. 透過画像用シャドウ 3. カーソルのカスタマイズ 4. attr()でシンプルなツールチップ 5. ピュアCSSによるチェックリスト 6. is()と:where()による要素のスタイル 7. キーフレームを使用したアコーディオン 8. ホバーエフェクトのサイドバー 9
2022年に注目しておきたいCSSの新機能を紹介します。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他のブラウザもそれに続く予定です。 ビューポートではなく親コンテナに応じてスタイルを定義できる「コンテナクエリ」、詳細度とスタイルの順序を明示できる「カスケードレイヤー」、相対色構文が追加された「カラー関数」、Safariの100vhを解決する新しいビューポート単位「svh」など、今すぐにでも使用したい機能ばかりです。 Photo byJr Korpa on UnsplashCSS in2022 by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 注目の新機能（クロスブラウザでサポート） まだ先の新機能（実験的/シングルブラウザでサポート） 停滞している新機能 Safariは「新し
コーディングを勉強している方や、普段当たり前のようにコーディングしているけれど、上手く使えているのか不安な方向けにGoogleHTML/CSSGuideの翻訳記事を書きました。（2024年02月29日更新） 色んな方のコーディングを見ていると実に様々。情報や知識が古いままで、今では推奨されない書き方も散見されます。 特に仕事で使っていると、誰かに指摘されない限り自分のコーディングを見直す事は無いかもしれません。 ですがW3Cの定めたHTML5の廃止など、変化の速い業界では定期的な見直しは勿論、何か指標となる物があると安心です。 そこで今回はGoogleが用意しているgooglehtml/css styleguideのドキュメントを元に、Googleコーディング規約と要点を解説。このコーディングガイドラインが絶対的な正解では無いかも知れませんが、参考になれば嬉しいです。Google
ダウンロードの前に必ずお読みくださいコーディング練習用のデザインデータをダウンロードできます。 フリー素材の写真を使用しているのですが、素材を含めた状態のままpsdをお渡しすることは 規約違反なので、psdには素材写真を外して配布しています。 ご了承ください。 psdにはご自分のお好きな素材写真を入れて使うことができるように作ってありますので スマートオブジェクト内に差し替えてお使い下さい。 XDファイルではXDのプラグインを使用しています。 un Draw、Unsplash Random Imageのプラグインの素材を使用しています。 それぞれのサイトで規約を確認してください。
CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
CSSの「auto」は非常に便利な値で、マージンやサイズ（width, height）や配置などのプロパティに使用することができます。「auto」がどのように機能するのか、「auto」を活用したテクニックを紹介します。 自動マージン、autoを使った要素のサイズ指定、中央配置に使用するautoの仕組み、FlexboxやGridで知っておくと便利なautoの使い方、overflowにおけるautoなど、実用的なテクニックが満載です。 Everything About Auto inCSS by Ahmad Shadeed はじめに widthプロパティにおけるauto width:auto; の使いどころ heightプロパティにおけるauto marginプロパティにおけるauto 絶対配置された要素におけるmarginのauto Flexboxにおけるauto Flexboxのプロパテ
もう年末ですね。 去年の今頃は風邪で鼻水だらだらの記憶がありますが、皆さんは如何お過ごしですか？ どうも、しばおです。 さて、いきなりですが、皆さん ハンバーガーボタン ってどうやって作ってます？ ハンバーガーボタン の作り方をググったりすると、空っぽの span タグ 3個で作ってたり、div タグ や チェックボックスで作ってたりするのをよく見かけます。 でもね。僕的には、button 要素がベストだと思っているんです。 そこで今回は、なぜハンバーガーボタンを button 要素で作った方がいいのかや、僕なりの作り方をできる限り詳しく解説をしてみたいと思います。 ちなみにこの記事は、ある程度、HTMLやCSS、JavaScriptを使った基本的なコーディングを理解している人向けになりますので、CSSって何？って方は先に、基本的なコーディングを学習しておいて下さい。 ハンバーガーボタン
CSSで見出し固定＋レスポンシブ対応の表を作成料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 見出しの行を固定する表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。HTML <table> <tr class="heading"> <th>車体名</th> <th>価格</th> <th>燃費</th
CSS transform / opacity /transition 周りの意図しない挙動・不具合・バグフィックスまとめ [ 随時更新 ]CSS こんにちは、ma-ya’sCREATE［まーやずくりえいと］です。 要素をアニメーションさせる時に毎度お世話になるCSSのtransformやopacity。描画とロジックをCSSとJSに分離するためにも、なくてはならない存在だと思ってます。 しかし多用した場合、他のソース部分と干渉して意図しない挙動になることもしばしば。毎度毎度調べるのも面倒なので記事で簡潔にまとめていくことにしました。 あくまで自分用メモなので解説は少な目かつ順不同です（苦笑）。 意識しておいた方が良い前提 transformやopacity指定をした要素はスタックコンテキストを生成する スタックコンテキストとは何ぞや？というのはMDNさんにでもお任せするとして… 重
![CSS transform / opacity / transition 周りの意図しない挙動・不具合・バグフィックスまとめ [ 随時更新 ] | ma-ya's CREATE / WEB DESIGN](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f461f1436e102a0e8d3098a9404bf4d056762640d%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fmyscreate.com%252Fwp-content%252Fuploads%252F2018%252F12%252Fcssbug.png&f=jpg&w=240)
この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新HTML/CSS スニペットをまとめてご紹介します。 スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ローディングアニメーション系 7.SVGアニメーション系 8. 便利、面白系スニペ
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
実際のところ、Flexboxはどのくらい使用されているのか、CSS Gridはどうなのか、どのCSSの機能がよく使われ、どのフレームワークやツールが採用されているのか、CSSのプロパティ・機能やツールについて、2019年現在の使用状況や認知度を調査した「The State ofCSS 2019」を紹介します。 The State ofCSS 2019 The State ofCSS 2019は、The State ofCSS Surveyで今年の2月にアンケートを行った調査結果をまとめたものです。私も1票分参加しました。 ちなみに、代表者の人はフランスの方で、現在は京都に住んでいるそうです。 「日本のデベロッパーにも楽しんでもらえたら、嬉しいです」とメッセージを頂きました。 下記は、特に気になった調査をピックアップしたものです。 ※元サイト様にライセンスを得て掲載しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
