Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. The initial release of this course focuses on web performance fundamentals, that beginners should find informative. Each module aims to demonstrate key perform

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

Notoフォントは全ての言語に対応することを目指す野心的なフォント。GoogleとAdobeが共同開発したこのフォントは無料で利用できる。 ※Adobeからは、『源ノ角ゴシック』として提供されている。 プログラミング用フォント『Source Code Pro』を開発したAdobeが関わっているおかげか、Notoフォント自体非常に美しい。 そんなNotoフォントは『Google Noto Fonts』なるプロジェクトで無料で公開されている。 Google Noto Fonts 今回は、このフォントをWebフォント ―すなわち、外部からダウンロードして使うフォントとして使う方法を紹介する。 実は面倒くさい、WebフォントでNoto Sans Japanese Type SquareやFONTPLUSなど、Webフォント提供サービスは数多く存在する。サイトを見る端末にフォントがインストールされて

ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ

要素に影を落とすためのbox-shadowを確認するためのジェネレーターです。 各種プロパティなどページ下部に詳しい説明を書いてあります。 filter関数のdrop-shadowやReact Nativeのshadowのジェネレーターは別ページになります。 /* preview */ width: 200px; height: 60px; background-color: #3cb371; /* border-radius */ border-radius: 30px; /* box-shadow */ box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);

iOS 8.4.1の:hover問題 追記(2015年10月23日) iOS 9.0.2で確認した所この問題は解決していました。 ネタ元：結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari | WEBスキルアップ君 上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。 どんな現象になるの？ 以下のサンプルで確認できます。 a:hover img{ opacity:0.6; } <a href="http://blog.webcreativepark.net/"><img src="button.png" alt="button"></a> サンプルページ iOS 8.4.1をお持ちでない方は以下の動画で確認できます。 SPサイトなら:hoverを利用するケースは少ないので使わ

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意 それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで

にすると同時にopacityを1へとアニメーションしたい場合。 それをcssのtransitionを使って実現しようとすると、 css: .hoge{ display: none; opacity: 0; transition: opacity 1s linear 0s; } .hoge.show{ display: block; opacity: 1; }

BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような

フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的な CSS 設計手法 既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ

iOS7 以降とYosemite になってから　ヒラギノ角ゴシックにw1, w2 のウェイトが追加されたので、 CSS でHelvetica Neue とのいい感じの混植を模索。 とりあえず Yosemite だけでいい感じになるように。 .w1, .w2, .w3, .w6 { -webkit-font-smoothing: antialiased; } .w1 { font-family: "HelveticaNeue-Thin", "Helvetica Neue Thin", "Helvetica Neue", ".HiraKakuInterface-W1"; font-weight: 100; } .w2 { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", ".HiraKak

ideahacker.net 2023 著作権. 不許複製 プライバシーポリシー

追記：最初、うっかり「2013冬」って書いてしまったんですけど、ほんとは「春」と書かなきゃいけませんでした（汗）*1 とりあえず今、CSSのfont-familyでフォントを指定するならば、これで決まり（一番下の追記も参照で）。 font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;CSSのfont-family指定、「あえてフォントを指定しない」っていうやり方もアリですが、いろいろな事情でそうも言ってられません。とりあえず今現在の最適font-family指定を考えてみたところ、上のようになりました。 指定順序、入れたフォント、入れてないフォント、すべてに意味があります。 以下説明。 ヒラギノはProではなくProN。 OS Xの和文標準フォ

はじめに こんにちは、くろていです。先日、TwitterにてWindows/Mac間の違いにおいてのフォントの表示、内蔵しているフォントについて少し話し合いをしました。その内容を受け、「様々な環境の視点から」どう「きれいなフォント」を表示するかを考え、それをまとめ、みなさんに知って欲しいと思い、記事を書きました。 実装案 各OSに入っているデフォルトのフォントを把握する 様々な環境の視点からフォントを考え、指定するときには、もちろんそれぞれの環境のデフォルトに内蔵されているフォントを知ることが最重要です。それをまとめ、整理してみました。(ゴシック体のみ) Windows: MS Pゴシック, メイリオ(vista以降), 游ゴシック(8.1以降) Mac:ヒラギノ 角ゴシックProN W3,W6,W8, 游ゴシック(Mavericks以降), MS Pゴシック(Office for Mac

概要 ▶ 様々なフォントがWebで利用できるモリサワのWebフォントサービス《TypeSquare》が話題になっていますね。TypeSquare [タイプスクウェア] 2012年12月末まで無料で利用できるので、Web業界の人や印刷業界の人が試しているようです。 しかし、この Webフォントサービス、試した方からは意外に不評の声もちらほら…。それは本文組にWebフォントを使用して、Windowsのウェブブラ 様々なフォントがWebで利用できるモリサワのWebフォントサービス《TypeSquare》が話題になっていますね。 TypeSquare [タイプスクウェア] 2012年12月末まで無料で利用できるので、Web業界の人や印刷業界の人が試しているようです。 しかし、この Webフォントサービス、試した方からは意外に不評の声もちらほら…。 それは本文組にWebフォントを使用して、Windo

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

こんにちは、@yoheiMuneです。 Chrome,Safari,iPhone,AndroidなどのWebkit限定ですが、フォントのアンチエイリアスを変更する方法について、ブログを書きたいと思います。 Special Thanks to http://flic.kr/p/cd6XCL フォントのAnti Aliasを変更する Android - 4.4 KitKatのサイトを見ていて気づいたのですが、 -webkit-font-smoothingというCSSが存在するようです。使い方は以下の通りです。 -webkit-font-smoothing: antialiased; このCSSは、W3Cの仕様にはありませんが、フォントのアンチエイリアスを指定できるCSSで、Webkit系のブラウザで利用することができます。 以下の値が指定できます。 値 意味