HTML

Web制作テクニック

レスポンシブデザインでもPC表示には最小幅(min-width)を指定すべき4つの理由

今やレスポンシブサイトをは対応して当たり前になりましたが、細かい構築方法はサイトによってまちまちです。 その中で今回は「PC表示の時、最小幅(min-width)を指定すべきか?」という事について取り上げようと思います。 最小幅の指定は大規...
Web制作テクニック

シンプルで分かりやすいコードに!CSSのベンダープレフィックスが不要になった理由

CSS3が活用され始めてからだいぶ経ちましたが、今もなお古いブラウザに対応すべく、ベンダープレフィックスを使った回りくどいソースコードを書いている方は多いかと思います。 私もつい先日まではそうだったんですが、回りくどいコードを書くのが億劫で...
Web制作テクニック

昔とは違う!今時のHTML・CSS設計方法2016

テーブルレイアウトの時代が終わり、正確なマークアップが求められるようになったのは2005年ぐらいからでしょうか? そこから10年以上が経過したということでマークアップのルール・設計方法も大きく変わりました。今と昔どのくらい変わったのかをまと...
Web制作テクニック

初心者HTMLコーダー、プログラマーの時短術。バグに悩んだら単純化して考えよう

Webコンテンツが広く浸透したことで、HTMLコーディングやJavaScriptやPHPなどのプログラミングのハードルがぐっと下がり、独学で学ぶ人が以前よりも増えたように感じます。 独学でもプロとして通用するレベルにまで成長することは可能で...
SEO(検索エンジン最適化)

なぜ『長い』という理由でページを分割してはいけないのか?

Webページ・サイトまたはブログなどを制作していると「だいぶページが長くなってしまったけど分割するべきかしないべきか・・・」という問題が出てくるかと思います。 結論から言ってしまうと『長さ』でページを分割するべきではありません。何故なら、ペ...
Web制作テクニック

問い合わせフォームのセキュリティ対策は不要か?実はSSL対応はほとんど意味が無い件

情報漏えいを防ぐ為にセキュリティ対策は大切です。お問い合わせフォームにもSSL(TLS)対応しているケースが一般的ですが実は意味がないかもしれないことをご存知ですか?
Web制作テクニック

W3C HTMLバリデータによる構文チェックは必要性はほぼ無いことが分かった

HTMLコーダー、マークアップエンジニアおよびWebデザイナーの方々は一度は「W3C HTML Validator」を使用し、HTMLの構文・文法に誤りが無いかチェックをしたことがあるはずです。 しかし、この構文チェックにこだわり過ぎるのは...
Web制作テクニック

【おすすめ】JavaScript・HTML5などがマンツーマンで学べるオンラインプログラミングスクールCodeCampの特徴・利点

PC(パソコン)やスマートフォンを使っていて「便利だけどちょっと使いにくいな・・・」と思ったことはありませんか?実はそれ、プログラミングを学習すれば解決できます。 「プログラミングなんて一般人に無理でしょ?」と思うかもしれません。しかし、意...
Web制作テクニック

HTMLにGoogleマップを埋め込む際、正常に表示されない不具合の対処法

仕事でコーポレートサイトなどを作成していると企業情報ページにGoogleマップを埋め込む機会が多いかと思います。 HTMLとCSSだけで制作したサイトであればまず無いのですが、JS(JavaScript)を駆使したサイトを制作しているとGo...
Web制作テクニック

HTMLのid属性とclass属性の正しい使用方法を教えます

HTMLの基本的文法に慣れてくると今度はCSSを活用し、デザインに凝りたくなるものです。 そこで登場するのがHTMLのid属性とclass属性です。これらの属性を指定することでHTMLとCSSを関連付けることができるのはご存知ですよね。知ら...
Web制作テクニック

【サンプル付】外部化したヘッダー・グロナビの現在位置をアクティブにするテクニック【自動化】

以前投稿したヘッダーなどを外部化するテクニックの記事が大変好評のようでご利用いただいた皆様ありがとうございました。今回はその続編記事になります。事前知識として前回の記事をご覧いただくことをお薦めします。 実はヘッダーなどの共通パーツを外部化...
Web制作テクニック

初心者必見!必要なタグはたったこれだけ!HTML超入門!

「誰もが最初は初心者だった」ということで多少はニーズがあるかと思い今回はHTMLネタです。これからHTMLの勉強を始めたい人向けの内容となっております。このブログをはじめた当初にHTML関係の記事を投稿していたので(連載するつもりが1回で終...
Web制作テクニック

レスポンシブWebデザインを実装してみて分かった11+αのポイント

長年コーディングをやっていますが、今更ですが先日はじめて仕事でレスポンシブWebデザインに対応したサイトを作ることになり、やっとひと段落したところなのでレスポンシブWebデザインのメリット・デメリット、構築する上で気を付けたほうが良いところ...
Web制作テクニック

JavaScriptを必ずCSSの後に読み込ませるべき理由とは?

プログラムが得意でない方でもライブラリを通じてJavaScriptを利用しているかと思います。 そのスクリプトを読み込む際にscript要素を使いますが、見落としがちな罠が潜んでいます。まずはその問題のソースコードをご覧ください。 問題のソ...
Web制作テクニック

CSSハックや条件分岐コメントを一切使わずスマートにIE対策を行う唯一の方法

WebサイトのHTML・CSSコーディングをしていると必ずといっていいほど問題が発生するIEですが、皆さんはどう対処していますか? 一般的にはスタイルシートにCSSハックを記述する方法、またはHTMLの条件分岐コメントでIE用のスタイルシー...
Web制作テクニック

BrowserStackというサービスが便利で凄い!という記事を書いた結果www

Webデザインをするにあたり各環境でのブラウザの動作検証は欠かせないものです。しかし、様々な環境で動作検証をするためには複数台のPCやOSが必要になるためそれなりの費用がかかります。 AdobeがBrowserLabというブラウザ動作検証サ...
Web制作テクニック

【サンプル有】HTML共通部分をJSインクルードするメリット・デメリットを説明

あなたはサイトを運営していて、「ヘッダー、グローバルナビゲーション(グロナビ)などの共通パーツの更新が面倒臭い!」と思った事はありませんか? Wordpressとったブログ・CMSであれば、ヘッダーやフッターといった共通パーツはあらかじめ別...
Web制作テクニック

意外と知らないJavaScriptの常識【JavaScript入門】

近年、jQueryのようなフレームワーク・ライブラリの登場で気軽に扱えるようになったJavaScriptですが、意外と基礎的な部分を知らないって人も多いかと思うので取り上げてみました。 JavaScriptはHTMLに組み込まれて実行される...
Web制作テクニック

HTMLコーダー(マークアップエンジニア)になる為に必要なスキルとは

WEBサイトの制作には様々なメンバーが関わっていますが、その中にHTMLコーダー(コーダー)という職種があります。いわば私の職業ですね。 類似する職種としてマークアップエンジニア、フロントエンドエンジニアがありますが、小規模の企業では同義と...