HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
WebデザイナーのためのVue.js事始め
2018年4月18日 JavaScript, Vue.js Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ ↑私が10年以上利用している会計ソフト！ Vue.jsの使い方 Vue.jsは公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScriptで
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
Mojik
Mojikという、ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリを公開しました。いまのところ、以下のパターンでの「アキ」を調整できます。 連続する約物のアキ 行頭の始め括弧のアキ 欧文間のアキ Mojik.compose()メソッドの引数にCSSセレクターを渡すと、マッチする要素から上記に該当する箇所を検出し、それぞれマークアップが挿入されるので、CSSでアキ量を調整します。以下のページに実際に動いているデモがあるので、ぜひ見てみてください。 Mojikデモ ウェブページの本文やタイトルなどで使われることを想定しているので、HTMLタグがあっても問題なく動作することは必須条件でした。基本的に、まずHTML文字列をテキストとタグに分けて、正規表現でテキストの検索を繰り返す、という方法を採っています。ここらへんはkotarok/jQuery.waokonなど
2015年版: ホームアイコンの指定方法まとめ - console.lealog();
調べては忘れを毎回繰り返すのもなんだかなーと思ったので、まとめておきます。 ちなみに、iOS/Androidのことしか書きません。 iOSは5以上、Androidは4以上のOSバージョンを対象としてます。 OperaとかMetroとかFireFoxとかは知りません！もっと頑張ってください！ あくまでこの記事を投稿した時点でのものです！ 全般 拡張子はpng 勝手に角丸になるので四角のまま書き出してOK Safari(iOS) いちおう公式のドキュメントはこちら。 Configuring Web Applications で、実は指定方法が2つありまして、 HTMLで指定する方法(おそらく一般的) ドキュメントルートに画像を配置する方法 以下それぞれ。 HTMLで指定する場合 <link rel="apple-touch-icon" href="/path/to/icon.png"> ってr
レスポンシブWebデザインに対応した「jquery.heightLine.js」
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
Googleマップをイラストマップみたいにしたい。
サイト制作において、アクセスマップなどの地図の表示はどうしてますか？「Google Maps API」を利用したり、ちょっとデザインにこだわりたい時にはイラストに描き起こしたりしてるんじゃないでしょうか。 今回は、Google マップをちょいとカスタマイズすれば、まるでイラストマップみたいに見せることができるんだぜ！というお話です。 記事中に出てくる画像は2012.3現在のもののため、現在のGoogle Maps APIでの表示とは異なりますので注意です…X(。 リンク切れしていたところを、なるべく近い内容の存在するページにリンクし直しました（2015.7.20追記）。 まずはしっかり抑えておきたい「Google Maps APIの基本」から。 基本をすっ飛ばして早速カスタマイズしたい方はこちら↓。 Google Maps APIの基本 Google マップはGoogle API キーを発
あなたの知らないレスポンシブWebデザインカンプ制作で使えるPhotoshopの新機能
あなたの知らないレスポンシブWebデザインカンプ制作で使えるPhotoshopの新機能：無料でCreative Cloudを使い倒せ（15）（1/2 ページ） レスポンシブなWebレイアウトをコードを書かずに作れるツール「Edge Reflow」とPhotoshopの連携機能の特徴や使いどころを解説する。 前回の「Node.jsで動くGenerator for Photoshopなら画像アセットが楽チン書き出しできる！」では、Generator for Photoshop（以下、Generator）を利用した画像アセット書き出しを紹介した。今回はもう1つのフィーチャーとしてAdobe Edge Reflow CC（以下、Reflow）との連携を紹介しよう。 レスポンシブなWebレイアウトをコードを書かずに作れる「Edge Reflow」とは、 Reflowは、「ディレクター、営業さん必見！
JavaScriptとjQueryで文字サイズ・行高・行取り・見出し行数から見出しのマージンを自動計算
ワタクシがwebデザイン上一番気にするのが見出しのマージン。いつもその時の感覚で決めるが、しっくり来ないことが多々ある。何か巧い方法が無いものかと『文字の組方ルールブック ヨコ組編』の「見出しの構造と組方」を眺めていて、自動計算出来るかもと思いjQueryメインに適宜JavaScriptを組み込みスクリプトなるものを書いてみた。 2013.5.14追記デモページの内部に書き込んでいたこのスクリプトを外部ファイル化。 上下マージン比1:1時と8:5時をボタンで切り替えられるデモページを追加。 参照日本エディタースクール編. 文字の組方ルールブック ヨコ組編. 本エディタースクール, 2001 JavaScript：文字を数値に変換する方法その２ | THE HAM MEDIA BLOG line-height の値には単位なしが良いとされる理由 - lucky bag Can I use r
AssetThumbnailMagick プラグインでサムネイルあれこれ。 | Junnama Online
AssetThumbnailMagick プラグインでサムネイルあれこれ。 公開日 : 2013-03-07 21:01:34 先週の土曜日に行ってきたんですよ、ええ。 第10回リクリセミナー「Webデザイントレンド 大阪版」は無事終了しました-Re:Creator's Kansai （リクリ） 今やイラレもフォトショもMacに入れてなくて自分で画像をあれこれすることもまったく無くなっちゃってるんですが(一応ベジェ扱えるんだぜこれでも)、Web制作/CMSの会社経営してるんだからデザインのお勉強だって必要ですよね。 で、冒頭あたりで、「円窓切り抜き(画像を丸く切り抜く)」ってのが取り上げられていたので、会場でコーディング始めちゃってアップしました。お前話し聞いてねーだろ(いや、ちゃんと聞いてましたよ、社内イントラにつぶやきながら) mt-plugin-asset-thumbnail-mag
ウェブサイトのRetina化 | drops - onotakehiko.com
iPhone 4からはじまり新しいiPadことiPad 3rd、そしてもはや確定的とも思われる次期MacBook ProのRetina化。現状でウェブサイトをRetina化する効率的な方法を考えると、 “Retina Images” を使うのが最適解な気がしている。 Retina画像を対応端末に表示させる場合、 imgタグによる設置 <img src="foo@2x.png" width="100" height="100" alt="bar"> background-imageによる設置方法 <style> #foo { width: 100px; height: 100px; background: url(bar.png) no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #foo
Facebook,Twitter,はてな,mixiのソーシャルボタンをオリジナルにしたいのです
FacebookやらTwitterやらはてなやらmixiやら何やらソーシャルボタン付けたいけれど、 角丸とかフォントとか大きさがまちまちだし幅とるしカウント数いらないし… 記事の下とかにあるならいいけど、 これが記事の上にあったりすると微妙に嬉しくない。 なんとか、 って具合に、アイコンだけ並べておけないだろうか。と思ったわけです。 分けて書こうと思ったけど、あんまりマメ子じゃなくてすぐ忘れるので、一気にダーッとメモします。 ≫Facebookのシェアをスマートに！ ≫ボタンをオリジナル（自作）にする簡単なカスタマイズ ≫FacebookシェアのオリジナルボタンをMovabletypeに入れる。 ≫Facebookに投稿するコンテンツの見せ方にこだわる ≫OGPのmetaタグをMovableTypeに入れてみる ≫テストユーザーで投稿テストしてみる ≫Twitterのボタンをオリジナルにす
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家） HTMLコーディングが3倍速くなる？「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ - かちびと.net
Webフォントに関して調べ物をしたので 個人的なメモ。少し利用頻度があがって 来たので探しやすいようにまとめておき ます。まだちょっと使い慣れてないので もう少し勉強しないとダメですね・・ スマフォ向けのリソースもあります。 というわけでWebフォントに関するメモです。以前触りだけしか書かなかったのでもう少し深く調べておこうと思い記事にしました。ので、過去の記事と結構重複します。 最低限の知識 最低限かどうか分かりませんけどｗ 少し不明瞭な点もありますので間違いがあればご指摘頂けると幸いです。 ライセンス まずライセンスですが、通常、Webフォントとして利用するには当然フォントの著作者次第になります。 Webフォントとして使うにはサーバーにフォントファイルをアップロードしてcssでファイルのパスを指定して利用するので、フォントファイルが誰でも手に入れられてしまう事になります。（アイコンなん
ケータイサイト制作前にコーダーが確認しておきたいところ │ これからゆっくり考L +α
モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない！」という項目は以下の6つ ・xhtml？html？ ・文字コードは？ ・tableは使ってOK？ ・絵文字は？ ・カタカナの扱いは？半角？全角？ ・VGA対応は？ xhtml？html？ 最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。 昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。 文字コードは？ 携帯サイトといったらSh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Brackets - Web デザインを認識する最新のオープンソースコードエディター
we-love-social
WordPress › Error
https://design-spice.com/2012/06/13/responsive-web-design-image/