タグ

関連タグで絞り込む (20)

タグの絞り込みを解除

htmlに関するSireのブックマーク (65)

  • 令和のHTML / CSS / JavaScriptの書き方50選


    Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は﹁2024年のWeb制作ではこのようにコードを書いてほしい！﹂という内容をまとめました。 質より量で、まずは﹁こんな書き方があるんだ﹂をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
    令和のHTML / CSS / JavaScriptの書き方50選

  • CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ


    CSS変数︵カスタムプロパティ︶は、文字通りCSSで変数が使用できるので非常に便利です。CSS変数の使い方でよく聞くのはカラーですが、それ以外にもさまざまな優れた使い方があります。 WebサイトやスマホアプリのUIで、特にコンポーネントのバリエーションを実装するのに役立つCSS変数の使い方を紹介します。 Practical Use Cases For CSS Variables by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS変数を活用できてない例 CSS変数の優れた使い方 1: ロングハンドのプロパティ CSS変数の優れた使い方 2: 背景 CSS変数の優れた使い方 3: グラデーション CSS変数の優れた使い方 4: クリップパス CSS変数の優れた使い方 5: チェックボッ
    CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ
    Sire
    Sire 2021/06/02
    ★★★★
    リンク

  • CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説

    CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介します。 CSS Scroll Snap by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのスクロールスナップを使う理由 スクロールコンテナの基本 スクロール コンテナの注意点 CSSのスクロールスナップとは scroll-snap-stopの使い方 scroll-paddingの使い方 scroll-marginの使い方 CSSのスクロールスナップの使用例 block値とinline値について アク

    CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説
    Sire
    Sire 2021/05/28
    リンク

  • あなたがまだ使っていないかもしれないHTML5の便利機能10選


    こんにちは、たかとーです🧑‍🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース︵2008年1月︶以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
    あなたがまだ使っていないかもしれないHTML5の便利機能10選
    Sire
    Sire 2021/05/28
    リンク

  • Loading...

    Loading...

  • キーボード操作を意識したHTML/CSSコーディング

    この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で

    キーボード操作を意識したHTML/CSSコーディング
    Sire
    Sire 2020/12/07
    アクセシビリティ
    リンク

  • Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs | CSS-Tricks

    Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to make responsive sites. In this article, we’ll dig into a number tools (revolving around HTML and CSS) we have at the ready, from responsive images to relatively new

    Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs | CSS-Tricks
    Sire
    Sire 2020/09/05
    画像の指定
    リンク

  • 2024年に最適なfont-familyの書き方 - ICS MEDIA


    ウェブサイトのフォントは何を指定すればよいのでしょうか？　CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い﹁無難﹂なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
    2024年に最適なfont-familyの書き方 - ICS MEDIA

  • HTML5 スライダーで数値を入力するサンプル(range) | ITSakura

    スライダーで数値を入力する スライダーを左右に動かすとスライダーにあわせて数字が動的に変わります。 このサンプルでは、値は１から10までにしています。 1 上記サンプルのコードです。 <body > <input type="range" value="1" min="1" max="10" step="1" oninput="document.getElementById('output1').value=this.value"> <output id="output1">1</output> </body> 3行目は、range属性を指定しています。 ・最小値はminにセットし、最大値はmaxにセットします。省略可能です。 省略された場合は0から100になります。 ・初期値はvalueにセットします。 ・増分値はstepにセットします。省略可能です。省略された場合は、1になります。 4

    Sire
    Sire 2020/02/19
    リンク

  • HTML5 Boilerplate: The web’s most popular front-end template

    HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

    HTML5 Boilerplate: The web’s most popular front-end template
    Sire
    Sire 2020/02/07
    テンプレート
    リンク

  • 8 HTML tags you need to be using (and 5 to avoid)

  • 技術ブログの「ソースコード」表示を効果的にカスタマイズする方法 | maesblog


    プログラミングなどの技術記事を書く際に欠かせないのが﹁ソースコード﹂の表示です。極端な話、エンジニアであれば、文章を読まなくても見出しとソースコードさえ追えば、ある程度の内容がわかってしまうものです。従ってブログでのソースコードの見せ方には一工夫加えてこだわりたいところですね。当ブログでも技術系の記事をよく書くのでソースコードをよく扱っています。先日、当ブログのソースコード周りを見直しました。今回は当ブログのソースコードの表示で使っているテクニックをいくつか紹介します。 現在の当ブログのソースコードの表示は以下のようになっています。 import React from 'react'; export default class Code extends React.Component { constructor() { super(); state = { value: null, };
    技術ブログの「ソースコード」表示を効果的にカスタマイズする方法 | maesblog

  • HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ

    以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb

    HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ
    Sire
    Sire 2019/11/22
    リンク

  • リンクを作る時の target="_blank" の危険性 - 隙あらば寝る


    html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
    リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
    Sire
    Sire 2019/02/04
    リンク

  • HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA


    日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です︵参照﹁StatCounter﹂)。 HTMLの﹁レスポンシブイメージ﹂を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です︵現在のHTMLの仕様書︶。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
    HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
    Sire
    Sire 2016/09/26
    リンク

  • W3Schools.com

    W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999

    W3Schools.com

  • Honoka

    Primary Secondary Success Info Warning Danger Link Primary Secondary Success Info Warning Danger Link Primary Secondary Success Info Warning Danger

    Sire
    Sire 2016/06/06
    日本語を美しく表示できるBootstrapテーマ
    リンク

  • CSSのみ！動きのあるデザインをコピー＆ペーストで実装できるサンプルコード集


    自由度の高い表現が可能になったCSS3は、簡単なアニメーションや動きをつけることもできます。 今回は、CSSだけでできる動きのあるデザインをピックアップしてご紹介します。 フロントエンジニアの方にとっては、CSSテクニックのレパートリーが増えるだけでなく、コピー＆ペーストで手軽に利用できますので、動きのある表現をしたいという時に取り入れてみてはいかがでしょうか。 CSSだけで表現できる動きのあるテクニックまとめ 1.CSS3フルスクリーン背景スライドショー DigitalSkill CSSのみでフルスクリーン背景のスライドショー、タイトル表示をおこなうチュートリアルです。 アニメーション部分は、複数パターンのサンプルデモを公開しています。 2.Fullscreen Overlay Effects codrops クリックすると、フルスクリーンのオーバーレイがかかるエフェクトのサンプルです。
    CSSのみ！動きのあるデザインをコピー＆ペーストで実装できるサンプルコード集

  • HTML の 〜 内に書くタグの順番にも気を遣ってみた。


    今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで﹁要素を検証﹂して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日︵2016年1月20日︶現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on
    HTML の 〜 内に書くタグの順番にも気を遣ってみた。
    Sire
    Sire 2016/01/21
    リンク

  • Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita


    iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能︵OSX版含む︶ CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
    Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
  • 1 2 3 4 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.