[B! web][CSS] YUKI14のブックマーク

YUKI14 id:YUKI14

webとCSSに関するYUKI14のブックマーク (61)

令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。そこで今回は﹁2024年のWeb制作ではこのようにコードを書いてほしい！﹂という内容をまとめました。質より量で、まずは﹁こんな書き方があるんだ﹂をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
YUKI14 2024/05/14
CSS

web

html

サイト

まとめ

javascript
リンク
いまさら聞けないRetina対応のための「ピクセル」の話
ピクセル密度とピクセル比の関係ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
YUKI14 2014/04/01
CSS

webデザイン

web制作

画像

web
リンク
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック‥ズルいデザイン︵1︶︵1/2 ページ︶デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。︵注︶このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。ズルいデザインはSassとCompassを利用し
YUKI14 2012/12/08
CSS

web

Webサイト

web制作

webデザイン

design

webdesign

デザイン
リンク
なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは﹁レスポンシブ・ウェブデザイン﹂！昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった﹁必読！5分でわかる流行のレスポンシブWebデザインまとめ﹂に載っていた﹁NHKスタジオパーク﹂のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。さらに狭めてみると、右のサイドバーが完全に無くなった。さらに狭めると今度は左のサイドバーが消えた。ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
YUKI14 2012/10/15
jquery

NHK

jQuery

CSS

Web

Web制作

webデザイン
リンク
クックパッド流UIの作り方 - takeshi nagayama's blog
なんか突然東京行きたくなったので、ひょひょいと行ってきた。たまたま立ち寄ったクックパッドっていう会社でクックパッド流UIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ全体のデザインを束ねる → デザインガイドラインガイドライン Sassで統一的なものを提供する画像を使わずにCSSでデザインするメリット mixinをつかって統一できる画像編集がいらないプロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく検証を
YUKI14 2012/07/29
ui

web

ux

webデザイン

design

CSS

cookpad

デザイン

クックパッド
リンク
Components · Twitter Bootstrap
Sleek, intuitive, and powerful front-end framework for faster and easier web development. Download Bootstrap GitHub project Examples Extend Version 2.3.2
YUKI14 2012/03/05
CSS

Development

twitter

html

web

design

webdesign
リンク
0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-
私の周りでwebデザインが出来る人ってあんまりいません。でも﹁webデザインってどうやるのー？﹂とか﹁私もやってみたいんだけど…﹂とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基本・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜＞＜ by‥fweez まずはじめにとりあえず用意するもの2つ HTMLの基本 HTMLとは？ 1.DOCTYPEの宣言 2.基本的なタグ 3.<body>の文書構造 CSSの基本 CSSとは？ 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素応用してwebページを作ってみるまずはじめに一口にwebデザインといっても色々なことがあると思うのですが大
YUKI14 2012/02/14
html

web

webdesign

Webデザイン

css

web制作

デザイン
リンク
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。
YUKI14 2011/05/17
*あとで読む

テクニック

CSS

まとめ

デザイン

web制作

Webデザイン

Tips

Web
リンク
インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」
とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。しかし、これを手作業で進めるのはとても手間がかかり、0から作り直したほうが速いことがほとんど。今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。組織のマインドマップツールをマインドマイスターにすべき理由伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!!インラインCSSのHTMLをCSSファイルと分割する﹁Cascader﹂﹁Cascader﹂は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。 HTMLタグを貼り付けるだけで分割 ↑たとえば、画像のようにイ
YUKI14 2011/05/06
CSS

webサービス

お役立ち

ツール

webservice

web制作

html

web
リンク
犯してはいけないHTMLタグの過ち10個
︻追記︼ HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。︻追記︼ HTML5では﹁Images whose contents are not known(どのような内容かわからない画像)﹂に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
YUKI14 2011/04/20
html

PHP

CSS

webデザイン

web

webdesign

web制作
リンク
http://e0166nt.com/blog-entry-862.html
YUKI14 2011/03/11
CSS

ジェネレータ

まとめ

web

webサービス

ツール

generator

web制作

WEBデザイン
リンク
http://e0166nt.com/blog-entry-852.html
YUKI14 2011/02/18
CSS

css3

webデザイン

web

webサービス

ツール

ジェネレータ

generator
リンク
IDEA * IDEA
ドットインストール代表のライフハックブログ
YUKI14 2011/02/09
CSS

calendar

チュートリアル

webデザイン

web

カレンダー
リンク
使われていないCSS設定があるか教えてくれる『Unused CSS』 | 100SHIKI
似たようなツールは他にもあるが、シンプルで使いやすそうだったのでご紹介。 Unused CSSを使えば、使われていないCSS設定がどこにあるかを教えてくれる。使い方は簡単で、チェックしたいサイトのURLを入力するだけだ。すると、どのCSSファイルにどれだけ不要な設定が入っているかを教えてくれる。また、不要な設定を排除したCSSをダウンロードできたりもする。サイトの開発がながびくと不要な設定も増えていくことだろう。こうしたツールをうまく使ってサイトの最適化をはかりたいですな。
YUKI14 2011/01/10
CSS

webデザイン

web

webサービス

ツール

webservice

tool

web制作
リンク
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集
cssやプログラミングcss × クロスブラウザ cssとHTMLタグのマークアップのみで実装出来るテクニック集です。クロスブラウザ対応のみをcss-playから探したので、ついでにご紹介します。 cssとHTMLタグのマークアップのみで実装出来るテクニック集です。クロスブラウザ対応のみをcss-playから探したので、ついでにご紹介します。jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。シンプルなドロップダウンメニューシンプルなドロップダウンメニューです。マルチレベルのメニューも可能。demo縦並びのフライアウトメニュー横に出るフライアウトタイプ。画像を使用しています。demoクロスブラウザ対応のグラデーション
YUKI14 2010/06/24
CSS

まとめ

webデザイン

web

tips

コーディング

クロスブラウザ

HTML

web制作
リンク
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール︵1︶クラウド隆盛の昨今、ソフトウエアと同等か、それ以上に便利な機能を持ったオンラインサービス／ツールが豊富に取りそろってきた。本記事では、オンラインサービスの中でも無料利用が可能なものを選りすぐり、Web制作を6つのシーンに分類してより快適に作業するための82の活用術の中から、今回と次回はWeb制作に使えるデザインに特化した無料オンラインツールの活用法の中から、コーディングに使える6点ずつ紹介する。デザインの幅を広げ、Webサイトの質を高める実践方法を試してほしい。 ■バックナンバー第1回　デザインに使えるツール︵1︶はこちら第2回　デザインに使えるツール︵2︶はこちら第3回　デザインに使えるツール︵3︶はこちら Tweet [technique 01]CSS3の表
YUKI14 2010/05/19
ツール

制作

web

デザイン

コーディング

CSS

web制作

*あとで読む
リンク
CSS Nite LP, Disk 8｜CSS Nite公式サイト
ご質問いただいたので、これまで開催したCSSNite LPを、改めてまとめてみました。LPは、主に土曜日などに開催するCSSNiteのロングバージョンの開催の名前です。 ★は再演版。これまでに再演されたのは﹁Coder's Higher﹂、﹁スマートフォン特集︵1︶iPhone/iPad編﹂、﹁アクセス解析‥事例紹介とGoogleアナリティクス新機能﹂。また、﹁UI/UX﹂再演版が4月に開催予定です。 LP1︵ブラウザ、2006年10月︶LP2 "Dreamweaver CC"︵Dreamweaver、2006年12月︶LP3 "Coder's High"︵コーディング/マークアップ、2007年5月︶LP4 "Web Directions NEXT"︵Webディレクション、2007年10月︶MT4LP5︵企業サイト構築におけるCMSとしてのMovable Type、2008年4月︶L
YUKI14 2010/05/07
*あとで読む

CSS

google analytics

web

webサービス
リンク
| test
mameshibankさん豆柴日和 amecustomさんアメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん脚本家によろしく。 nisishowさんリフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★cairさん広報＆IR担当のオフィシャルブログ shikamaさん千葉の東京寄りでホームページ制作＆企画・運用中！saijoさん経営に終わりはない nina-yuanbeauteさん芳村仁奈オフィシャルブログ﹁Nina's Diary﹂Powered by Ameba frontier-ceo-bossさんフロンティア社長オフィシャルブログ Powered by Ameba ohtias-ceoさんソーエネ×オーチアス社長 alfortさん念ずれば花ひらく﹁会社経営﹂
YUKI14 2010/04/29
CSS

web

webデザイン

web制作

ロールオーバー
リンク
[CSS]画像にも負けないクオリティのボタンを実装するスタイルシート | コリス
CSS3を使用して、ディテールにこだわったボタンを実装するスタイルシートのチュートリアルをInferenceから紹介します。 Creating a Realistic Looking Button withCSS3実装されたデモは、元記事の下﹁Show and Tell﹂で確認できます。対応ブラウザはFx3.6, Safari4, Chromeで、IE8では角丸とアクティブ時のスタイルが欠けます。実装‥HTML ディテールにこだわっているため、HTMLは煩雑なものになっています。これらはCSSの指定に意味をなします。 <textarea name="code" class="html" cols="60" rows="5"> <a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a> </textarea>
YUKI14 2010/04/14
CSS

css3

webデザイン

web

デザイン

web制作

*あとで読む
リンク
ハイパーテキストリンクのスタイル大全
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。はじめにハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラスリンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
YUKI14 2010/02/15
*あとで読む

ウェブ

テクニック

color

CSS

web

まとめ

webデザイン

tips

デザイン
リンク
1 2 3 4 次のページ