Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
JavaScript/フォーム/自動計算フォームAタイプ（消費税あり） - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 var tax = 10; // 消費税率 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.
Initializr - HTML5 project - template
Wix is a top-ranked website builder, but its value for money is a mixed bag. Wix offers a range of pricing plans from $17 to $159 per month, billed annually. The prices increased in May 2024, with the entry-level plan… Read More »Wix Pricing 2024: How To Get The Best Deal Wix reigns supreme as our top website builder for 2024, outshining other platforms. With its unparalleled features, an expansiv
もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法
こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
WordPressテーマ制作チュートリアル
この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない
WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方
WordPressを使い始めた頃は、テンプレート階層、テンプレートファイルの上手な使い方などは、全く考えずに Webサイトを作ってました。 いまではもっと効率的に、もっとスマートにサイトを構築できるようになったかも！そのためにちょっと覚えておきたい、テンプレートファイルについてのあれこれをご紹介します。 WordPress というと、ブログ構築のための CMS（コンテンツマネージメントシステム）というイメージが強いですけど、一般的な Webサイトを作るの時にもとっても便利です。私も仕事で Webサイトを作る時に、WordPress で作成することがとても多いです。 WordPress はバージョンも 3.0 になって、カスタム投稿タイプやカスタムメニューなど、さらに CMS としても充実してきたように思います。 ブログと違って一般的な Webサイトは、そのサイトによって仕様が様々です。コン
初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
HTML5でつまずきやすいasideとsectionの使い方
HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！ 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
CSS で簡単に上下中央揃えを実現する
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Zen-Coding、0.7のすすめ
Zen-Coding、0.7のすすめ 2012-07-01 / 2013-02-27 HTML/CSSのコーディング速度が3倍上がる、といわれるZen-Coding。 使いこなしてコーディング速度が3倍になっていますか？ SassとかLessとか流行ってる中、あえてZen-Codingを紹介します。 (Zen-Codingの現在のバージョンは0.7です。 古いバージョンを使用している方はアップデートをお勧めします。) 追記 Zen-Codingとは Zen-Codingは様々なエディタに対応しており、Webデザイナーでも導入が容易なのが魅力です。 エディタのサポートは、3つの分類に分かれます。 公式サポート Aptana/Zend Studio/Eclipse (Win/Mac/Linux) TextMate (Mac) Coda (Mac) Espresso (Mac) Komodo E
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
60 Web Design Galleries for Design Inspiration « AcrisDesign – Web Design Resources and Inspiration
CSS3だけで作るボタンデザインいろいろ
5509.me
css-lecture.com