おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
CSSでiOS風のチェックボタンをつくるチュートリアル。（CSS おれおれ Advent Calendar 2012 – 21日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 21日目 セフセフ。 iOSの選択ボタン。HTMLでいうチェックボタン的なもの。”Switch Control”というらしいです。 Switch Control風チェックボックス HTML こんな感じです。 <p> <label class="switch"> <input type="checkbox" /> <span class="label"> <span class="on">ON</span ><span class="separator"></span ><span class="off">OFF</span> </span> </label> </p>
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約47%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート
HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
プログラミングの勉強に役立つ優良ブログ8選
プログラミング初心者が最初につまずき易いポイントに「解決できない」「分からない」ということがあります。 そんな時は疲れもドッとでますし、モチベーションもダウンしてしまいます。 今回ご紹介するブログは、そんなつまずきからあなたを救ってくれると思います。 同じように苦労してウェブやアプリ開発している方もいらっしゃいますので、他の人のやり方を少しのぞいて参考にしてみてください！ "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは？（受講生体験記） 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の記録 初心者・非エンジニアが参考にし
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら？ という内容です。
normalize.cssで使用されている各スタイルがどのように機能しているか解説
先日紹介した「sanitize.css（紹介記事）」や「Marx（紹介記事）」などリセット用CSSの新しいアプローチが増える中、ブラウザごとの要素の相違を吸収するのに人気なのはまだまだ「normalize.css」でしょう。 そのnormalize.cssも細かい改良が重ねられ、最新のバージョンは3.0.3になっています。 normalize.cssで使用されている各スタイルが、どのように機能しているか確認してみましょう。 normalize.css normalize.css -GitHub ※3.0.3はGitHubからダウンロードできます。 normalize.cssの特徴 html, body, :rootなどの全体系の定義 HTML5の新要素用の定義 リンク系の定義 テキスト系の定義 埋め込みコンテンツ系の定義 グルーピングコンテンツ系の定義 フォーム系の定義 テーブル系の定義
[HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者
web制作者は一人で制作するのではなく複数人で制作したリ、作ったものを他の人に渡したりします。その場合、コードは同じルールに基づいている方が引き継ぎ易いですよね。 一部の人間、または企業内のみで通っているルールは方言の様なもので、他では通用しません。 こうした、別の場所で制作している人間の間で通じる可能性のあるスタンダードな概念として、セマンティックwebという考え方が存在している(全ての制作者が行きつくべき概念としての存在意義もある、という意味です。その為にあるという話ではないです。コーディングルールもこの考え方を踏まえた上で作るべきで、地域やコミュニティの違う集団の中でも、皆がセマンティックというものを意識として持っていれば、マークアップも似通っていく、共通化されていくはずだと考えています)のです。現状、たくさんの制作者がこれ以外のルールに基づいて制作を行うという事はまあ、あり得ないで
![[HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者](https://cdn-ak-scissors.b.st-hatena.com/image/square/8b6c55139e81b201569782d7f4f2ec31ff4b2b3e/backend=imagemagick;height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F03%2Fsemantic-html-reason-01-150x150.png)
STINGER5で見るHTML5から新たに追加された要素
WordPressの人気テーマSTINGERシリーズもヴァージョン5となりHTML5へと変わりました。HTML5からは新たに加わった要素がいくつかあり、ざっくりとしか理解していない方もいると思います。（わたし、わたし！）おさらいの意味も兼ねてHTML5から加わった新要素をSTINGER5に照らし合わせて説明していきたいと思います。 こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。 STINGER3とSTINGER5のページを構成する要素の違い HTML要素とはHTMLでマークアップした文書を構成するもので、titleタグやhead、strongやmetaタグなんかもそれに該当します。 STINGER3の場合 STINGER3ではページレイアウトを構成するすべての要素＜
HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO
そんな訳で、現状イマイチ扱いに困るCSS3アニメーションについて学習した内容をまとめておくとします。 はじめに - CSS3のアニメーション機能 ひと口にCSS3アニメーションと言っても、その実装方法は以下の二種類に大きく分類されます。 Transition Animation Transitionは対象となる要素の始点と終点の状態をそれぞれ定義し、その二点間をスムーズに変化させることでアニメーションを実現させるという仕組みです。 対するAnimationは始点と終点だけでなく、二点間の任意のタイミングにキーフレームを配置してその時点ごとの状態をそれぞれ指定し、よりダイナミックなアニメーションを実現させることが出来る仕組みです。 両者似ているようで異なる機能ですが、この仕組みを混同せずにキチンと押さえておけば、これといって泥沼にハマることなく習得することが出来ます（たぶん）。 今回はTra
Webエンジニアが、量産品のハードウェアを作るようになるまで─Cerevoの中の人に聞いてみた！
Webエンジニアが、量産品のハードウェアを作るようになるまで─Cerevoの中の人に聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） Arduinoなどのマイコンのおかげで、ハードウェア開発、特にプロトタイプづくりに関するハードルはだいぶ下がりました。自分（白石）のような人間でも、LEDをチカチカさせるくらいのことはやってみたことがあり、「こんなに簡単にハードを制御できるなんて！」と感動したのを覚えています。ただ、プロトタイプを一度作ってみると、更なる大きな疑問がわいてきます…身の回りにあるハードと、自分の作ったプロトタイプの落差に驚愕するのです。 自作したプロトタイプを、カッコいい量産ハードウェアに持っていくためには、どんな作業が必要なの？ 今回はそんな素朴な疑問に答えてもらうべく、Cerevoさんにお邪魔してプロダクトマネージャーの國舛さんにお話を聞いてきました。 C
レスポンシブイメージのネイティブサポート - HTML5 Rocks
<picture> <img src="image.jpg" alt="A description of the image."> </picture> If there is no img element nested inside the picture element, the picture element won't work. Like the srcset attribute, the picture element will update the value of the src attribute in that img element. The difference is that where the srcset attribute gives suggestions to the browser, the picture element gives commands
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のDMMのフロントエンドの動向とその先について (2019/05/08 19:30〜)
Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ
HTML5/CSS3のニュースやTIPSなどのまとめ (2015年5月30日)
re-dzine.net situs togel online toto 2023 -
Google HTML/CSS Style Guide まとめ - Qiita
HTML5, きちんと。
20140902 HTML5プロフェッショナル認定試験対策講座
