[B! CSS][HTML] d4-1977のブックマーク

d4-1977 id:d4-1977

CSSとHTMLに関するd4-1977のブックマーク (35)

Maximally optimizing image loading for the web
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for pub
d4-1977 2021/01/10
あとで読む

HTML

CSS

SEO
リンク
https://codepen.io/tak-dcxi/pen/MWjOqYg
d4-1977 2021/01/09
あとで読む

UI

CSS

HTML
リンク
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト…　といった様々な種別のサイト、Webページがありますが、これらの﹁完成予想図︵視覚情報︶﹂を同じ方法で分解して、コーディング用の部品にできます。粒度と言えばAtomic Designが有名ですが、この﹁HTML Parts﹂も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で﹁思考の入り方・捉え方﹂や﹁名称と定義﹂をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
d4-1977 2020/03/09
なんかボリューム感たっぷり。モジュールやブロックの分け方を感覚にしないで明文化しているのいいな。

CSS

HTML

フロントエンド
リンク
カード型コンポーネントの僕なりのHTMLとCSSを紹介 - Shibajuku
こんにちは。最近、今更ながらPodcastって面白いなぁーとワクワクしてます。どうも、しばひろです。ということで、Shibajukuでもポッドキャストを始めてみました。 Shiabajukuのサロンメンバーたちの会話を盗み聞きしてもらうというポッドキャスト﹁シバジュク酒場﹂です。さて、今日は、色んなWebサイトでよく見かけるカード型コンポーネントについて書いてみたいと思います。というのも、よく見かけるコンポーネントだからこそ、色んなマークアップ方法があると思うのですが、僕なりのマークアップ方法が誰かの参考になるかもしれないし、色んなコンポーネントのマークアップを考えるきっかけになるかもしれないので書いてみようと思いました。カード型コンポーネントって何？まず、カード型コンポーネントがどんなコンポーネントかっていうと、まるでカードのような縦型になっていて、一般的には、最初に画像が
d4-1977 2020/02/25
どこまで配慮するか？ですよね。動的とかになると特に。

アクセシビリティ

HTML

CSS
リンク
HTML+CSSコーディングの言語化 - Qiita
はじめに HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。以下のような効果が期待できます。 HTMLとCSSを使っておこなってきた事を客観視・再認識できる始原的な動機を把握することで、手法を別の視点で捉えられるようになる認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。言語化の概要まずは、全体像が分かる概要図を掲載します。この記事は、以下のステップと各項目について順に説明するものになります。前提事項・環境について言語化するにあたって前提となる考え方や環境について記載します。 HTMLとCSSの役割 HTML → データ
d4-1977 2020/02/25
言語化をすごいしてるし、まとめてるこんなふうにまとめられるのか。

HTML

CSS

まとめ
リンク
良いUIをつくるには「どうつくるか？」より「誰とつくるか？」｜takahashikazuki｜note
PLAID Advent Calendar 18日目の記事ですPLAIDでKARTEのUIデザイン︵HTML / CSS︶を担当しています@takahashikazukiです。経歴は制作会社勤務が10年︵3社︶、フリーランスでの活動が5年です。PLAIDには2018年2月に入社しました。フリーランス時代はスタートアップのプロダクト開発をお手伝いしたり、ECサイトのコンサルをしたり、サイダーをつくったり。入社後は、当時スタートしていたKARTEのUI刷新プロジェクトに参加しました。ここでは、そのプロジェクトを通じて感じた事…特に﹁機能するスタイルガイドづくりに大切なこと﹂について書きたいと思います。 KARTEのスタイルガイドを刷新するKARTEローンチから3年。多くの機能追加や改修でデザインは一貫性を失い、HTML / CSSは複雑化し壊れはじめていました。そこでUIデザイナー2名+
d4-1977 2018/12/19
ユーティリティークラスは悩ましい存在

エンジニア

UI

HTML

css

デザインシステム

スタイルガイド
リンク
HTML5 Conference 2018 登壇資料まとめ - Qiita
HTML5 Conference 2018 の登壇資料のまとめです。資料を発見次第随時アップデートしていきます。 https://events.html5j.org/conference/2018/11/ 2018年11月25日（日）東京電機大学千住キャンパス 1号館タイムテーブル https://events.html5j.org/conference/2018/11/session/ ハッシュタグ総合: #html5j ホール（2階）: #html5j_h 各ルーム（1階:A-C/2階:D,E）: #html5j_a #html5j_b #html5j_c #html5j_d #html5j_e セッション ZOZOのグローバルECのフロントエンドアーキテクチャ設計　（権守健嗣さん）光を超えるためのフロントエンドアーキテクチャ（mizchiさん） TypeScript E
d4-1977 2018/12/09
ありがたいまとめ。

HTML

あとで読む

CSS

JavaScript
リンク
「フロントエンド開発者」の終焉 | POSTD
元記事の著者より‥この記事は主に北米文化で私が見たことを反映しています。誰かに職業をきかれたら、私は﹁フロントエンド開発者です﹂と答えます︵答えは相手によって変わることもあります︶。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLやCSSを書き、JavaScriptも多少は書いていました。駆け出しの頃、PHPやMySQLの作業に職務の大半を費やしていたとはいえ、フロントエンド開発者として見られる方が好きです︵これに関しては、後に詳しく説明します︶。この状況は、2010年の初頭に変わり始めました。JavaScriptが、重要で、非常に大きな存在になってきたのです。昨年の初め頃から、たくさんのフロントエンド開発者に会うようになり、あることに気付きました。フロントエンド開発者は、もはや、私が以前から知っているフロントエンド開発者ではな
d4-1977 2018/01/20
悩ましい。

HTML

CSS

JavaScript

開発
リンク
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！白石俊平︵HTML5 Experts.jp編集長︶こんにちは、編集長の白石です。この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。矢倉さんのセッション﹁まあまあ最近のCSSとつらくならないための書き方﹂に関するスライド資料は、こちらで公開されています。インパクト大！CSSグリッドレイアウト概要白石: では、まずは簡単に自己紹介をお願いできますか？矢倉: 昨年︵2
d4-1977 2017/11/04
CSS

HTML

HTML5

grid
リンク
フロントエンド開発の概要について
ここでは、フロントエンド開発の概要について説明していきます。＊元記事はこちらです。(英語) この記事でカバーしているものについてSingle-page Apps (SPAs)New-age JavaScriptUser InterfaceState ManagementCoding with StyleTestingLinting JavaScript Linting CSSTypesBuild SystemPackage ManagementContinuous IntegrationHostingDeploymentSingle-page Apps (SPAs)かつてはサーバーサイドレンダリングという、別のURLを開くごとにページをリフレッシュしてサーバーから新たなHTMLページを送る手法が主流でしたが、最近のSPAsではクライアントサイドレンダリングというものが主流になっています。
d4-1977 2017/10/22
あとで読む

HTML

javascript

CSS

フロントエンド

開発
リンク
コーディングが苦手なWebデザイナーにおすすめしている独学方法 - IT系女子ログ
Webデザイナーとして入社した新人さんの教育係を担当しています。デザインもコーディングも教えるのですが、新人さん達からよく聞こえてくるのが、﹁コーディングが好きになれない…﹂という声です。うまくいかないから、勉強不足だから、という理由で好きになれないのであれば、大丈夫です。続けていれば、皆さん業務をおまかせできるようになります。私も何度も何度もコードを書いて、1年経ってやっと基本を覚えられた気がします。新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログあきらめずに勉強を続けていれば、できることが増えてきます。そうなれば、嫌いな気持ちもやわらいできますよ。今回は、﹁コーディングが苦手﹂と感じている新人Webデザイナーさんへ向けて、少し先輩の私からのメッセージです。苦手だなぁと感じる方向けに、いつもおすすめしている独学方法をご紹介
d4-1977 2017/10/05
コーディングをしない、という手段もあるかもなあ、なんて前提を覆す感想を持ってしまった

あとで読む

HTML

CSS
リンク
おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足おじさん‥ 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。なぜ﹁モテ﹂なければいけないのか﹁モテる﹂とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた︵と思う︶。ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、﹁モテる﹂ための方法をいくつかかいつまんでまとめてみた。セマンティックなコーディングは、開発者の課題理解度を図り、意
d4-1977 2017/05/21
あとで読む

HTML

CSS
リンク
新卒Web編集者が「知っていてよかった」と実感した、HTMLとCSSの基礎 - はてな編集部ブログ「編む庭」
こんにちは、はてな編集部の川原です。大学卒業後、新卒でWebポータルサイトの編集職としてキャリアをスタートさせ、はてなには2016年12月に中途入社しました。現在は、主に企業のオウンドメディア編集に携わっています。いきなり昔語りとなってしまい恐縮ですが、私自身のWebスキルはというと、﹁ふみコミュニティ﹂と﹁0574 Web SiteRanking﹂がランキングサイトとして全盛期だったころ︵これで大体の年齢がバレる︶から、個人でWebサイトを作成している程度。始めた当時は﹁ふみコミュ﹂も﹁0574﹂も、素材配布サイトや画像加工サイト*1で活気づいていたな……。無料レンタルサーバーが人気すぎて、フリーアドレスだと登録できなかったりする、いい時代でしたね。私は﹁たださぁば﹂﹁忍者ツールズ﹂﹁めがね部﹂あたりを利用し、素材サイトは﹁フランクなソザイ﹂などにお世話になってました。徐々に有料の
d4-1977 2017/05/06
HTML

CSS
リンク
メンテナブルでありつづけるためのCSS設計
2014年11月8日大阪「Web制作者のためのCSS設計の教科書」出版記念イベント x CSSオジサン #0 のスライドです。Read less
d4-1977 2014/11/14
CSS

web制作

コーディング

HTML
リンク
[CSS]シャドウとグラデーションを巧みに使ったかわいらしいテキストエフェクト -Milky Effect
テキストにtext-shadow、背景に美しいlinear-gradientを効果的に使い、かわいらしいエフェクトに仕上げたスタイルシートを紹介します。 Milky Font Effect 実装は簡単で、コピペで利用できます。 HTMLp要素などに、classを添えておきます。 <p class="milky">美しい日本語</p> CSS エフェクトの大切なポイントは﹁text-shadow﹂と﹁background﹂、カラーを変更しても面白そうですね。 .milky { font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;; text-transf orm: uppercase; display: block; font-size: 72px; color: #f1ebe5; text
d4-1977 2014/02/24
デザイン

CSS

HTML
リンク
とあるソシャゲのHTML/CSS設計話
︻Frontendアドベントカレンダー19日目︼ Xboxに釣られて転職してから2年半…あっという間だった…。関与したもの‥ スマホ版ピグ︵リニューアルして面影無し︶ピグファンタジア︵11月末クローズ︶新規ゲーム　←今ここ今は新規ゲームでコーディングの人としてjoinしてます。新しいサービスを立ち上げる時に必要なHTMLとCSSの土台作りを全部やるということが、﹁HTML/CSS設計﹂という言葉で装飾されることを知ったのは割と最近です。マークアップだけで一人据えるのは珍しいと思うので、今やってることなど含めてつらつら書きます。ここが変だよソシャゲ開発依頼を受けてサイトを作る場合は次のようなフローだと思います‥ クライアントと打ち合わせ仕様が決まるデザイン決まる値切られる価格が……決ま…るコーディングクライアントチェック突然の無理難題に戦慄走るテスト・修正
d4-1977 2013/12/20
HTML

コーディング

CSS

設計

あとで読む

web制作
リンク
BEM とは - CHROMA
メンテナンスブルな CSS の設計の話でOOCSS やSMACSSってのがあるけど、そのうちの一つでBEM というのがある。 http://bem.info/ BEM-Methodology Definitionsの日本語訳を見てみると XJST とかBEM HTML とかいうテンプレートエンジンに関する内容︵よくわかってない︶も書かれてるんだけど、日本ではこの中のBEM を CSS 用に使いやすくした MindB EMding ︵日本語訳はこっち︶の命名規則が良いってことで流行ってるみたい。また、今BEM っていったら大体は MindB EMding のことを指してるみたい。BEM-Methodology Definitions の内容全部をこれから理解しようとすると自分が知らない知識が多くてちょっとアレなので.. 、MindB EMding の内容を先に抑えておきたいと思
d4-1977 2013/12/15
CSS

oocss

HTML

BEM
リンク
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。ターゲットブラウザで大きな崩れがない。リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。バリデーター・チェックでエラーが出ない。逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
d4-1977 2013/12/01
HTML

コーディング

CSS

まとめ

Web制作
リンク
現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transf ormを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
d4-1977 2013/10/27
HTML

css

コーディング

あとで読む

開発
リンク
CSS Nite LP26「CSS Preprocessor Shootout」フォローアップ（1）『CSSの設計』高津戸壮さん｜CSS Nite公式サイト
CSSNite LP26﹁CSS Preprocessor Shootout﹂フォローアップ︵1︶﹃CSSの設計﹄高津戸壮さん記事公開日‥2013年5月7日︵火︶ 2013年1月12日︵土︶、ベルサール半蔵門で開催したCSSNite LP, Disk 26﹁CSS Preprocessor Shootout﹂のフォローアップとして、高津戸壮さん︵ピクセルグリッド︶の﹃CSSの設計﹄のスライドなどを公開します。スライド音声メッセージ、補足当日は、私のセッションをお聞き下さり、ありがとうございました。CSSをどのように書くかという問題は、完全な正解が無く、なかなか難しいものです。私のセッション内で話したような、﹁CSS設計を完全なものにできない﹂という問題は、HTMLとCSSを書く者らにとっては、頭痛のタネです。これについては、以下の記事でうまくまとめられ、書かれて
d4-1977 2013/10/10
CSS

HTML

設計

web制作
リンク
1 2 次のページ