スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が必要です。 The mistake developers make when coding a hamburger menu by Jared Tong 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューをiOS Safariで機能させる ハンバーガーメニューの実装でよく見かける問題 ハンバーガーメニューの実装方法 終わりに ハンバーガーメニューをiOS S
Slides: https://www.slideshare.net/stubbornella/object-oriented-css How do you scale CSS for thousands of pages? Object Oriented CSS is an answer. It’s an approach for writing CSS that’s fast, maintainable, and standards-based. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites. Nicole Sullivan first presented it at Web Directions North i
Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはすべてのモダンブラウザで、IEは8+です。
《2019年9月16日 16:10 公開/更新》 画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合のCSS [イメージ,幅] 画像を描画領域の横幅いっぱいに表示したいけども、原寸サイズを超えて拡大はさせたくない、という場合がありますよね？ つまり、画像より描画領域(ブラウザのウインドウや端末の画面)の方が狭い場合は「横幅一杯になるように自動縮小させたい」けども、描画領域の方が広い場合は自動拡大はせずに原寸サイズで表示したい、というケースが。特にレスポンシブ・ウェブデザインを採用している場合などで。そんな画像の表示方法もCSSなら簡単です。 画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合のCSS 描画領域の横幅に合わせて自動で拡大したり縮小したりする表示 描画領域の横幅いっぱいになるよう自動でサイズ調整はするが、原寸より大きくはしたくない場合 画
マウスオーバーでクルッとするボタン 画像もJavaScriptも使わずに、HTML＋CSSのみでクルッと回転するようなエフェクトの発生するボタンの作成方法を紹介します。（使用例： ニュースページ、地図ページ） ニュースページのカテゴリナビゲーションです。もともと英語で表示しているテキストを、マウスオーバーでくるっと日本語に入れ替えています。CSSを工夫して用いれば、このように要素内のテキストを動かすことも可能になります！ 実際につくってみよう！ 上述のスライドアウトインする画像と同様で「transition」というCSS3プロパティを用い、マウスオーバーでのCSSプロパティの変化にアニメーションを加えています。サンプルコードを以下に用意しました。 CSSでクルっとするボタン - jsdo.it - share JavaScript, HTML5 and CSS CSS3を用いて作成したマウ
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
Online JavaScript/CSS/HTML CompressorThis is a web interface to minify your JavaScript, CSS and HTML. This tool uses UglifyJS 2, Clean-CSS and HTML Minifier. You can easly change the defaults below the textarea. Further ReadingIn my investigation, I discovered coding patterns that prevented YUI Compressor from performing variable name replacement. By modifying or avoiding these coding patterns, yo
BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような
2015年 09月 10日 開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました カテゴリ： gulp タグ：gulpタスクランナー タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。 1.タスクランナーとは？ gulpで何ができるのか？ 2.gulpに必要な環境を整える – Node.jsのインストール 3.gulpに必要な環境を整える – package.jsonの作成 4.gulpに必要な環境を整える – gulpfile.jsの作成 5.gulp-ejsを使った開発環境 6.
この文書は「CSS Color Module Level 3 (W3C Recommendation 07 June 2011)」の日本語訳である。日本語訳は参考情報であり、公式な文書ではない。また、翻訳に誤りがある可能性にも注意されたい。 原文の最新版 は、この日本語訳が参照した版から更新された可能性がある。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照されたい。 公開日: 2011-06-08 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> 2011年6月7日付 W3C 勧告 (Recommendation) この版: http://www.w3.org/TR/2011/REC-css3-color-20110607/ 最新版: http://www.w3.org/TR/css3-color 前の版: http://www.w3.or
Metro UI is an free, open source, html-first toolkit for developing web sites with HTML, CSS, and JS. With Metro UI, you can easily and quickly make a site from prototype to production. Metro UI includes general styles, responsive grid, layouts, typography, 100+ components and javascript routines, 800+ built-in icons.
Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list. Vertical lists Simple list Simple list with square bullets Simple list with circle bullets Using images for bullets Using CSS background images for bullets Eric Meyer's simple separators Eric Meyer's Panelise Rollover
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く