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

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

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

minimum_sho 2022/04/27

html
css

リンク

デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA

デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS

minimum_sho 2022/03/31

リンク

どうしてHTML5が廃止されたのか | フューチャー技術ブログ

フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては﹁何をいまさら﹂という話題かと思います。しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。広義のHTML5 / 狭義のHTML5HTML5

minimum_sho 2021/06/21

HTML

リンク

最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説

最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説ページのタイトルと説明文、外部ファイルソーシャルメディア用のHTML アイコンとアドレスバーもう

minimum_sho 2021/04/27

html

リンク

正在安全检测...

点击前往

minimum_sho 2018/06/28

今いるページの実装

リンク

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のみでレスポンシブな画像を取り

minimum_sho 2016/09/26

html

リンク

たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color

もくじ幅をデバイスサイズに合わせるスマホを横にしたときに文字が大きくならないようにする電話番号に自動的にリンクが付かないようにするリンクを押したら電話をかけられるようにするリンクを押したらGoogleマップアプリを起動させるリンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせるまずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにするスマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし

minimum_sho 2014/06/09

リンク

すごい無料HTMLテンプレート厳選30個まとめ 2014年5月度PhotoshopVIP |

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

minimum_sho 2014/05/13

HTMLデザインテンプレート

html

リンク

- 単語の区切り - とほほのWWW入門

形式 サポート LS / H5 / e2 / Ch1 / Sa4 / Op11.7 / N2 カテゴリフローコンテンツフレージングコンテンツ親要素フレージングコンテンツを子要素に持てるもの子要素無し(Empty) タグの省略開始タグ:必須 / 終了タグ:無し属性グローバル属性 wbr は Word BReak の略です。行の中で「改行してもよい箇所」を示します。 wbr は最初 Netscape Navigator でサポートされました。 とあわせて使用され、 によって改行が禁止されたテキストでも が挿入された箇所だけは改行が許可されます。 wbr はその後、IE など他のブラウザに採用されました。HTML4.01 には採用されませんでしたが、HTML5 でサポートされました。ただし、HTML5 でも は採用

minimum_sho 2014/02/05

単語の区切りのタグ

html

リンク

HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS﹁HTMLで文字詰めするタイポグラフィー用JS﹂を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ※現在はアクセスできなくなっています。ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい！こうパッとガッとスッと設定したい！そんな希望を叶えてくれるのが﹁FLAutoKerning.js﹂です！ポイント1‥導入が楽です手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。入れてみたデモ

minimum_sho 2012/11/26

JSとhtmlで字詰め

html
jQuery

リンク

re-dzine.net situs togel online toto 2023 -

By penulis • January 10, 2023 • comments off Sebelum langsung ke poin utama yaitu mengenai trik rahasia main togel online yang beneran udah terbukti gacor buat hasilkan kemenangan, kalian yang mungkin masih berstatus pemula di game…

minimum_sho 2012/05/10

googleのHTML/CSSの記述ガイド。

css
html

リンク

知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio

minimum_sho 2010/03/02

html
css

リンク

Top - FireMobileSimulator.org

FireMobileSimulatorはFirefox/Chrome版ともに配布・メンテナンスを終了しました。本ページの内容は記録のみの目的で残しています。 FireMobileSimulatorとは？ FireMobileSimulatorは、主要3キャリア︵DoCoMo/Au/SoftBank︶の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成されたGoogle Chrome/Firefoxの拡張機能です。携帯端末のHTTPリクエスト、絵文字表示、位置情報送信機能などの動作をシミュレートすることができます。モバイルサイトをPCで閲覧するために、従来からある方法として、キャリア公式シミュレータの使用、Proxyの使用、Firefoxのuseragent switcher+modify headersの組み合わせ等、色々と手段はありましたが、これらの方法はそれぞ

minimum_sho 2009/06/23

FireMobileSimulatorは、主要３キャリア（DoCoMo/Au/SoftBank）の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成されたFirefoxのアドオン

mobile
html

リンク

[Think IT] 第1回：携帯サイトとPCサイトはここまで違う！ (1/3)

XHTML Mobile Profileに対応したHTML 本連載では、﹁PCサイトを制作してきたけど、携帯サイトは初めて﹂といった企業や個人クリエイター向けにPCとモバイルの違いなどをふまえ、携帯サイトを公開するまでの入門的なノウハウを紹介していきます。まず、今回はHTMLの種類やタグ、CSSなど携帯ブラウザによる違いと、画面サイズやキャッシュ容量などの端末による違いについて紹介していきます。では、早速携帯サイトを作る上でマークアップの基本となるHTMLについて説明します︵図1-1︶。携帯電話はPCと比べても非常に早い進化を遂げてきたため、どれも基本はHTMLを基準に作られていますが、携帯ブラウザ︵iモード、EZweb、Yahoo!ケータイ︶で表示可能なHTMLの仕様には実に多くの種類が存在します。現在市場に出回っている機種ということに限定すれば、XHTML Mobile Prof

minimum_sho 2008/10/08

mobile
html

リンク

GAC ��ŝ��ŝ��GAC->携帯向

minimum_sho 2008/03/28

i-modeのxhtmlの画像の回り込みの記述について

mobile
html

リンク

モバイル機器向けXHTML仕様

モバイル機器向けのXHTMLとして、現在その仕様が公開されているものには、 W3Cによる﹁XHTML Basic 1.0﹂ WAPフォーラムによる﹁XHTML Mobile Profile 1.0﹂の2つが挙げられます。いずれも、元の言語は、XHTML 1.0です。XHTML 1.0は、HTML4を再仕様化したものですので、含められている要素や属性は、よく知られているものです。 EZwebのWAP2.0端末には、Opnewave XHTML拡張属性を加えた﹁XHTML Mobile Profile 1.0﹂に、さらにEZweb独自の拡張要素を認識するブラウザが搭載されています。現在のEZweb環境では、 xml宣言を省略可能ブラウザがDTDをチェックしない各種の拡張要素/属性をブラウザ側で認識するので、ほとんど従来のHTML文書を作成するような手軽さでWAP2.0対応機用コンテン

minimum_sho 2007/11/28

mobile
html

リンク

作ろうiモードコンテンツ | サービス・機能 | NTTドコモ

iモードコンテンツの仕様や作り方、技術情報、開発ツールなどのコンテンツ制作者向けの情報を公開しています。iモードコンテンツの制作の際にぜひご活用ください。

minimum_sho 2007/11/28

mobile
html

リンク

CSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::

お探しのページは「すでに削除されている」、「アクセスしたアドレスが異なっている」などの理由で見つかりませんでした。以下でキーワードやカテゴリーから記事を探すことができます。

minimum_sho 2007/10/15

リンク

TableとCSSいろいろ - DesignWalker

minimum_sho 2007/10/04

リンク

HTML TAG index/ケータイ index

■ケータイ indexについてこのコンテンツは数年前より進化を止めています。そのため、ここに掲載されている情報はかなり古いものとなりますので、予めご了承ください…。︵外部へのリンクなどは、一部繋がっていないものもあるかもしれません︶ ■今後について時間ができたらリニューアルしたいと考えていますが、現在他のコンテンツをリニューアル作業中のため、ケータイindexは後回しにされています…。ごめんなさい。

minimum_sho 2007/10/02

html
mobile

リンク

はてなブックマーク

タグ

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

htmlに関するminimum_shoのブックマーク (44)

お知らせ

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

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

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス