[B! html] adstyのブックマーク

2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素ソーシャル関連のhead内の要素ブラウザ・プラットフォーム関連のhead内の要素メモ head内に記述する最小限の構成下記はシンプルなWebサイトで必須となるhead内に記

adsty 2023/01/25

丁寧に記述すると量が多く管理も大変だ。

リンク

無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】

﹃無料コーディング練習所﹄では、完全無料のコーディング教材を提供しています。入門編から上級編まで6サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。デザインカンプと完成版コーディングデータ付きです。この教材は制作会社の新人コーダーの教育にも使用されています。さぁ、楽しみながら一緒に勉強していきましょう♪

adsty 2022/04/27

HTML・CSS・jQueryの基礎スキルが身に付くカリキュラム。

リンク

少しのコードで実装可能なHTML小技集

2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！目次セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化スマートフォンでエンターキーのテキストを変える画像の遅延読み込みテキストの折り返し位置を指定する番号付きリストの順番を変更する簡単アコーディオン任意のテキストを自動翻訳させないリンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多

adsty 2022/04/09

少しのコードでちょっと良くなる小技集。

リンク

閲覧中のウェブページ全体を単一のhtmlファイルとしてダウンロード＆注釈付けも可能な「SingleFile」レビュー

ウェブブラウザで閲覧中のウェブサイトをページ中の画像も含めて保存したいと思ったときに、HTMLファイルと画像ファイル・スタイルシートが別フォルダになることなく、単一のHTMLファイルとして保存できるブラウザ拡張機能が「SingleFile」です。 SingleFile – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/single-file/ SingleFile - Chrome ウェブストア https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle SingleFile - Microsoft Edge Addons https://microsoftedge.microsoft.com

adsty 2022/03/07

HTMLファイルと画像ファイルが別フォルダになることなく保存できる。

リンク

HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG

GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ﹁TablesNG﹂で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにTablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック

adsty 2021/07/09

テーブルの不整合の修正を目的とした再アーキテクチャの取り組み。

リンク

よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無しフレームワークは必要無しピュアCSSで実装、CSS

adsty 2021/02/18

それだけを実装するためコードやカスタマイズは簡易的。

リンク

Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT

テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。インライン編集もサポートされています。データに合わせて幅を自動調整。行をクリックして展開する機能。カラムをグループ化。カラムを縦に。これはカラムが多い時に便利そうです。ドリルダウン。テーブルを入れ子にもできます。スパークライン表示。フッターで集計。 HTMLテーブルを変換する機能もあ

adsty 2018/12/16

多機能なテーブル表示を実現してくれる。

リンク

HTMLのheadの書き方、head内に記述する要素の総まとめ

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素ソーシャル関連のhead内の要素ブラウザ・プラットフォーム関連のhead内の要素メモ head内に記述する最小限の構成下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c

adsty 2017/09/26

head内の記述事項がまとめられた「<head> cheatsheet」。

リンク

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミックデザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。LEGOブロックの考え方を

adsty 2017/01/11

LEGOブロックの考え方で学ぶモジュール式Webデザイン。

リンク

Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ

先日﹁Chrome デベロッパーツールの使い方﹂で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。デベロッパーツールの便利な使い方タブ﹁Elements﹂を選択 DOM要素を選択右パネルのタブ﹁Computed﹂を選択﹁Computed﹂には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。これは大きなサイトを制作している時に、非常に有用です。

adsty 2015/10/30

Chromeのデベロッパーツールの便利な使い方を紹介。

リンク

HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート

HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。画像: Girly Drop HTML5で作成する時の必要最小限のテンプレートナビゲーションを上部に固定配置背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレートまずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。テンプレートはIE9や8以下への最低

adsty 2015/10/26

HTML5でWebページを作成する時に役立つテンプレートを紹介。

リンク

Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック

Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集指定した行番号に移動すべての子ノードを展開デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット複数のカーソル画像をData URIとしてコピー疑似クラスのトリガー複数のコラムをドラッグで選択「$0」で現在の要素を手に入れる要素の表示「Event Listeners」の表示イージングのプレビュー Media Queriesの検証ネットワークをフィルム

adsty 2015/09/26

Chromeのデベロッパーツールの活用術。

リンク

HTML の a 要素に target=”_blank” をつけるのはもうやめよう

HTML のa要素に target 属性をつけて、リンク先の文書をどこで開くのかを指定できますね。デフォルトは _self で、元のドキュメントと同じフレーム。無指定だとこれになるので、わざわざこれを書くことは少ないと思うけど。一番よく使うのは target="_blank" じゃないでしょうか。リンク先のドキュメントを新しいタブやウィンドウで開くやつですね。これ、以前はよくつかってました。ルールとしてサイト内リンクは target 指定なし外部サイトへのリンクは target="_blank" というのが多かったんじゃないかな。でも最近、これはもうリンク先がどこであろうと指定しない方がいいんじゃないか、と思ってます。もちろんサイトによってそれぞれ使いわけはあると思うんだけど、少なくともほとんどの手元のサイトの場合はいらない。 target="_blank" を使ってきた

adsty 2015/06/15

タブを開き過ぎて整理しようともしないタイプの希望的意見。

リンク

「ゼルダの伝説神々のトライフォース」のフィールドマップをHTML5でライブマップとして再現

スーパーファミコン発売1周年記念ソフトとしてリリースされた﹁ゼルダの伝説神々のトライフォース﹂の﹁光の世界﹂のフィールドマップをHTML5で再現したページ﹁The legend of zelda a link to past live mapinHTML5﹂が公開されています。フィールドマップはただのマップではなくライブマップとなっており、非常に広大なフィールド内を敵キャラクターたちがウロチョロしまくっており、懐かしの冒険の日々がフラッシュバックしまくりなマップになっています。フィールドマップの全体像はこんな感じ。中央にある正方形の白い建物がハイラル城で、その左に広がるのがカカリコ村。カカリコ村は﹁ゼルダの伝説神々のトライフォース﹂以降のシリーズでも登場するおなじみの村名です。ハイラル城部分だけをGIF画像にするとこんな感じ。城の兵士たちが爆弾・剣・槍でエンドレスに攻撃しまくり

adsty 2015/05/03

広大なフィールド内を敵キャラクターたちが動いている懐かしいマップ。

リンク

meta name="referrer"は、HTTPS→HTTPでもリファラを出す新しい仕様 | 初代編集長ブログ―安田英久

今日は、ちょっと技術的な話を。﹁meta referrer﹂という、リンクをクリックしてページ移動するときなどにリファラをどう送るかを、ページ側で指定できるタグの実装が進んでいるのです。グーグルはHTTPSを推奨するけれども、リファラが……グーグルは、サイトがHTTPSかどうかを順位決定の要因とするなど、HTTPSを推奨しています。でも、自分のサイトをHTTPSにすると、自分のサイトから非HTTPS︵ふつうのHTTP︶のサイトへのリンクをクリックしたときに、リファラが飛ばないんですよね。これは、RFC 2616で、﹁セキュア接続のページから、非セキュア接続のページに移動するときは、リファラを送出するべきではない﹂と定められているからです︵セクション15.1.3︶。とはいえ、Web担のようなメディアでは、﹁Web担のページから、うちのサイトにけっこう来る人いるんですよ﹂という反応も大

adsty 2015/04/14

metaタグでリファラの送出をコントロールする方法。

html

リンク

ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

adsty 2015/02/06

無料ダウンロード可能なHTMLテンプレート素材いろいろ。

リンク

各ソーシャルサービスのシェアボタンをJavaScript無しのシンプルなコードで生成するジェネレーター

Twitter, Facebook, Google+, Pocketなど、各ソーシャルサービスのシェアボタンをJavaScript無しのシンプルなHTML/CSSのコードで生成するジェネレーターを紹介します。

adsty 2014/06/17

ボタンのデザインやサービスを選択するとシンプルなHTML/CSSのコードを生成。

リンク

「blinkタグ」の開発者が明かすテキスト点滅タグが生まれた知られざる理由とは？

By Steven Martin ﹁blinkタグ﹂とはテキストを点滅させる効果を持つHTMLコマンドの1つで、多くの人々に最も嫌われるタグの1つとして知られています。Netscape Navigator 2.0に独自に実装されていたものですが、IEはもともとサポートしておらず、2013年にFifefoxがblinkタグのサポート廃止したこともあり、近頃は見かけることもなくなっています。そんなBlinkタグの発明者自らが、﹁なぜblinkタグを開発したのか？﹂というおもしろおかしな開発秘話を語っています。 the origin of the tag - www http://www.montulli.org/theoriginofthe%3Cblink%3Etag 1994年当時、ルーさんはNetscapeを設立したエンジニアの1人であり、現在のポピュラーなブラウザの先駆けとなったテキスト

adsty 2014/05/28

ジョークから生まれて実装されたタグは、やがて最も嫌われるタグの一つに。

リンク

「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめフラップイズム

※2014年2月26日に更新しました。要素及び属性をなるべく新しい仕様書に準拠、その他頂いたコメントへの対応を行いました。 ※2014年3月3日更新しました。タグと要素の違いについて追記。本文内でタグと要素の記述が間違っていた部分を修正。﹁要素が要素をまたがってはいけない﹂というのはどの形式でも同じなので、記述を削除。どうも、くーへいです。今日はある方からリクエストされた記事を書こうかと思います。皆さんは、コーディングをするときに﹁HTML 4.01﹂、﹁XHTML 1.0﹂、﹁HTML5﹂のどれを使っていますか？実際には案件ごとに使い分けているかもしれませんね。この投稿では、それぞれの違いについて、考えていきたいと思います。 ※要素とタグを混同する方も多いですが、要素とタグでは意味が全く異なります。例えば、﹁<html>・・・</html>﹂は要素ですが、﹁<html>﹂や﹁

adsty 2014/02/22

HTML仕様の明確な違いやブラウザの対応状況等。

リンク

完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)

作成‥2014/01/27 更新‥2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて﹁コーディング﹂についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。エンジニア速報は Twitter の@commteで配信しています。もくじコーディング前の準備1．仕様書の確認2．入稿データの確認・スケジューリング HTML5マークアップ3．テンプレート作成4．条件付きコメント5．GCF＋キャッシュクリア6．OGP記述7．ファビコン8．アウトライン作成9．バリデーターをチェック CSS の設定10．ノーマライズスタイルレスポンシブデザイン設計11．モバイルファーストを基準に設計12．プログレッ

adsty 2014/01/27

コーディングの一連の流れまとめ。

リンク

はてなブックマーク

タグ

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

htmlに関するadstyのブックマーク (177)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

月間はてなブックマーク数ランキング（2024年5月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス