[B! CSS] ys0000のブックマーク

プログラム組んだら負け！実はHTML/CSSだけでできること2015夏

本スライドは、弊社の梅本により弊社内の技術勉強会で使用されたものです。近年注目を集めるアーキテクチャーである﹁Transf ormer﹂の解説スライドとなっております。 "Arithmer Seminar" is weekly held, where professionals from within and outside our company give lectures on their respective expertise. The slides are made by the lecturer from outside our company, and shared here with his/her permission. Arithmer株式会社は東京大学大学院数理科学研究科発の数学の会社です。私達は現代数学を応用して、様々な分野のソリューションに、新しい高度AIシステム

ys0000 2015/07/26

読んだ。参考になった。

リンク

レンダリングを意識したパフォーマンスチューニング

TalkNote Vol.8「TalkNote × Frontrend」 -（2013年6月8日開催）で使用したスライドです。 Webページを遅くしているボトルネックの1つは、レンダリングです。昨今、フロントエンドにおけるパフォーマンスの最適化はレンダリングの話題にシフトしつつあります。特に非力なデバイスでは、ページロードやスクリプトの速度改善よりもレンダリングまわりの最適化に注力したほうが良い効果を得られるケースもあるでしょう。問題になり得る事例を元に、いくつかのTipsをご紹介させていただきます。

ys0000 2014/12/30

css

リンク

CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年6月17日 CSS‥初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年4月21日で

ys0000 2011/11/15

なんか良さげだったのでブクマ。

リンク

クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント

IE 9が登場！ユーザーの閲覧環境がますます多様化！4月26日、ついに日本でもInternet Explorer︵以下、IE︶9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。IEのみならず、Firefox、Safari、Google Chrome︵以下、Chrome︶など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。そうした流れの中で、必然的に欠かすことができなくなる知識が、この﹁プログレッシブ・エンハンスメント﹂という概念です。プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま

ys0000 2011/05/25

リンク

CSSの知識をもっと深める30+2の小技テクニック集｜Webpark

基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。

ys0000 2011/05/17

リンク

「Canvas」と「CSS3」を使う

今回はThe Shodo︵注1︶で活用している技術の中から、CanvasとCSS3の活用例を紹介します。これまでできなかった表現や装飾を実装したり、これまでできたことをより簡単に行ったりするのに役立ちます。 Canvas‥ブラウザ上で描画する Canvasは、HTML5で新たに追加される要素の一つです。HTML内にcanvas要素のタグを記述し、width︵幅︶やheigt︵高さ︶などの属性を指定するだけで、ブラウザ上で描画できるようになります。 The Shodoでは2カ所でCanvasを利用しています。一つはWriteページで﹁書﹂を書くために、もう一つはGalleryページの作品を一覧するために利用しています。WriteとGalleryでの実際の利用方法を具体的に解説します。まずはThe Shodoの肝とも言える﹁書﹂を書くWriteと呼ぶページです︵画面1︶。半紙の部分をマウスや

ys0000 2011/02/01

リンク

HTML5とCSS3を使ってスマートフォン向けサイトを構築　－ iPhone版Yahoo!JAPANトップの開発事例紹介

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ys0000 2010/12/17

css
iphone

リンク

CSSレイアウトの肝！表示・配置のプロパティ、14選

詳しくはコチラ→　position ボックスのレイアウト方法を指定するpositionプロパティ topプロパティ topプロパティは、ボックスを配置する場合に上からの距離を指定します。基準位置の上端から配置するボックスの上端までの距離を示します。positionプロパティが﹁static﹂以外のときに有効となるプロパティです。詳しくはコチラ→　top ボックスを配置する場合に上からの距離を指定するtopプロパティ bottomプロパティ bottomプロパティは、ボックスを配置する場合に下からの距離を指定します。基準位置の下端から配置するボックスの下端までの距離を示します。positionプロパティが﹁static﹂以外のときに有効となるプロパティです。詳しくはコチラ→　bottom ボックスを配置する場合に下からの距離を指定するbottomプロパティ leftプロパティ leftプ

ys0000 2010/12/04

リンク

高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス

ys0000 2010/12/02

リンク

[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ

幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッドメモ訳者注各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i

ys0000 2010/10/22

リンク

borderプロパティを使用した華麗なる四つのエフェクト | コリス

<textarea name="code" class="css" cols="60" rows="5"> .shadow { padding: 20px; border: 1px solid #f0f0f0; border-bottom: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } </textarea>

ys0000 2010/06/25

リンク

覚えて良かったCSSテクニック « zaru blog

ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス幅：190px マージン：15px liボックスダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックスダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7

ys0000 2010/04/23

リンク

少しのコードで実装可能な20のCSS小技集

2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！コードはサンプル内の﹁HTML﹂や﹁CSS﹂タブをクリックしてくださいね！少しのコードで実装可能なCSS小技集シリーズ︻第2弾︼少しのコードで実装可能な20のCSS小技集︻第3弾︼少しのコードで実装可能な15のCSS小技集まずはCSS基礎編 1. divを中央揃えにするほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox

ys0000 2010/04/15

リンク

duree dpe

Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe log ement tous les cas à par

ys0000 2010/01/19

リンク

ASCII.jp：Googleも採用！CSS3実践テクニック

﹁CSS3をWebページに実装する﹂というと意見は真っ二つに分かれる。﹁完全肯定派﹂と﹁完全否定派﹂だ。しかし、Internet Explorer︵IE︶を除く主要なWebブラウザー︵Safari/Firefox/ Opera/Google Chrome︶は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの﹁Google﹂だ。 Googleの検索ボタンに注目する﹁Google？﹂と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。

ys0000 2009/11/25

リンク

css-lecture.com

ys0000 2009/11/16

リンク

コンテンツのみ印刷するようにCSSで制御してみよう

はじめに Web開発者にとって、XHTML+CSSで構成されたWebページ作成の基礎知識は避けて通れません。﹁CSSってデザイナーがやることじゃないの？﹂と思うかも知れませんが、プログラマこそ、CSSのマークアップを理解する必要があると筆者は考えています。とりわけ、デザインも担当するWeb開発者も少なくありません。また、Webページを印刷する場合、コンテンツのみ印刷したいけど、Firefoxでは右端が切れてうまく印刷できずに困ったことはありませんか？そこで本稿では、CSSの特長や概要をはじめ、どのブラウザからでも思い通りにコンテンツのみ印刷するようにCSSで制御する方法を解説します。対象読者 CSSに移行したいが、思い通りにいかずに結局テーブルレイアウトに頼っているWeb開発者 Firefoxでも右端が途切れることなく印刷できるように対処したい方 CSSでレイアウトするメリットCS

ys0000 2009/06/26

リンク

[CSS]一枚の画像だけでスタイリッシュなプログレスバーを実装するスタイルシート

使用画像プログレスバーの色は透過PNGを使用しているので、スタイルシートで簡単に変更できます。 HTML箇所は、divが3つ入れ子で実装されています。また、JavaScript︵jQuery︶を使用して、バーが0%から100%になったり、カラーを少しずつ変更させるデモもあります。

ys0000 2009/06/23

組み合わせの妙。

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

ys0000 2009/02/05

かこいいグラフ。

CSS

リンク

[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス

Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラムdemo: 3カラム以前、紹介した﹁高さの異なるカラムを揃えるスタイルシート﹂では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その2つの不具合が無いものとなっています︵IE7調べ︶。対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。下記は、そのイメージです。

ys0000 2008/10/31

リンク

はてなブックマーク

タグ

関連タグで絞り込む (19)

CSSに関するys0000のブックマーク (29)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス