[B! CSS][html5] luccafortのブックマーク

luccafort id:luccafort

CSSとhtml5に関するluccafortのブックマーク (16)

意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNGたとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。︵つまり%などの単位を含めることがで
luccafort 2017/09/29
"strong要素はそのコンテンツに対する強力な重要性、深刻性、または緊急性を表す"なるほどストロングgfx問題のことか。

html

CSS

HTML5

コーディング

web
リンク
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows7のIE 11以降となります︵※︶。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事﹁Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft﹂ 1. meta keywords設定は検索順位に関係がないウェブコンテンツのキーワードを指定するmeta keyw
luccafort 2016/12/19
Autoprefixer便利そう。ただ気になるのはベンダープレフィックスが最近のブラウザシェアでは不要って話だけどこれモバイルも含んだ上での話しなんだろうか？

コーディング

html

CSS

html5

CSS3
リンク
「HTML5/CSS3モダンコーディング」読んだ - $shibayu36->blog;
HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方作者:吉田真麻翔泳社Amazon 最近自分のプロジェクトのデザイナが、JavaScriptで実装しないといけないと思っていたことをどんどんCSSで実装していくのを見かけた。この出来事から、JSで実装したほうが良いか、デザイナにやってもらったほうが良いか、どちらが良いかを自分で判断できてないと感じたので、最近のCSS事情を知りたいと思って読んだ。サラッと流し読みするだけで、CSS3で利用できるようになったよく使うプロパティの概要を把握できたので、今の自分の知りたいことが分かって非常に良かった。例えば以下のことを学ぶことが出来た。 reset.css, normalize.cssとはなにか beforeやafter擬似要素を使ったいろんな技
luccafort 2016/07/25
「JSで実装したほうが良いか、デザイナにやってもらったほうが良いか、どちらが良いかを自分で判断できてない」めっちゃわかる…がだいたいJSで頑張ったほうが機種依存でしななくて済むというのが個人的結論。

CSS

CSS3

HTML5

コーディング

モダン

フロントエンド

レイアウト

グリッド
リンク
cow2design.com
This domain may be for sale!
luccafort 2015/04/22
いや確かに発想はすごいんだけどもなんというかアレだ、これ実務とかでやってはいけない系のやつや。

CSS

html5

ネタ
リンク
最近のJavaScriptフレームワークの評価とか - albatrosary's blog
最近JavaScriptフレームワークについて色々指標のようなものを提示するブログが流行っているようだ。適材適所のもと、これは大規模向きとか小規模向きとか早いだの遅いだの。加え﹁gitなんか覚えなくたって死なない﹂とか、UXうえい！みたいな話だと思いきや内容がUIに限ったこととか。一体最近のフロントエンドはどうなってるんだ？という雰囲気になってきましたので、少しメモ的に書きました。 JavaScriptフレームワークについて JavaScriptフレームワークの状況を見ると︵フレームワークかライブラリかの議論は置いておき︶ DOM Web Components Virtual DOM に分かれます。JavaScriptフレームワーク初期の頃はDOMを直接操作するものが多く出現してきましたが、レスポンスなど扱いに難しい面もあり、他のアプローチが考案されました。それがWeb Compoent
luccafort 2015/03/18
このレベルのざっくり感だと評価だされてもうーん？と首を傾げざるを得ない印象しか受けなかった。まぁコード書けとか知らないなら覚えろとかはわかるんだけどももうちょっと深い部分まで踏み込んで書いて欲しい。

DOM

フロントエンド

JavaScript

programming

HTML5

CSS

Webアプリケーション
リンク
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura︵Slack︶フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間﹁レスポンシブ・ウェブ﹂についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。それでは実際、レスポンシブ・ウェブとは何についての対応︵レスポンシブ︶なのでしょうか。現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。太陽光
luccafort 2014/01/28
Luxの値によってバックグラウンドのカラーが変わると画面のイメージが変わるなぁ。実装して欲しいのだけども端末ごとの精度の差をどうやってうまくバランス取るのかが難しそう。

UI

CSS

レスポンシブ

javascript

HTML5

webデザイン
リンク
HTML5 & CSS3 で電子書籍も紙の本も作れるという話
HTML5 & CSS3で電子書籍も紙の本も作れるという話 2013-11-30 for HTML5 Conference 2013 LT 村上真雄 (@MurakamiShinyu) Antenna House Formatter 開発者 HTML&CSSでWebを作れるなら、本も作れます。電子書籍の世界標準仕様 EPUB。 EPUBの中身は、HTMLのコンテンツとCSSのスタイル、それと本の情報をまとめたもの。 Amazon KindleはEPUBと少し違うけど、HTML+CSSでできてるのは共通。 EPUB3.0︵2011年︶で、CSS3 Writing Modesによる縦書きとか、HTML5により動画やインタラクティブな電子書籍も可能に。あらゆるものがHTML5でできるように… EPUB電子書籍もそうだけど、アプリの形した電子書籍もその他いろんなアプリもサイネージとか
luccafort 2013/12/02
個人的にはEPUBには期待してるんだけどなー。実際には現在のフォーマッタからEPUBにコンバートした場合とかって話が聞いてみたい感あるなぁ。あるのか知らんけども。

HTML5

CSS

CSS3

html
リンク
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面︵ターミナル︶を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt︵JavaScript製のタスクランナー︶を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。なぜGruntを使うの？ Gruntの使
luccafort 2013/12/02
「それでエンジニアさんにTowerのGit設定をやってもらおうと思ったのですが」何故そうなる！？と思ったらきちんと最後が綺麗にまとまってた。

sass

CSS

JavaScript

development

HTML

html5

terminal

grunt
リンク
http://www.hp-stylelink.com/news/2013/10/20131001.php
luccafort 2013/10/09
JavaScript編も読んだ感想なんだけども「○○します！」まではわかるんだけどもその理由が書いてないと誰も納得しないだろ。守らせるものだってのはわかるけどももうちょい説明するべき。

CSS

script

html

color

Google

URL

HTML5

CSS3

コーディング規約

コーディング
リンク
<html>,<body>は要らない？Googleが推奨するHTMLファイルの記法 - Qiita
つまりhtml, head, bodyなどの使い慣れたお決まりのタグは今更書くまでもないということ。参考: どのようなタグが省略可能か http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission P.S. STORYS.JP、 coincheck などのサービスを運営、開発しています。興味のある方はぜひ和田まで連絡を！Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can
luccafort 2013/08/29
えー？！って思ってみてたらコメントの反論見て納得した。省略できるものは省略しようね！ってことか。まぁいわんとすることはわからんでもないが正直あんまり省略しすぎは逆に可読性下がると思うけどなぁ。

html

platform

Google

tips

web制作

HTML5

css

coding-style

qiita
リンク
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。実際に作ってみた - 下準備今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
luccafort 2013/03/18
後で読む。

jQuery

CSS

display

html

テーブル

HTML5

レスポンシブ
リンク
HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO
この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点︵2012年11月︶では、このプロパティに対してベンダープレフィックスをつけて指定することになります。ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;
luccafort 2012/11/16
割と最近このサイト訪問するんだよなぁ。

CSS3

HTML5

jQuery

CSS

アニメーション
リンク
スマートフォン対応、気をつけたいトラブル
8/18におこなわれたCSS Nite in OSAKA, Vol.32での発表用スライドです。4/27のCSS Nite in OSAKA, Vol.29で使用したスライドをベースに、若干の追記・修正をした内容となっています。Read less
luccafort 2012/08/21
はてブのタグからすらWPが消えてしまっている件について…

Android

スマートフォン

HTML5

iphone

iOS

smartphone

ブラウザ

mobile

CSS

html
リンク
http://html5please.us/
luccafort 2012/01/24
HTML5

ブラウザ

Webサービス

CSS
リンク
俺の CSS リセット: 2011 冬
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違
luccafort 2011/12/26
　あとで読む

CSS

HTML5

リセット

デザイン
リンク
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
luccafort 2011/07/21
あとで読む。

CSS3

CSS

IT

あとで読む

まとめ

HTML5
リンク
1