令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
[CSS] before/after（擬似要素）の基本から使い方までを徹底紹介!! | ヨッセンス
「:before」で「pタグ」の前に文字を挿入 では、「before」属性を使って、すべての<p>の前に「オレ的には」というウザい文言を入れてみます。 「before」で前に文字を挿入 ではCSSを見てみます。 p:before { content: "オレ的には" ; } こんな感じですね。 たったこれだけの指定です。「p:before」のように「:（コロン）」の後ろに「before」と入れます。 で、その中で「content:"ここに自由に文章を入れる"; 」という指定をするだけです。「ダブルクォーテーションマーク」をお忘れなく! サンプル1 「:after」で「pタグ」の後ろに文字を挿入 では今度は後ろに入れてみます。たぶん予想できそうですけど、「after」って英単語を使うだけです。 「after」で後ろに文字を挿入 p:after { content:"……と言ってみる"; }
![[CSS] before/after（擬似要素）の基本から使い方までを徹底紹介!! | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae881a6d73c795de683729e28d02776cf2197309/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fcss-before-after-300.png)
擬似要素「before」「after」の例
昨日は暑い夜だった。 そして熱い夜でもあった。そう。一晩中ドラクエ5に没頭していたからだ。 なんと! ついに「はぐれメタル」が仲間になったのだ。
昔と違う2021年のHTML制作。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載7回目となる本記事では「ウェブ業界で、2010年代から変化したもの」をテーマとしてアンケート結果を紹介します。 floatプロパティーは現役？ floatプロパティーは、CSSレイアウトのために2000年代中頃からテーブルレイアウトに代わって使われてきました。FlexboxやCSS Gridなど、他にレイアウト手法が存在する現在において、floatプロパティーはどれほど使われているのでしょうか。 1829票の回答があり「とてもよく使う」が5.7%、「たまに使う」が19.8%、「ほとんど使わない」が69%、「floatを知らない」が5.5%でした。 現在はfloatプロパティーを使う
『なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用』という記事について
なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用 https://zenn.dev/coedo/articles/html-css-inline-element-block-level-element この記事では、『なぜインライン要素・ブロック要素概念は依然として有用なのか』という記事（以下「元記事」といいます）の説明について見ていきます。 この記事の対象者 この記事は、ウェブ制作を学んでいる人や、「インライン要素」「ブロック要素」という用語の扱いに困っている人を想定しています。 はじめに： 結論 この記事の結論は次の2つです。 今日のHTMLから「インライン要素」「ブロックレベル要素」という表記はなくなった。 ある要素にどのような要素を入れるのかは、「インライン要素」「ブロック要素」という考え方を使わなくてもできる。 詳しく説明したいと思います。
calcでフォントサイズを自動計算する方法（レスポンシブデザイン必須）
font-sizeはCSSのcalcとvwを使った公式にあてはめて、画面枠に応じた最適なサイズを自動計算できます。 必要なのはフォントの最小値と最大値、画面枠の最大値と最小値の4つの数値です。 calcの公式自体を丸覚えしてfont-sizeやpaddingの算出に流用できるようにしておきましょう。 レスポンシブルデザインの見やすさを決める「フォント」 レスポンシブデザインは、WEBの世界において必須のレイアウトになっていますよね。 その中でユーザー目線の優れたサイト作りをするための要因の一つが、「文字の見やすさ」を保つ事でしょう。 常に見やすいページを作るためには、表示デバイスごとに最適な大きさの文字を表示する必要があります。 ユーザーのデバイスはコントロールできない ただ、ユーザーがどんなデバイスで閲覧するかを制限する事はできませんよね。 となれば理想とするのは臨機応変に対応できる仕組
font-familyの書き方まとめ：CSSでフォント種類を指定しよう
基本的に複数のフォントを指定する フォントは基本的に複数の種類を指定します。複数のフォントを指定するときはフォント同士の間を,で区切ります。スペースは入れても入れなくてもどちらでもOKです。 複数のフォントを書く理由 なぜ複数書くのかというと、OSによって入っているフォントが異なるからです。言い換えると、Windowsなのか、Macなのか、iPhone/iPad（iOS）なのかで搭載されているフォントが異なるのです。Macにしか入っていないフォントを指定しても、Windowsパソコンからはそのフォントでウェブページを見ることはできません。そこで複数のフォントを書いて対応します。MacでもiPhoneでもiOSでも使えるフォントを複数個並べてカバーするというイメージですね。
リンク先や拡張子ごとにアイコンを表示する方法 - NxWorld
PDFの場合はPDFアイコン、メーラーが起動する場合はメールアイコンなどのように、各リンク先の種類に応じてアイコンを表示させる方法を紹介します。 個人的に普通のリンクだと思ってクリックしたら突然PDFが開いたり、メーラーが起動したりでイライラしたことが何度かあったので、ユーザーに同じような思いをさせないためにもこういう細かいところにも気を配りたいですね。 HTMLについて ここでは基本的に下記のようなHTMLを使用する想定になっています。 <!-- 通常のリンク --> <a href="http://www.example.com">http://www.example.com</a> <!-- mailto --> <a href="mailto:example@example.xxx.com">example@example.xxx.com</a> <!-- Excel --> <a
あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD
CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるでしょう。これはレイアウト用に特別に作られたdisplayプロパティです。さらには、この先、 grid がまもなく私たちの秘密兵器となるでしょう（現在、盛んに取り組まれています）。これもまた、レイアウトに特化したプロパティです。 本記事は、当初予定していたよりもずっと長くなりました。ご希望に応じて、自由にサブセクションに飛んでお読みいただければと思います。もし、お時間を割いて全体を読んでいただけるのでしたら、大変嬉しく思います???? 目
CorpusCSS – Your watch guide
If you're like most people, you probably use technology every day. Whether you're using your computer to work or play, or you're using your phone to stay connected with friends and family, technology is a big part of our lives. Food for thoughtOur guides cover everything from basic tips and tricks to more advanced concepts, and we're always updating them with new content to make sure they're as us
PSDファイルからそれっぽいHTML+CSSをいい感じにつくりたい - DRYな備忘録
ウェブページをつくるにあたってデザイナーさんから上がってくるデザインカンプはPhotoshopのPSD形式だったりする。これとにらめっこしながらHTML&CSSをイチから書いて、都度リロードしたり、画面の大きさを変えてレスポンシブのチェックをするのは、骨が折れる仕事です。 必要なもの Chromeブラウザ（ライブプレビューのため） Adobeアカウント（PSDファイルインポートのため） そしてBrackets ↓ Brackets エディタ あまり多くを望まず、それっぽいものでいいので、PSDからHTMLをつくれるといいなぁ、と思っていたので、知り合いのデザイナーに聞いたらいい感じのものを教えてくれた。 Brackets - A modern, open source code editor that understands web design. Web制作用のエディター。さすがWebデ
[CSS]float を利用せずに display:inline-block で要素を横並びにする方法｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
グローバルナビのメニューリンクを横並びにしたり、ギャラリー型サイトで画像をタイル状に横に並べたりと、サイト構築時に要素を横並びにするに当たってCSSの float や display を使うことが多いと思います。 float と display とでは見え方にどのような違いがあるか？について、サンプルも交えて紹介いたします。 float:left の場合 まずは float:left で要素を横並びにするサンプルです。 <style> .navi { width:100%; margin:0 auto } .navi li { float:left; border:1px solid #ccc; padding:5px 10px; text-align:center } </style> <ul class="navi clearfix"> <li><a href="#">リスト1</a>
![[CSS]float を利用せずに display:inline-block で要素を横並びにする方法｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/242c2d0936349b9fa10897f18b3f3f14bd2e9d4c/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2012%2F12%2Ffloatanddisplayinlineblock.png)
CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
[HTML5 入門]実制作で迷わない為のマークアップ例：会話文
文書構造を意識したマークアップ例 今回から始める不定期連載です。HTMLのコーディングのやり方はリファレンスサイト等で例文を用いて行われることが多いですが、どうも抽象的だったり、実際の運用に即していない印象のものが多く見られるように感じています。 仕様に関する解説やコードの書き方も、遠まわしだったり、「だから結局どう書けばいいの？」という感は拭えません。また、ドキュメント自体が書かれた地域の文化を基準にしており、我々日本のweb制作現場の実際にそぐわない場合もありますよね。 こういったことについて、一つ一つ実際の事例や具体的な使われ方を挙げながらHTML、CSSのコーディングについて解説したいと思います。 また、この連載にはブログの記事と同じく私個人のHTML5のマークアップに対する考え方が強く織り交ぜられることと思います。もし見解の相違などありましたらご意見頂きたいと考えています。 シン
![[HTML5 入門]実制作で迷わない為のマークアップ例：会話文](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ad9c1f78cd469d6befc307d0ea1a7cddb12ebc2/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fhtml5-semantic-dialogue-01-150x150.png)
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
Tips for Getting a Web Design from Illustrator into the Browser | Envato Tuts+
Scenario: someone hands you an Illustrator document with their latest web layout and it's your job to convert it into working HTML and CSS. Let's take a look how you can do that. Note: The aim of this tutorial is not to perfectly recreate the design for web use. Instead, we're going to use it to explore workflows and features within Illustrator which help us to do so. The Illustrator File Let's st
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gridlover
HTML Responsive Web Design
レスポンシブWebデザインの作り方（簡単設定方法）