Agnist.codeタイトルの構成で立ち上げていたWordPressをiPhoneで見たら、SafariでもChromeでも表示されず、もしやと思いhttpでアクセスしたら見れたので、初めて使うLet’sEncrypt(SSL)…
[CSS]アニメーションのエフェクトが抜群にかっこいい、レスポンシブ用ナビゲーションのデモ -Off Canvas Menu
[CSS]アニメーションのエフェクトが抜群にかっこいい、レスポンシブ用ナビゲーションのデモ -Off Canvas Menu
Code Beautifier
Code Layout Compression (code layout): Custom template Options Preserve CSS Sort Selectors (caution) Sort Properties Regroup selectors Optimise shorthands Compress colors Compress font-weight Lowercase selectors Case for properties: None Lowercase Uppercase Remove unnecessary backslashes Remove last ; Discard invalid properties Add timestamp Output as file
CSSやJavaScriptの改行やインデントを削除して圧縮したり、元に戻したりするツールまとめ
年末に、オンラインブックマークでたまってしまいがちな「あとで読む」とか、「一応保存」とかを整理することにしました。 そしたら、同じような内容や機能のWebサービスのページをいくつもブクマしてることに気づいてしまいました。 そこで、似たようなものは自ブログにまとめて少しブクマ数をスッキリさせることにします。 で、実はあんまり使ってないけどいざって時にあると助かる「スクリプトの圧縮＆デコードツール」をまとめてみたいと思います。 まずは圧縮編から。 ファイルの改行やインデントを無くしたりしてファイルサイズを軽くするツール 私がやるような規模の案件ではまず使うことはないのだけど、サイト規模が大きくなるとこういう配慮も必要なのかも。 やってることはどのサイトでも一緒なので、各自見やすい・使いやすいと感じるやつを選んでいただければよろしいかと。 CSS編 CSS Compressor 圧縮度合いを4段
WebデザイナーもGit使うといいよって話 | Cherry Pie Web
※この記事では「Webデザイナー」は、「ノンプログラマ」の意味で使っています。 psd、ai などの材料データの管理ではなく、サーバーにアップするファイルの管理の話です。 サルでもわかるといわれても、やっぱりわからない・・・ Web制作をやっている人は、少なからずバージョン管理システムの話を聞いたことがあると思います。 特にGit（ギット）っていうのは、内容まで知らなくても名前くらいは聞いたことがありますよね。 で、ネット上ではバージョン管理システムのメリットに関するブログ記事なんかもたくさんあって、変更履歴をたどれるとか、複数人で同じファイルを修正したりといった時のトラブルに対応できるとか、なんか便利そうだなーとは思っていたわけですが、ずーっと導入は見送ってきました。 その理由は・・・ 「Git入門」とか書いてある記事を読んでも導入方法が書いてあるだけで、実際に使うシチュエーションが思い
BASE（ベイス） | ネットショップを無料で簡単に作成
BASE、 1番選ばれています個人・スモールチームの「やってみたい」がすぐ叶う。 小さくはじめて売上ひろがる、 ネットショップ作成サービスなら、BASE。
Gitでバージョン管理しよう（ひとりGit編）
Gitでバージョン管理しよう（ひとりGit編） まったくバージョン管理したことない人にお送りする、ひとりGit入門記事です。 というか書いている人が超初心者なので、すごく間違えていることろがあるかもしれませんがご了承ください。 投稿日2012年10月24日 更新日2012年10月28日 なぜバージョン管理システムが必要なのか たとえば「index.html」というファイルを大幅に修正したかったとします。 もとの「index.html」は残しておきたいので、「index1.html」とリネームしてみたり、もしくはバックアップフォルダにコピーするなどの方法が考えられます。 しかし、それだと後で見返したときに何のファイルどんな修正をしたファイルなのかわからないですよね。 そこで登場するのがバージョン管理システムなわけです。 初期設定 バージョン管理を始める前にGitの初期設定をしましょう。 まず
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
ページ内をスムーズに移動する超軽量スクリプト
<a name="top" href="#footer">下に移動</a> [コンテンツ] <a href="#footer">下に移動</a> [コンテンツ] <a name="footer" href="#top">上に移動</a> リンク先を#footerに設定すると「name="footer"」と書かれたリンクまで移動するという感じになります。 この例の場合、上2つのリンクは一番下のリンクまで、一番下のリンクは一番上のリンクまで移動します。 難点といえば、リンクがあるところにしか移動できない点でしょうか。 ページの量が多くなったときの目次など様々な場面でに使えそうです。 name属性はweb標準ではない ところで、リンクでのname属性はweb標準ではありません。ただ、このままでも問題なく動きます。 将来的なことも考えてweb標準に則りたいという場合は、nameの代わりにidを使い
2014年のリセットCSSとレスポンシブ対応の初期CSS
スマホ・タブレット対応、レスポンシブ対応が一般的な現在、CSSの扱いは非常に重要になっているように感じています。今回こそはと思ってサイト制作を始めても気が付いたらグチャグチャなCSS。 2014年もCSSを上手く綺麗に扱うのに苦労しそうです。そこで、ここではリセットCSSに合わせて、効率良くスマートに扱うための初期CSS、HTMLを大公開。 年末ということで、過去のデータを整理してみました。 個人的な資産ですが、まぁ何と言うか誰かの役に立てたら幸いです。紹介するCSSは大きく分けて下記の4つです。 2014年もきっと大活躍のリセットCSS よく使うCSS3 WordPress用の初期CSS レスポンシブ対応、どんなサイトでも使えるレイアウト早組CSS リセットCSSというか、もはやフレームワークです。 2014年のリセットCSS 色々なリセットCSSが出回っていますが、個人的には下記で十分
ヒアリング事項：Webデザイン・Web制作の「要件定義」｜ワークフロー｜BACKSTAGE
Webの役割は？ ・企業宣伝/特化した商品の告知/情報提供/販売/… Webでアピールしたいことは？ ・競合他社と差別化できることは？ ・Web上では言わずにおきたいことは？(ex.価格） ターゲットユーザーは？ モバイル（スマホ）対応？
Home - Amaze
Social commerce solutions converting followers to customers, passions projects into thriving businesses.
Microdata を使ってみよう。サンプルソースで学ぶ Microdata
HTML5 Advent Calendar 2012、7日目の記事として、Microdata （マイクロデータ） に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。 HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね… さて、タイトルの通りなのですが、HTML Microdata （マイクロデータ） について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく （文末にまとめてあります） として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど
Happy Cog Studios: web design, consulting & publishing
> 16; g = color >> 8 & 255; b = color & 255; } hsp = Math.sqrt( 0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b) ); return hsp > 127.5 }, visibleThemedAreas: 0, footerInViewport: false, lightBackground: true, activeFilter: 1 }" x-init=" lightBackground = lightOrDark(currentTheme.backgroundColor), $watch('currentTheme', (value) => { styleTheme(currentTheme), lightBackground = lightOrDark(current
Web Design North Wales | North Wales website design
Stuff & Nonsense We use the power of great design to captivate customers and benefit businesses Product, website, and user experience design I’m Andy Clarke and for over 25 years, I’ve led the web industry towards accessible, engaging, and impactful designs using innovative applications of the latest technologies. I’ve worked with businesses of all sizes and industries to achieve their goals throu
dConstruct 2014, September 5th — Living With The Network
dConstruct 2014 is a one-day gathering of supersmart people who will provoke, entertain, and stimulate you with their thoughts on this year’s theme of “Living With The Network.” The conference will take place in the lavish location of The Brighton Dome in our seaside town on the south coast of England. Find out more…
320 and Up | The 'tiny screen first' responsive boilerplate
Web design North Wales. Digital products and websites. | Stuff & Nonsense OUR DESIGNS DELIVER WE KNOW OUR STUFF AND WE’RE FUN TO WORK WITH. WE’RE STUFF & NONSENSE Easter egg theme 25 years web design experience in North Wales 25 years web design experience. No joke 25 YEARS’ WEB DESIGN EXPERIENCE. NO JOKE I help product and website owners captivate their customers by delivering distinctive and ori
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
Instant Blueprint - Create a web project framework in seconds.
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.
時間の節約になるWeb制作関連ツール 12+1
2013年4月2日 便利ツール Webサイトを作る際に、じっくり時間をかけたい作業とそうでないものがあると思います。細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう！今回は私がいつも使っているものとSMASHING MAGAZINEで紹介されていて「おぉっ！」と思ったWeb制作に関する便利ツールを紹介します。 ↑私が10年以上利用している会計ソフト！ Photoshopテンプレート まずは私Mana作のPhotoshop用テンプレート。グリッドなんぞ入れてます。グレーのエリアがファーストビュー。結構昔に作ってずっと使ってる感じです。 » Photoshopテンプレートをダウンロードする Instant Blueprint http://instantblueprint.com/ Webサイトを作る際の最初のステップを楽にしてくれるサイト。CSS, images, JSな
HTML5の仕様が更新、at riskを断捨離(色々消えた)
HTML5の仕様が4月29日付けで更新されていたのでその内容をざっくり報告します。 at riskがスッキリ これから仕様が変更になってなくなっちゃうかもしれないよという情報を記したat riskのセクションがかなりすっきりしてます。 The following features are at risk and may be removed due to lack of implementation. the DataCue interface; <input type=time>; the new ruby model. HTML5 今までここに入ってたアウトライン・アルゴリズムやアプリケーション・キャッシュなんかの仕様(とそれを支持する人)は、まさか消えてなくなったりしないよね…？と長いことジャンプの後半に載っているマンガのように毎日震えて眠っていたわけですが、今回晴れて死神の軛から放
WebフォントのCSS指定2014年度版とこれまでの歩み
比べる。 WEBCRE8.jpとその仲間達で、web制作における「選択」に おいて最良だと思われるものを考察していくカテゴリです。 最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない部分もあると思うんで何か指摘があったらがんがんツッコんでくださいw @font-faceルール @font-faceルールは、Webフォントの名称と読み込むフォントファイルを関連づける@ルールの一つです。その他、どのウェイトやスタイルに対応するかも指定できます。 しかしWebフォントの扱いはブラウザ側のフォントファイルの対応状況、フォントファイル自体の進化によって変遷してきました。 Bulletproof Syntax これまでWebフォ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Optimizer (CSS最適化ツール)-CSS TIPS
Webサイトデザイン・Webサイト制作の「企画・デザイン・制作・保守監理｜ワークフロー｜BACKSTAGE
http://blog.e-riverstyle.com/2011/01/rolewaiaria.html
http://www.hp-stylelink.com/news/2013/10/20131001.php