愛されマークアップエンジニアになろう
こんにちは。 鮭はあたまの部分が一番美味しいと思っているサーモンです。「えーーっっ！！」ってよく言われるんですけど、うちでは塩焼きにすると、ほっぺたの部分とか取り合いですよ？ サーモンだって食べ物以外のこと考える いやはや、最近ね、とあるお国に出したというコーディングのデータを頂くことがあったんですけど、ちょっとびっくりしちゃったんです。コーディングルールも無視とか、デザインが思いっきり再現されてないとか…もろもろ..ね。 日本でも激安コーディングとか、さらに激安な海外でのコーディングとかあって、「もうマークアップじゃやっていけないんじゃない？」なんて話もチラホラと聞こえて来たりするじゃないですか？ 何だかすごく気になったので、周りのみんなに聞いてみました。 そしたら 「あ〜…(以下顔が物語る)」 とか 「何度も直しを繰り返したので自分でやったほうが早かった」 とか 「お安かったのですが結
ベンダープレフィックスの順序｜Web Design KOJIKA17
CSS3を扱う上でベンダープレフィックスの話題は外せません。 そのベンダープレフィックスの順序について書いてみます。 ベンダープレフィックスとは ベンダープレフィックス(vendor prefix)は、ブラウザが独自の拡張機能を実装、勧告候補前の仕様を先行実装する場合に、 将来的に仕様が変更されるリスクに備えて、プロパティや値につけられる識別子のことです。 その識別子は、ベンダー識別子(vendor identifier)によってブラウザの種類が付けられています。 主要なブラウザのベンダープレフィックス -webkit- Google Chrome、Safari、(Opera) -moz- Firefox -ms- Internet Explorer -o- Opera ただしCSS3などの仕様が勧告候補になった場合には、ブラウザベンダー側がベンダープレフィックスを外すことが推奨されていま
Macユーザの私がWeb制作を行う上で使用しているアプリ・ツール・サービス・ブックマークレットなどのまとめ
昨年より、5年間やっていたDTPの部署からWeb制作の担当と相成った私。 正直、まだまだお勉強中のWeb制作なのですが、ちょいとここいらで今自分が使用しているアプリ・ツール・サービスなどをまとめておこうと思います。 デザインに使用しているアプリ まずはデザインに使用しているアプリ。 Adobe Photoshop・Illustrator デザインに使用しているのはAdobeのPhotoshopとIllustrator。（CS5） DTPのころから使っているので非常に慣れているのはいいのですが、おかげさまで新しい環境に飛び込む勇気がなく、いつか覚えようと思っているFireworksに手を出す時間がございません。 まぁそのうち…うん…。 どんな風にIllustratorやPhotoshopを使用しているのかは、以下の記事をごらんくだしあ。 これが出来れば中級者！Illustrator初心者のた
備忘録：LINEで送るボタンの設置方法。aタグにはターゲット指定を。
最近公式にリリースされたLINEで送るボタンについてちょっと仕事で調べる機会があったので今後のためにメモします。 公式の設置方法｜LINEで送るボタン にて記述例をコピペしたところ何やら変な動き？ 記事上でLINEで送るボタンを押すと当然アプリが立ち上がるんですが、 LINEでの共有が終わったあとブラウザに戻ると、そこにはLINEのサイトが開かれていました。 まぁ何も不思議なことではなくて、公式にも ボタンタップ後、LINEが起動する前にWebブラウザが表示されます。 とあるようにそういう仕様なので、LINEで送るボタンのaタグにtarget=”_blank”を指定してあげればとりあえずはOKです。 記述例 Webサイトの場合 <a href="http://line.naver.jp/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahtt
イメージファイルをzipにしてアップロードするとCSSスプライト用の画像とCSSを自動生成するツール・SpriteMachine
CSSスプライト用の画像とCSSを 自動で生成してくれる、という Webツールのご紹介。作るのは 結構面倒なのでこうして自動化 してくれると楽で助かりますね。 CSSスプライトで使いたい画像を1つのフォルダにしてZIPにしてアップロードすると即座に1枚の画像にし、CSSも発行してくれます。 ZIPをドラッグ&ドロップすれば即座にCSSスプライト用の画像とCSSが入ったファイルをDLします。数によるかもしれませんけど一瞬で出来るのは凄いです。 img.spritemachine_foo { width: 450px; height: 72px; background: url(sprite.png) 0px 0px no-repeat; } img.spritemachine_bar { width: 16px; height: 16px; background: url(sprite.pn
ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！
HTML5のタグは108つある って話は以前このブログでしましたねー。なんの偶然か、108っていう数字には厨二心をくすぐられますｗ 何か意味があるような気がしてなりませんね★ HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― 現在HTML5は最終草案の状態です。この108と言う美しい数字を崩す可能性のある要素として、以前から仕様から外れるかもしれないという話のあったhgroup、Editor’s Draftから追加される可能性のあったdialogやdata、そして新しく追加しようという話の持ち上がったpictureやmainなどがあります。 ただとりあえずHTML5.0のうちは変化することは多分無さそうです。この辺のことはこのAdvent Calendarの初日の記事、覚え書き＠kazuhi.to: 巷（何処）で話題のmain
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
Webサイトの作り方のまとめ！トップページ完成まで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3（+α）回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン／おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道：サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines（埋め込みタイムライン） トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す
CSSセレクタの効率的、効果的な使い方をいろいろ
CSSのセレクタって簡単そうで奥が深いと思います。ということで、個人的に使っている方法や意外な使い方などを紹介しますので参考になればと思います。 効率的なセレクタの使い方と読み込み速度を考えたときに効果的なセレクタの使い方に分けて紹介していきます。 CSSセレクタの効率的な使い方 同じ内容ならまとめる 例えばこんなCSSがあります。 h1 { color: black; } p { color: black; } カンマで区切ってまとめることができます。 h1, p { color: black; } !importantがある場合 続いて、!importantがある場合。 h1, h2, h3 { font-weight: normal; } a strong { font-weight: normal !important; } strong { font-style: italic;
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！
2012/10/18：画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか！)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね！ スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数！…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか？ そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ！という方には、とても便利だと思います！ display:
【保存版】やるとやらないでは大違い！Facebookいいね！ボタンを最適化する「OGP」設定方法まとめ- SMMLab（ソーシャルメディアマーケティングラボ）
【保存版】やるとやらないでは大違い！Facebookいいね！ボタンを最適化する「OGP」設定方法まとめ Facebookのソーシャルプラグイン 「いいね！」ボタンの最適化に必須である「OGP（Open Graph Protocol）」について、その内容と具体的な設定方法をご紹介します。 こんにちは、アライドアーキテクツ株式会社 制作部 プロデューサーの久保田です。 突然ですが、あなたのサイトの「いいね！ボタン」、最適化されていますか？ 「Like Button（いいね！ボタン）」は、Facebookにログインしているユーザーが「いいね！」すると、Facebookのタイムライン上にタイトルと画像、説明が表示されるソーシャルプラグインの1種です。オウンドメディアのソーシャル化にあたり、最もよく利用されており、またユーザーにも馴染みがあるものでしょう。そして、この「Like Button」を通じ
[HTML5 入門]実用を意識した最小単位からの文書構造チュートリアル
文書構造って難しいですよね コーディングしていたら迷う事ってたくさんありますよね。「これは見出しなのかな」「この段落はどこまで段落なんだろう」「検索バーはどのタグで囲めばいいの？」等など、判断に詰まることはいくらでもあります。そしてその判断の迷路を抜け出た後も、ふと「このマークアップで本当に合ってんのかな」と再び迷いに陥ることも。 エレメントの役割とタグの用途の正確な理解 コーディングしているときに何故迷うか。これは、 それぞれのパーツがそのサイト内にどういう役割で置かれているかをはっきりと定義できていない 各タグの用途を理解できていない このいずれか、または両方が出来ていないから起きる問題だと思います。エレメントの役割とタグの用途、この二つがはっきりしていればコーディングに迷う事はありません。…まあ(他にも納得の行かない組織ルールとかSEOを考慮した記述等があって)それは理想の話なんです
![[HTML5 入門]実用を意識した最小単位からの文書構造チュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/913d9625c96461318e055dbb38b3d26c92683092/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F10%2Fintroduction-to-html5-150x150.png)
デフォルトスタイルシートから考える、リセットCSSの留意点 - kojika17
デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。 これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。 しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。 理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。 私は、1年前に各ブラウザのデフォルトスタイルシートを調べました。 現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。 具体的なデフォルトスタイルシートの例を挙げます。 以下は、平均的なデフォルトスタイルシートの一部です。 html {
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！ ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
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
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
初めてHTML5でコーディングする時のまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、はやちです。 今回は初めてHTML5を触る人のために色々とまとめてみました。 新要素のタグなどご紹介します。 まずはじめに <!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <!--IEなど対応していないブラウザへの対応▼--> <!--[if lte IE 9]> <script src="js/html5.js" type="text/javascript"></script> <![endif]--> <title>初めてHTML5でコーディングする時のまとめ</title> <link href="css/html5reset-1.6.1.css" rel="stylesheet" type="text/css" media="all" /> </head> HTML5特有の
CSS3で、ダミーテキストを簡単に表示できるのか？
CSS3で、ダミーテキストを簡単に表示できるのか？ 2012-06-14 サイトを制作する時は完全原稿で進めたい。 とりあえずJavaScript ダミーテキストを出してくれるjQueryのプラグインもあるので、試してみてもいいかもしれません。 lorem.js - github lorem.jsの記述 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="lorem.js"></script> <div data-lorem="2p"></div> <img src="" data-lorem="gray" width="100" height="124"> ただdata-*属性を付けるのが面倒な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイトの様々な確認作業に使うチェックツール達！レスポンシブ、パフォーマンス、クロスブラウザ対応等全部！ | バンクーバーのうぇぶ屋
