若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
HTML5/CSS3 モダンコーディング を執筆しました - エンジニアをリングする
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books) 作者: 吉田真麻出版社/メーカー: 翔泳社発売日: 2015/11/03メディア: 大型本この商品を含むブログを見る どんな本なの？ HTMLとCSSの初心者〜中級者向けの本です。HTML・CSSの基本的な文法と一般的なタグ・プロパティ（a要素とかmarginプロパティとか）を多少知っている方であれば読めます。 イメージ的には、超初心者本の次に読むような感じ。既にHTML/CSSの最低限の知識はあって既存コードの修正やコピペはできる、けどまだいちから何か作るようなコーディングは難しい・・・というようなレベル感の方が、いちからサイトを作る経験をしながらもっと知識や理解を深めていく、というような内容
こんなHTMLとCSSのコーディング規約で書きたい - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML と CSS のコーディングルールを作ろう HTML と CSS のコーディング規約を中心に、メンテナンス性の良い HTML や CSS をコーディングする際に重要だと思うポイントをまとめています。 誰に向けた記事か この記事には、HTML や CSS を書く人に役立ちそうな内容が書いてあります。 特に初級者から中級者の方で、HTML や CSS を一通り学習した方からの反応が良いです。 まだ HTML や CSS の学習を始めて間もないという方は、先に案件やプロジェクトをこなしコーディング経験を積むことをお勧めします。経験を積
maxlengthを使ってはいけない。特にパスワード入力欄で使っちゃ駄目！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 今日自分が体験したトラブル事例に、ユーザビリティ向上のための気づきがあったのでメモしておきます。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 事例：登録時のパスワードでログイン出来ない！？ 今日、とあるWEBサイトでユーザ登録を行った際に、登録時に入力したパスワードでログイン出来ないと
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
HTMLとCSSがよくわからないあなたへ。歴史を学んで少しだけ理解を深めてみませんか？ - Love2Labo
どうも、あめたま（@ametama_l2l）です。 一昔前はホームページが作れるっていうと、結構重宝されるというか、すごいねーなんて言われていました。というか学校の授業で初心者向けに麻雀の解説サイトを作った20年前が懐かしいです。 話はちょっとそれますが、ホームページっていつのまにかWebサイトって呼ばれるようになってましたよね。私もなんとなくかっこいいのでWebサイトって呼ぶようになりました。 今はブログが主流ですね。無料ブログとか誰でも簡単に作れるし。なんならHTMLタグなんて意味を知らなくたって登録すればその瞬間からブログ運営ができちゃいます。 さて、今回はそんな時代にHTMLとかCSSの意味をちゃんと理解して書こうぜ！っていう自分が出来てもいないことを偉そうに書いていきます。 最後まで読み進めても細かいテクニックは書いてないので、意味がわからなくなったら、遠慮なく離脱してくださいﾍ
「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめ フラップイズム
※2014年2月26日に更新しました。要素及び属性をなるべく新しい仕様書に準拠、その他頂いたコメントへの対応を行いました。 ※2014年3月3日更新しました。タグと要素の違いについて追記。本文内でタグと要素の記述が間違っていた部分を修正。「要素が要素をまたがってはいけない」というのはどの形式でも同じなので、記述を削除。 どうも、くーへいです。 今日はある方からリクエストされた記事を書こうかと思います。 皆さんは、コーディングをするときに「HTML 4.01」、「XHTML 1.0」、「HTML5」のどれを使っていますか？ 実際には案件ごとに使い分けているかもしれませんね。 この投稿では、それぞれの違いについて、考えていきたいと思います。 ※要素とタグを混同する方も多いですが、要素とタグでは意味が全く異なります。 例えば、「<html>・・・</html>」は要素ですが、「<html>」や「
制作技術は見て盗め？オンラインで作業中の様子を公開している動画サイト
2015年8月10日 Webサイト制作, 便利ツール 以前、すでにWeb制作者として就職している方から「まわりの同僚のように早く作業ができない」「作業の効率のいい進め方がわからない」という悩みを受けたことがあります。作業の効率化について紹介しているWebサイトや書籍も多く見つけられるかと思いますが、実際に手を動かしているところを見るのもひとつの方法です。他の人がどう作業を進めているか、見てみましょう！ ↑私が10年以上利用している会計ソフト！ 人がコーディングしているところを盗み見 「盗み見」なんてあまりいい響きではありませんが、賛否はどうあれ「技術は見て盗め！」という昔からの教育方針も存在します。会社の先輩、学校やコワーキングスペースの凄そうなオーラを醸し出している人の作業を見てみるといいかも。もちろん、絶対に作業の邪魔はしないようにしましょう！ 「技術を見て盗む」メリット 作業の新しい
速習テンプレートSlim(HTML作成編) - Qiita
テンプレートエンジンSlimを使ってスマートにHTMLを作成する 昨日うちの事務所で開催したagatsuma.survive#02の中でSlimの説明が思ったよりも好評だったので改めてまとめてみます。 このエントリでは Slimを使ってHTMLを作成する ことだけを目的としているため、動的にSlimでゴニョゴニョするような話は出て来ません。HTMLの代替にSlimを使う、といった主旨の内容です。プログラムの話も出て来ませんが、残念ながらコマンドラインを少し使います。 Slim とは? 拡張子は .slim view の構文を本質的な部品まで減らすことを目指したテンプレート言語 Ruby製のテンプレートエンジン 高速, 軽量 インデント重要 用途 Railsプロジェクトのテンプレート Sinatra(Padorino)のテンプレート HTMLの代替(個人的には) SlimでHTMLを作成する
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
超絶初心者のためのフロント入門（HTML、CSS、JavaScript） - Qiita
1. はじめに 1-1. 技術の概要 エンジニアの技術は、かなりざっくり言うと、 フロントエンド → 見える部分。 （例）HTML、CSS、JavaScriptなど サーバサイド → アプリケーションを動かす中身の部分。 （例）Java、PHP、Ruby、C、C++、Perlなど インフラ → Webアプリケーションを動かすための環境構築など。 （例）Webサーバ構築、DBサーバ構築、DNSサーバ構築など の3つに類別できる。 その中で、プログラミング未経験者が最も手をつけやすいのが、フロント（HTML、CSS、JavaScript）の技術である。 ※ 上記は、「Webアプリケーション開発」のお話です。 ※ 「ネイティブ開発」ではObjective-C/Swift/AndroidJava/Cocos2d-x/Unityなどがよく使われる。 1-2. フロントの概要 フロントの技術を学ぶため
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodePen - Front End Developer Playground & Code Editor in the Browser
Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ