2017年11月17日の「まぼろしのマークアップ勉強会 #1」でお話したスライドです #mbrs_markup_study
div要素の正しい使い方
2017年11月17日の「まぼろしのマークアップ勉強会 #1」でお話したスライドです #mbrs_markup_study
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
The State of Web Components
2017年9月24日に開催された HTML5 Conference 2017 の「The State of Web Components」のセッション資料です。
HTMLとCSSの極上テクニック！ヤフーの現役フロントエンドエンジニア陣が本気で解き明かすオススメの本
本書にはHTML、特にCSSに携わる人が学ぶべきものがたくさんあります。 最前線の現場でHTMLとCSSがどう書かれているのか、Sassは制作で実際にどのように取り入れているのか、Gulpの使い方やBEMをベースにした命名規則の策定など、CSSの設計や管理の仕方、考え方のプロセスや効率的に書く方法などが詳しく解説されています。 今の自分に、5年後の自分ために、絶対熟読しておきたいオススメの本を紹介します。 本書はヤフー株式会社の現役のフロントエンドエンジニア陣が惜しげもなく、実際に業務で使用されているHTML/CSSの記述ルールやテクニックをベースに、より多くの制作現場で利用できるよう解説されたものです。 大規模サイトはもちろん、小規模サイトやランディングページなど、一つのプロジェクトを制作する上でSassをつかった実践的なCSS設計について学ぶことができます。
AMP編！WEBデザイナーが覚えて損無しのHTML コーディング！ | WEB CREATION NUMB
こんにちは！太偲@WEB屋です。今日は、WEBデザイナーが覚えて損無しのHTMLコーディング「AMP – Accelerated Mobile Pages」についてお送りします！AMPに関しては、SEO対策の為だけの話には留まりませんので、その辺りも含めてAMPの基本をまとめました。 WEBデザイナー、フロントエンドエンジニア、プログラマーの方々。 最近SEOやWEBマーケ担当者から、モバイルページの表示速度高速化の一環として「スマホサイトのAMP対応」について相談をされた事はありませんか？ 今回の記事では、AMPに関する基本の知識（対応コンテンツ・構造化マークアップ・HTML対応一覧・CSS）から現時点での情報まとめやAMP化（モバイル高速化）はするべきなのか？という点と、その他SEOだけではない、スマホサイト制作時の今後の方向性まで、一通りまとめてお話をしたいと思います。 AMP（アン
私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD
<script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚
W3Schools Online Web Tutorials
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較 - ICS MEDIA
ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか？ 従来知られているfloatプロパティを使った方法の他に、CSS3から「Flexbox」を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか？ 本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。 Flexboxとは？ Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今やすべてのモダンブラウザーで使用することができ（※1）、Bootstrap 4の新たなレイアウト方法として採用される（※2）等、次世代の標準となっていくであろう技術です。 ※1
HTML の 〜 内に書くタグの順番にも気を遣ってみた。
投稿日：2016年1月20日 更新日：2016年1月20日 HTML, SEO 7890文字：約14分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/4831 今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日（2016年1月20日）現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載さ
【gulp】「gulp-htmlhint」でHTMLの文法をチェックする方法をメモメモ | バシャログ。
みなさま、こんにちは。hulu で「めぞん一刻」を見て、最終回でボロ泣きした kouraku です。記憶に残る思い出深い作品だったということと、大人になり結婚した今だからこそ分かる想いなんかが色々と重なって（単純に涙もろくなってきた、というのもありますが（苦笑））、最後の最後でどっと感情が溢れ出てしまった、といった感じでしょうか。いや～、名作はいつ見ても感動を与えてくれるものですよね。 さて今回は、前回までにご紹介したHTMLテンプレート「gulp-html-extend」で出力したコードに誤りがないか、例えば閉じタグが無い・・・とか、imgタグにalt属性が無い・・・とか、そんなものをチェックサイトにコピペして確認とか面倒なので、gulpにある程度任せてみたいと思います。そこで、白羽の矢が立ったのが「gulp-htmlhint」ですね。では、このプラグインの使い方についてメモメモ。 ※前
[CSS]紙がふわりとする繊細なエフェクトをシンプルなHTMLで実装するテクニック
divで実装したパネルに紙がふわりとするようなエフェクトを与えるスタイルシートのテクニックを紹介します。 デモではパネル底の左右がふわりとなります。 Pure CSS Paper Lift Effect 実装は非常にシンプルです。 HTML HTMLは、div一つだけです。 <div class="box"></div> CSS スタイルシートはベンダプレフィックスも含めてあるのでちょっと長いですが、コピペで利用できます。 body { margin: 0; padding: 0; background: #efefef; } .box { position: relative; margin: 40px auto; width: 400px; height: 350px; background: #fff; border-radius: 2px; } .box::before, .box
![[CSS]紙がふわりとする繊細なエフェクトをシンプルなHTMLで実装するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bcb821b40e6224665d6d8c37a61bec6e8d65084e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102305.gif)
Excel to HTMLが便利過ぎた！ブログで表（テーブル）を挿入するのなら一番簡単かも - 鈴木です。別館
本記事は移転しました。 約1秒後にリダイレクトします。 リダイレクトしない場合はここをクリックしてください。
#ガチJS でJavaScriptとフロントエンドの未来について熱い話をした - mizchi's blog
(追記): このブログで一部のJSをgithubに置いてたら 「The website abuses rawgit.com」という警告が出てました。現在修正しました。ご迷惑おかけしました。 @kyo_agoさんの主催で、 @mizchi(シングルページ系フロントエンドJSer) と @damele0nさん(ゲーム系HTML5のJSer)でJavaScriptについて話をした。すごく有意義な話だったので、会話を思い出せる限り書いてみる。 このエントリを読む前にこの記事を読むと幸せになれる。 幸せになりたいソーシャルゲーム系Webフロントエンドエンジニアが本気で考える HTML GUI ツール第一回 - damelog このまとめは僕の主観であり、僕が理解できた部分と自分の発言を一番覚えてるのでどうしてもそれが多めになりますが、ご容赦ください。ついでに酒入ってる。 iOS SafariのIE化
Web サイトのメンテナンス中画面の出し方 - dogmap.jp
しょっちゅう必要になるので、メモ書き程度に 参考にしたのは、以下の URL です。 Apache Webサイトのメンテナンス中画面を出す正しい作法と.htaccessの書き方 | Web担当者Forum Nginx nginx: Create HTTP 503 Maintenance Custom Page nginxで特定ホスト以外からのアクセスをメンテナンス画面にする方法 (2) – (ひ)メモ Nginxでrestart, reloadをすることなくメンテナンス画面に切り替える – Qiita 前提としてメンテナンス中画面として表示する際に使用する html は以下のファイルを使うものとします。 maintenance.html style.css /img/corp_logo.png また、以下の IP アドレスからのアクセスは管理者からなのでメンテナンス中画面を表示しないものとし
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
良いデザイナーはどこにいるか
早いもので３月半ば、暖かくてナイスな週末でしたが、 今年も確定申告滑り込み、データ入力に忙しい大堀です。 去年会社にしたものの、2013年の半分は個人事業主だったので 封筒にためておいたレシートを打ち込んでいるのですが、 どうしてコンビニで買ったパンツのレシートを保存したのか、 昔の自分をちょっと問いつめたい日曜日です。 経費になるとでも思ったんでしょうか。 さて、今回タイトルにもしましたが、 最近お会いする方々によく言われるんです、 「良いデザイナーがいない、見つからない」と。 一概に”デザイナー”と言っても、分野によって求められるデザイナー像は違いますが、 今回はWebサービスをデザインする”デザイナー”について、スキルと立場の観点から考えてみました。 まず、デザイナーに必要とされる能力について書き出してみます。 a.デザイン思考力 b.プログラミング力（HTML,CSS,JS,php
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
スマートフォンに最適化したレイアウトを実現できる フリーレスポンシブHTMLテンプレート「30 Free Responsive HTML Templates」
TOP > Design > スマートフォンに最適化したレイアウトを実現できる フリーレスポンシブHTMLテンプレート「30 Free Responsive HTML Templates」 スマートフォンが携帯電話の主流となったことで、webサイトはパソコンで見る際の状態ではなく、スマートフォン用のレイアウトで制作することが当たり前となってきています。しかし、同時に両方を構築するのに時間や予算がかけられない時もあるのではないでしょうか？そんな時に便利なフリーレスポンシブHTMLテンプレート「30 Free Responsive HTML Templates」を今回は紹介したいと思います。 （Big Picture | HTML5 UP） スマートフォンに最適化したレイアウトを実現できるHTMLテンプレートがまとめられています。 詳しくは以下 Type & Grids — Flat-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3media.biz
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
