HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA

2023/06/22 288 users ICS MEDIA 常識 連載 傾向 ウェブ制作

ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します... 続きを読む

開発・運用しやすくするHTMLコーディングのTips - NRIネットコム Design and Tech Blog

2021/11/26 8 users NRIネットコム スパゲッティ Tips 実装 中途採用

スパゲッティ はじめまして こんにちは、高須賀　淳と申します。中途採用で入社して8年目です。 普段は、HTML・CSS・JavaScriptを用いてWebサイトの設計・実装を中心に活動をしています。 今回のお話は 「開発・運用しやすくするHTMLコーディングのTips」と題して具体的なソースコードを交えてお話ししたいと思います。 ... 続きを読む

HTMLコーディングでもReact+TypeScriptの開発体験を得る

2021/08/10 23 users React+TypeScript Pug 開発体験 HTML

前置き HTMLを納品する形式の仕事の際にEJSやpugではなくReact+TypeScriptを使ってHTMLを生成しつつ開発体験を高めてほしい。 ということで具体的にどのようなメリットがあるのかを伝えたくてまとめてみました。 開発環境 1から環境を作るのは大変なので今回はクラクさんのministaを拡張していきます。 ministaの紹介記... 続きを読む

VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロードや同期できる拡張機能「SFTP」が超便利 | カレリエ

2018/11/25 197 users sftp vscode メーン FTP エディタ

VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロード同期できる拡張機能「SFTP」が超便利だったので紹介します。 自分の主な業務はWordPressのサイト構築とHTMLコーディングです。今年よりメーンのエディタをVSCodeに切り替えました。当初はファイルはFTPのアプリケーションなどを使っていましたが... 続きを読む

若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA

2018/05/17 1056 users ICS MEDIA 地獄 温故知新 若い世代 黎明期

ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では主にIE6が全盛期だった2000年代のウェブサイト制作を振り返ります。昔からコーディングしている方は懐かさに浸ったり、そうでない方は現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / s... 続きを読む

HTMLコーディングの人気のスタイルは？ アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA

2018/01/11 315 users いまどき ICS MEDIA 常識 連載 同業他社

ICS MEDIA Web制作 2018/01/11 HTMLコーディングの人気のスタイルは？ アンケート結果から分析するイマドキのウェブ制作事情 ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第三回目となる本記事では ウェブ業界... 続きを読む

グラフィックデザイナーやディレクターがhtmlコーディングの指示に関して注意すべきこと / Shiro Kuro Inc. // Speaker Deck

2017/04/07 108 users Speaker Deck ディレクター 指示

グラフィックデザイナーやディレクターがhtmlコーディングの指示に関して注意すべきこと / Shiro Kuro Inc. 続きを読む

コーディングを10倍早くするSketch Pluginを紹介するよ - ゆめいろデザイン :: フリーランス UX/UIデザイナー

2017/02/08 74 users コーディング UIデザイナー コーダー Sketch 立場

UIを制作するベストなアプリ、とばかりに普及したSketch。最近はHTMLコーディングに役立つSketch Pluginも増えてきました。 本日は、デザイナー視線ではなく、コーダーやプログラマー的な立場からみた、コーディングを10倍早くするSketch Pluginを紹介します。 Make Exportable はじめに紹介するのは、「 Make Exportable 」というプラグインです。画... 続きを読む

HTMLを効率よく書く！Emmetの書き方・使い方まとめ | Designup

2015/01/09 183 users Emmet Designup コーディングルール HTML

Emmetを使ってHTMLコーディングの効率を上げることができます。この記事では、Emmetのインストールからコーディングルールの基本、応用までを簡単に解説。明日からすぐに使えるテクニックを大公開！コードエディターにはHTML・CSSを効率良く編集する方法でも書いたように、コードの自動補完などの機能が備わっています。これらの機能を使うことで効率良くコードを記述することができるのですが、ここではさら... 続きを読む

ブラウザのパフォーマンスを限界まで高める HTMLコーディングの考え方

2014/10/24 559 users 限界 パフォーマンス ブラウザ Oct 考え方

Full Name Comment goes here. 12 hours ago Reply Edit Delete Spam Block ブラウザのパフォーマンスを限界まで高める HTMLコーディングの考え方 Presentation Transcript 1. ブラウザのパフォーマンスを限界まで高める HTMLコーディングの考え方 HTML5とか勉強会 Oct, 24th 2014 2. 川... 続きを読む

PHP Fine Diff - 利用場面が多そうなPHP差分表示ライブラリ MOONGIFT

2014/06/03 37 users 筆者 プログラミング 自作 Webアプリケーション 差分表示

あなたが開発者であるならば差分表示にはいつもお世話になっているのではないでしょうか。かく言う筆者も毎日のように使っています。しかしそれの主な利用はプログラミングやHTMLコーディングではないかと思います。 差分表示をもっと色々な場面で使ってみたいと思うならば、自作のWebアプリケーションに組み込んでみると面白そうです。そこで使ってみたいのがPHP Fine Diffです。 PHP Fine Dif... 続きを読む

今さら人に聞けない！WordPressで使われているmod_rewriteの説明書 | ノウハウコラム | HTMLコーディングのクロノドライブ

2013/12/02 107 users mod_rewrite クロノドライブ htaccess

WordPressのmod_rewriteコードを参考にmod_rewriteについてまとめてみました。 mod_rewriteとは、何かご存知でしょうか？ これは、Apacheというhttpサーバで利用されいてるモジュールと言われるもので、URLの書き換え・リダイレクト処理を行なってくれるものです。 主に「.htaccess」というファイルに任意の処理を記述して使用します。 mod_rewrit... 続きを読む

ワンランク上のHTMLコーディングを行うための18のポイント | sogitani.baigie.blog

2013/11/28 803 users sogitani.baigie.blog バリデーター

HTMLコーディングの初級レベルというと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルという認識でいます。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿の入れ間違いなどのヒューマンエラーがない。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけ... 続きを読む

新人コーダーに知っておいて欲しいリダイレクトの基本 : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2013/10/29 952 users XHTML クロノドライブ CSSコーディング最安保障 基本

サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの... 続きを読む

HTMLコーディングの問題点を浮かび上がらせてくれるブックマーク「DiagnostiCSS」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/10/20 183 users MOONGIFT MIT License ソフトウェア 動作

DiagnostiCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。Webブラウザはよく出来ていて、Web標準に沿っていなくともそれっぽく表示してくれます。しかしそれに安穏としているとレガシーなブラウザなどで表示が失敗したり、意図した動作にならないことがあります。そこでDiagnostiCSSを使ってチェックしてみましょう。 MOONGIFTで実行しました... 続きを読む

画像を使わない擬似フォームUIの作り方 第02回 「jQueryを使った擬似フォームUIの操作」 : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2013/01/17 46 users jQuery XHTML クロノドライブ CSS HTML

前回はCSSを使って擬似フォームUIのデザインを整えるところまでを紹介してきましたが、今回からは擬似フォームUIの肝となる、jQueryを使ったフォーム操作の方法を紹介していきます。 STEP05 jQueryでチェックボックスのチェック状態を操作する この時点でのサンプルを表示する 擬似フォームUIでは、実際のチェックボックスは隠れた状態になるため、jQueryでチェック/未チェックの切り替えを... 続きを読む

画像を使わない擬似フォームUIの作り方 第01回 「CSS3を使った装飾」 : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2012/12/19 100 users XHTML クロノドライブ CSSコーディング最安保障 装飾

■完成イメージ ブラウザ標準のフォームUI（チェックボックスやセレクトボックス）のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。 そういったときに、実際のフォームUIを隠し独自のフォームUI... 続きを読む

[K] これでHTMLコーディングが捗るかも！TextWranglerにzen-codingを導入してみました

2012/06/17 58 users Zen-Coding

この一年でHTMLを書くこともちょくちょく増えてきました。どうも@knk_nです。 Twitterで「zen-coding」というコトバを目にし、興味を持ったのでお気に入りのテキストエディタ「TextWrangler」に導入してみることに。 無料だけどかゆいところに手が届く高機能なHTML&テキストエディタ「TextWrangler」 Zen-codingとは zen-codingとはHTMLの記... 続きを読む

[iPad] Diet Coda: iPadでHTMLコードが書ける！コード補完や言語カラーもサポート。超使いやすい！ - AppBank

2012/05/25 52 users CSS AppBank HTML サーバー 入力補完

iPadで快適にHTMLやCSSがコーディングできるアプリDiet Codaの登場です！ iPadでHTMLコーディングができる時代がやってきました！ コードの言語カラーリングは、もちろん入力補完や専用ショートカットメニューなど、快適にコーディングできる環境がそろっています。サーバーが対応していればSSHターミナルの操作も可能です。 高機能、高性能なWebオーサリングツールを詳しくチェックしていき... 続きを読む

技術的に出来ないことを納得してもらうためのポイント | モノづくりブログ 株式会社8bitのスタッフブログです

2012/03/28 49 users 株式会社8bit ポイント スタッフブログ ブログ プログラム

株式会社8bitのスタッフブログです。Webサイト制作やWebサービスの開発をやっていると、プログラムやHTMLコーディングで、どうしても実現できないことが発生する場合があります。 予め調べていたのに、いざ実際に開発に入ってみたら思いもしないところで影響が出て、仕様通りの動きが出来ない。などなど。 そんな時、ただ単に「出来ません！」と言い放ってしまうのでは、大人気ではありませんし、制作自体もあんま... 続きを読む

その仕事、10年後もやってますか？〜下がる対価と将来について〜 | カッシーのWEBる。

2011/10/15 37 users カッシー 対価 Flash ディレクター フリーランス

その仕事、10年後もやってますか？〜下がる対価と将来について〜こんにちはカッシーです。 ちょっと考え深いテーマをたまには書いてみます。 よく「その仕事10年後もやってるの？」なんてフレーズを聞くことがあります。 WEBデザインやHTMLコーディングをずっとやるのはちょっと・・・と言って おいおいはディレクターとか上流工程になりたいとか言うてる人も居ますよね。 以前フリーランスの時はFlashなら僕... 続きを読む

高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2010/12/01 885 users XHTML クロノドライブ CSSコーディング最安保障

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス... 続きを読む

たった一行でclearfixを使わずにfloatを解除するテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2010/11/30 174 users clearfix XHTML float overflow

.sampleBox { overflow: hidden ; } .boxLeft { float: left; width: 150px; } .boxRight { float: right; width: 150px; } サンプルページ ポイントとしては、floatする要素をdivで囲み、そのdivにoverflow: hiddenを適用させることです。たったこれだけで、floatによる... 続きを読む

ウェブを作るにあたって気をつけていること « vanillate

2009/10/12 373 users vanillate ブラウザチェック デザインカンプ 順番

ウェブ（一般的にはホームページ？）のデザインをするときに、私は自分の中で一定のルールを持って設計するようにしています。そのほうが効率が良いし、デザインカンプ→コーディングの際にスムーズに移行できるからです。 ウェブ制作の流れとしては、photoshop(or fireworks)でデザインカンプを作る→画像のパーツ化→HTMLコーディング→ブラウザチェックの順番で行っています。本でもよく紹介されて... 続きを読む

Webクリエーター用カリキュラム　ＨＴＭＬコーディング

2005/11/01 18 users

続きを読む