HTMLとCSSの最近の実装テクニックを学べる解説書、実務で通用するスキルを身につけたい人にお勧め -HTML/CSSスキルアップレッスン
HTMLとCSSは基本的には分かるけど、実装で悩むことがある、自分のやり方が正しいか不安に感じる、応用力が足りてない気がする、初心者を卒業してプロとして大きな一歩を踏み込もうとしている人にお勧めの解説書を紹介します。 デザインカンプを理解した上での画像書き出し、情報を伝えるためのマークアップ、柔軟性と汎用性に配慮した実装、要件に適したレイアウト、ユーザビリティに配慮した実装、計画的なレスポンシブ対応、メンテナンス性に優れたコードなど、実務レベルのテクニックを学べます。 本書はHTMLとCSSの解説書ですが、入門書ではありません。それぞれの基礎は理解している人が対象となっています。デザインカンプからWebページを実装する上で必要な知識とテクニックが詳しくていねいに解説されています。 すでに長年従事している人にも、最近はこんなやり方もあるのかと発見があると思います。
アコーディオンをCSSアニメーションとHTMLで実装する | Pulp Note
よくある質問でよく利用するアコーディオン機能をCSSアニメーションとHTMLで実装する方法です。JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。
サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック
サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。 HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます。 Tree view from unordered list まずは、実際のデモをご覧ください。 See the Pen Tree view from unordered list by Ross Angus (@ross-angus) on CodePen. 1つ目の「DOM構造」と2つ目の「サイトマップ」の実装は、基本的には同じです。順番に見てましょう。 DOM構造のツリービュー HTML 1つのul要素で3階層分まで、4階層目からは新たにul要素が必要となります。矩形は「DOM構造」では<code>、「サイトマップ」で
IE11のサポートを切ると使えるようになるCSSとか一覧 - Qiita
Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。 IEをサポートしないことにより、使えるようになるHTMLとCSSをまとめました。 JavaScriptはきりがないので調べてません。 Can I Useをもとにまとめています。 分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。 『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。 この記事は2020年3月に作成したのものです。 HTML rel=“noopener" リンク元の文書へアクセスできないようにすることをブラウザーに指示します。 これを指定しないと、target=”_blank”利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。
HTMLコーディングの人気のスタイルは？ アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第3回目となる本記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのレイアウトに使うのはFlexboxが多い ウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。 Flexboxが最多となったのは、未対応ブラウザ（例：IE9）が無視できるシェアまで下がったことや、floatよりFlexboxのほうが
意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
【主要タグ一覧＆解説】5分でわかるHTML・CSS入門 -
こんにちは、吉岡(@yoshiokatsuneo)です。 あらゆる情報が集まるインターネットですが、パソコンや携帯電話のWebブラウザで表示される情報は、全てHTML・CSSで書かれています。逆に言えば、HTML・CSSを使えば、好きなデザインのWebページが作り放題ということです。 HTML・CSSは多くのブログサイトでも使うことができますので、記事にHTML・CSSを少し追加すれば、より表現豊かにわかりやすい記事が書けるようになります。 さらにJavaScript・PHP・Ruby on Rails・Javaなどを学べば、本格的なWebサービスを作ることもできますし、スマートフォンなどで動くモバイルアプリケーションでも、HTML・CSSを使っていることが多いです。 ここでは、HTML・CSSの基本を5分でわかるように簡単にまとめてみます。 【目次】 HTML・CSSファイルの作り方 エ
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
Web制作者が絶対読みたいHTML & CSSの最新記事ベスト10
HTMLやCSSも進化しています。Webデザイナーやコーダーなど、Web制作者が押さえておきたい最新のHTML/CSS関連記事をKADOKAWAが運営するオンラインメディア「WPJからアクセス人気順に紹介します。 『もう迷わない！HTML5のもっとも基本的なテンプレートはこれだ！（2016年版）』（WPJ） HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 2.知らないと損しているCSS関数の世界 『便利すぎてしびれた！あなたが知らないCSS関数トリック8選』（WPJ） どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか？ 3.Cutestrap
The future of loading CSS
Posted 11 February 2016 - totally overshadowed by some waving gravity thing. Thanks Einstein. Chrome is intending to change the behaviour of <link rel="stylesheet">, which will be noticeable when it appears within <body>. The impact and benefits of this aren't clear from the blink-dev post, so I wanted to go into detail here. Update: This is now in Chrome Canary. The current state of loading CSS <
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
HTML/CSSを素早く記述する「Emmet」の連載をはじめてました
HTML/CSSを素早く記述する「Emmet」の連載をはじめてました 2015-07-22 Emmetとは、主にHTMLやCSSの記述・編集を強力にサポートするプラグインです。様々なIDEやエディタに対応しています。 アドビ公式ブログの「Adobe Creative Station」でEmmetの連載をはじめてました。 全6回中4回まで掲載されたので、補足を含めて紹介します。 Emmetの連載 アドビ製品の機能などを紹介する「Adobe Pinch in」というサイトで連載のはじめましたが、現在は「Adobe Creative Station」に移行して、連載を行っています。 連載内容は以下のとおりです。 第1回 Emmetを薦める理由 第2回 Emmetの省略記法を使って、HTMLを素早く入力する 第3回 エディタのコードヒントよりも早い！EmmetのCSSの記法とは？ 第4回 Emme
symdiff
symdiff Ever wondered if some of your classes can be removed without breaking things? symdiff gives you the answer: It returns the symmetric difference (hence the name) of classes used in your styles and templates. This means a class must be in both of them or it will break your build (if you want to). Example This CSS:
初心者Webコーダーが覚えると便利なオススメツール・テクニック | マイナビクリエイター
マイナビクリエイター公式ブログ「マイナビクリエイター編集部」を御覧の皆様ご機嫌麗しゅう。OZPAの表4の@OZPA です。 今回のコラムは、「初心者Webコーダーが覚えると便利なオススメツール・テクニック」をお送りいたします。ﾝｶﾞｸﾞｸﾞ エディタに関して ズバリ！好きなエディタを使いましょう。 …ってこれで終わると編集部さんからぶん殴られそうなので追記しますが、エディタに関しては各人によって求めるものが違うので、私にとって使い勝手の良い物があなたにとってのベストプラクティスとならない場合もあるのです。 その業はきのこたけのこ戦争より根深いと思います。 SublimeText それを承知であえてオススメするのであればやはり、Sublime Textでしょうか。 優雅なデザイン、豊富なプラグイン、軽快な動作、増やせるキャレット…。 リリース以来、数多くのコーダー・エンジニア・デベロッパーの
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
自分のHTMLやCSSのコーディング環境がベストか見直してみよう！作業を効率化する技術やツールの導入・使い方がよく分かるオススメの本
SassやLESSなどのCSSプリプロセッサ、OOCSSやBEMを使ったCSSの設計、Gitでのバージョン管理、gulpを使ったタスクランナー、Bootstrapなどのフレームワークの導入など、ここ数年でコーディング業界にさまざまな新しい技術やツールが登場しました。 なんだか便利そうなのは分かるけど、どこから手をつければよいのか分からない。似たようなものがあるけど、どれが自分にあっているのか？ コーディング業界で現在主流となっているテクニックや考え方の基本から導入・使い方などを実際に仕事で使うシーンを想定した形で紹介しているオススメの本を紹介します。 それら技術やツール、そして考え方がWeb制作のどの工程に関わり、どう効率化されるのか、導入の手順はどんな感じなのかがよく分かります。 また、HTML5の新しい要素、CSSのセレクタ・アニメーション、SVGの使い方など、コーディングする上でこれ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
W3C仕様日本語訳置き場Wiki
昔懐かしいインターネットの風物詩を最近の技術で作る話 - Speaker Deck
ituore.com
https://www.ituore.com/entry/html-css-basic
