令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
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
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プロパティーは一切使っていません。 サンプルを別ウインドウ
Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css
現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Reseter.css -GitHub Reseter.cssの特徴 Reseter.cssの使い方 Reseter.cssの中身 Reseter.cssの特徴 Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。 Reseter.css バグやブラウザの不整合
CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介 | BUILD Journal
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン蛍光ペンのような線をひいたCSS見出しデザイン HTML<h2 class="heading01">ラインを使ったCSS見出し</h2>CSS.heading01 { display: inline; font-size: 26px; background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%); }蛍光ペンで線を引いたような見出しデザインです。display: inlineで複数行にも対応させています。 2色を重ねた線とCSS見出しデザイン HTML<
2020年、知っておくと便利なCSSのプロパティのまとめ
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
cssで作るシェアボタンのデザインパターン36種類 - FOXISM
cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。） 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。） というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog
こんにちは。Supership デザイナーのハガです。今回はcssのお話です。 皆さんはcssで、あるデザインを実現しようとした時、あれってどうやるんだっけ？みたいな経験をしたことはありませんか？自分はよくあります。そんな時コピペするだけでokみたいなcssスニペット集があると嬉しいと思い、主に自分のためのメモ的な意味を多分に含みつつご紹介していきたいと思います。（今回紹介しているcss達は主にスマホのためのモダンなブラウザを対象としているため、ieのようなレガシーな感じはごめんなさい。） 10個のcssテクニックコアとなる部分はboldで表現しています。細字の部分はお好きに調整してください。 1.カルーセル<ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
![[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/f43e585f4105dca3513739b1a83cc4d242345de2/height=288;version=1;width=512/https%3A%2F%2Fimages.wantedly.com%2Fi%2Fqq2P91N%3Fw%3D1200%26h%3D630%26style%3Dcover)
よこ並びのCSS。
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
Keiyaku CSS
Keiyaku CSS Crazy Style Formatter for Japanese Contract Document Unfortunately, the style in Japanese contract document is totally crazy. I hope this CSS library cures that a bit: write a document logically structured in markdown or HTML, apply keiyaku-css to it then, you’ll get a well-formed document good luck! 概要 Keiyaku CSS（以下、「本件ライブラリ」という。）は、Markdownで書かれた契約文書を、適切な印刷書式にスタイリングするための、CSSライブラリです。 ユ
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
コピペで実装！CSS3でオシャレなデザインのサンプルコード47選
2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
【CSS】決定版！リセットCSS総まとめ
HTML、CSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。 リセットCSS とは？ 各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれています。ブラウザのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザ間の表示差異(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始めるためのものです。 リセットCSS のメリットとデメリット メリット ブラウザ間の表示の違いを効率良く最小限に抑えるこ
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
CSSで括弧を表現したサンプル - NxWorld
丸括弧（） 頭から微妙な見栄えですが、**丸括弧（）**を表現してみたものです。 HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
