SVGデータをCSSのbackground-image向けのBase64コードにかんたん変換ツール | 大石制作ブログ
大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed SVG、すっかりどこでも見かけるようになりましたね。近年、僕が仕事で作るサイトでもロゴや主要なアイコン画像を中心に、積極的に使うようになりました。 ファイルサイズ、解像度、動的な扱いやすさ等で、これまでのJPEG、PNG、GIFに比べたメリットの多いSVGだけど、とにかく取扱がめんどうに感じるのが正直なところです。 Bootstrap3→4への変化でCSSへのインラインSVG埋め込みに変わった箇所をみつけた HTML/CSS/JSフレームワークのBootstrapのバージョン3と4のコードを見比べてたとき、メニューボタンのアイコン( こんなの→ )がバージョン3まで
Q＆Aで振り返る「Back to Basics」 CSS 2015.08.30
The document introduces Web Components and promotes trying them. It provides examples of Web Components like <x-calendar> and <x-flipbox> that can be used to build reusable custom elements. It also describes how to create a Web Component using Polymer and shows an example <x-like> component for liking posts. The document encourages developing with Web Components as it makes front-end development m
iPhone6とiPhone6 Plusのレスポンシブデザインを考える。サイズ＆解像度比較とメディアクエリー | | 大阪のWeb制作屋Lavison
By Masaki 2014.09.26 WEB iPhone6とiPhone6 Plusのレスポンシブデザインを考える。サイズ＆解像度比較とメディアクエリー こんにちは、masakiです。 iPhone6、出ましたね～。 iPhone6 Plusはちょっと大き過ぎなので個人的にNGです。あれは巨人用のスマホです。（嘘です） iPhone6 Plusの操作性とレイアウトについて 注目して欲しいのはiPhone6 Plusはタブレットではなく、「スマートフォン」の位置づけであるということです。 Plusを片手で操作するにはやはり難があり、タップしようにも指が届かないのです。大きすぎて、、 それでも片手親指で操作する方は実際にいます。そうした時にメニューボタンなど良く触れるボタンなどを上部に置くのは酷いUI。 こういった巨大なスマホ（もはやスマートではないが…）がPlusを筆頭にこれからどんど
これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ
作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 １．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー ３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ
Dreameaverをもっと便利に！ カスタマイズ＆拡張機能をご紹介 - Webデザイン初心者向けのあれこれ
こんにちは！ もう年の瀬でかなり寒くなってきました。寒いと手がかじかんで上手く動かず、作業スピードが落ちてしまいますよね……。 少しでも作業効率を上げるために手を温めるのもいいですが、普段使っているDreameaverをカスタマイズするというのもいかがでしょう？ ちょっと手を加えるだけで驚くほど便利になっちゃいますよ。 なお今回はDwのconfigurationファイルの書き変えを行うものもあるため、カスタマイズ前にファイルのバックアップを必ず取ってください。 ・CSSのコードヒントの順番を変える CSSで横幅を指定する時、「wi」と入力しコードヒントからwidthと打つつもりが、 ↑のようにwidowsという何に使うんだか分からないものを誤入力……なんて経験ありませんか？ そんな誤入力を防ぐ為に、コードヒントの順番を変えてしまう方法があります。 Program Filesから Adobe
個人事業主必見！知って得する16種類の所得控除まとめ｜確定申告｜経営ハッカー
個人事業主が支払うのは所得税、住民税、個人事業税で、税額は毎年2月から3月にかけて行われる確定申告によって決まります。 消費税については開業後2年間は免除で、3年目以降は課税売上1,000万円以上になると消費税の納付義務が生じます。 そこで注目したいのが控除です。 今回は、個人事業主は確定申告でどのような控除を受けられるのかについて解説します。 控除とは 所得から一定金額を差し引くことを控除といいます。 所得税は、事業所得を含むすべての収入から必要経費等を差し引いた「課税所得」に対して税率をかけた金額です。 「税金を控除する」ということは、「所得から一定金額を控除して税率をかける課税所得を少なくする」ということです。 税負担を公平化するためのさまざまな控除項目が用意されています。 控除できる税金 所得税や住民税の算出にかかわる所得控除には以下のような項目があります。 基礎控除 すべての納税
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス
実装は簡単です。 既存のページにもこれなら簡単に組み込めると思います。 HTML パララックススクロール用の背景を配置するために先頭に空のdiv要素を加え、あとのコンテンツは普通に実装します。 <div class="background"></div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1> <h2 class="pageSubTitle">見出しLv2</h2> <p>パラグラフ</p> <p>パラグラフ</p> <p>パラグラフ</p> </div> <div class="slogan"> <h2 class="sloganTitle"> Parallax scrolling </h2> </div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1>
指定した縦幅からはみ出たテキストを...にするjQueryプラグイン - jsdo.it - Share JavaScript, HTML5 and CSS
はい、パクリスペクトです。 height を設定してる要素を指定してやると、オーバーした文字が消えて、文字列の末尾に「...」が表示されます。 文字をJavaScriptでへつっていってるので、元のデータを取得するときは、 $.vEllipsis('#long_text').getOriginalText(); な感じで取得してくだしあ。 ちなみに、これ（下記URL）使ってるんだけど、MITと書いてある割にはコード中にライセンス表記がなくて･･･、こんなときどんな顔すればいいかわからないの。。 http://jqueryboilerplate.com/ ↓紹介記事） http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-development-jqueryboilerplate.html /
ノートのように罫線(下線)を引くデザインの作り方 [ホームページ作成] All About
ノートのように各行に下線を引くデザインを作る方法 (画像使用) ノートのように、各行に下線を引くデザインを作ってみましょう。スタイルシートと画像を使うことで、下記のようにノートっぽく見えるデザインが簡単に作れます。 2009年7月13日 ■ノートのような罫線を引く 「下線を引く」というと、text-decorationプロパティに値「underline」を指定したり、border-bottomプロパティを使ったりする方法を思い浮かべる方々も多いでしょう。 しかし、text-decorationプロパティを使う方法では、文字のない箇所には下線が引けないため、あまりノートのようには見えません。 また、border-bottomプロパティを使う方法では、ボックスの最下部に下線が引かれるだけで「各行」には引かれないため、まったくノートのようには見えません。 ここでは、スタイルシートで下線を引いてい
![ノートのように罫線(下線)を引くデザインの作り方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe857d3f84d4bbeaeb3be938528d9c953a8f6e56/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F4%2F0%2F0%2F3%2F201609241417%2Ftopimg_original.png)
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
ヘッダは上部固定で、フッタは最下部にするスタイルシート、レスポンシブにも対応！ | コリス
ナビゲーションを配置したヘッダはスクロールしても常に上部に固定されており、フッタはコンテンツの量が少なくても最下部に配置されるページを実装するスタイルシートを紹介します。 Sticky footer with fixed navbar コンテンツが少なくてもフッタは最下部に、レスポンシブ対応で！ デモ Bootstrapに素晴らしいデモがあったので、そこからデモを紹介します。 デモでは、ナビゲーションがあるヘッダはスクロールしても常に上部に固定されています。 デモのコンテンツ量が少ないため、狭い表示エリアで。 デモページ：幅780pxで表示 実装 実装はデモを必要最小限にしたもので、紹介します。 HTML 上からナビゲーションのあるヘッダ、コンテンツ、フッタの順で、ヘッダとコンテンツはdivで内包し、終わりにコンテンツ量が少ない時用にpushのdivを配置します。 <body> <div
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
Androidの判別
昨今、スマートフォンサイトの仕事が増えているかと思います。 特に「メディアクエリー」なんて言葉がちょっとした流行だと思います。 メディアクエリーは簡単に言えば解像度に応じて、適合したレイアウトにCSSを切り替える様な機能のことを言うのですが、はっきり言って作るのがとても大変です。 なぜ大変かというと、 解像度に合わせたデザインを起こす労力が不足しがち 切り替わったデザインがお互いに成立するように設計できる人材が少ない 複雑な設計をするため開発後期まで続く修正対応に対応させるのが難しい ざっと上げても、このようなハードルが出てきます。 料金的にも2～5倍くらいの制作費とかを貰わないと割にあわないんじゃないでしょうか？ ちょっと話がそれましたが、それとは別に例えばAndroidだけとっても幾つかの種類があります。 大雑把に分類をすると以下のようになります。 スマートフォン Android 1.
html999 » 便利！ブラウザ+OS別にCSSでクラスを指定できる（CSS Browser Selector）
CSSでクラスを指定するだけで、かなり細かくOS+ブラウザごとの書き分けができるJavaScript「CSS Browser Selector」（作者：Rafael Lima氏）。 ひさしぶりにサイトを見るとアップデートされてました！ （詳細及び最新情報はCSS Browser Selectorのサイト（英語）をご覧下さい。） 使用方法 まず、CSS Browser Selectorのサイト（の「DOWNLOAD」の項目にあるJSのリンク）からjsファイルをダウンロードしてhtmlの<head>内にリンクを追加します。 <script src="css_browser_selector.js" type="text/javascript"></script> ブラウザやOSを指定するクラス名が用意されているので、そのクラス名を追加したセレクタにCSSを定義します。 ■例：WindowsとM
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！
俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ！ 指定方法は下にあるぞ！ 新規でサイトを制作するのに基本のフォント指定を持っていなかったので 色々調べたり、このブログのフォント指定を変更してみたりしたら 実は Arial より Verdana のほうが見やすいことがわかってしまった。 さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために 作ったフォントだ！Verdana - Wikipedia フォント周りのオススメの指定追記記事により良い指定を載せたのでこちらは掲載終了しました。 font-family めっちゃ長い！何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。 だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。 余談だけどfont-size(文字サイズ)とlin
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
『モバイル時代におけるCSSの設計と実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
jQueryでスクロールすると上部に固定されるナビゲーション
Posted: 2012.02.21 / Category: javascript / Tag: jQuery グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="artic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://stackstock.net/archives/2012/
