実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
こんにちは、金田です。台風が心配ですね。 地元の香川県は、台風があまり直撃しない地域なのでドキドキします。 さて、「パンくずリスト」をご存知でしょうか？ コーダーの方ならご存知の方も多いと思います。 では、SEOに最適なmicrodataを用いたマークアップをご存知でしょうか？ この記事でご紹介させていただきます。 それではまずパンくずリストにいて、wikiで確認してみましょう。 パンくずリスト（breadcrumb list）は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。 日本語では「パンくずリスト（breadcrumb list）」だが、英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的。「パンくずリスト」という名前は、童話『ヘン
Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか？ Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。 そこで、今回は「Photoshopを使ったデザイン」や「HTMLなどの言語を使ったコーディング」、「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。 Photoshopなど、デザインに関する記事10選 1.良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと
twitter facebook hatena google pocket フォームなどで段階的に選択内容を絞り込ませられるとユーザビリティが向上しそうです。 jQueryプラグインDependent Selectでは複数のselect要素を連動させることが可能です。 sponsors 使用方法 Dependent Selectからjquery.dependent.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.dependent.js"></script> <script type="text/javascript"> $(document).ready(func
補足説明 セル内改行、セル結合には対応していません。 ※&、<、> 記号は、&、<、> に変換されます。
はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位！ Mac万歳！Chrome万歳！な僕にとって、IEは「どうせ使うことないし、どうでもいいよね〜」という「心の中でサポート対象外なブラウザ」でした。 しかし、店のWebサイトのアクセス解析を見てみると、実はIE9とIE8が1位、2位を占めていることがわかりました。 よく見ると8位にはIE6がまだしぶとく生き残っています。 この結果を見ると、「うーん、こりゃ完全に無視するわけにはいかんな・・・」と考えざるを得ませんでした。 IE対応を全く考慮していないとこうなる まず最初に、IE対応を全く考慮していないと、いったいどんな表示になるか見てみましょう。 トップペ
ブラウザいっぱいの背景や小さいサイズのパネルにも使える、CSSグラデーションを使った背景テクニックを紹介します。画像の使用はもちろん一切無しです。 ヴィンテージのディスプレイみたいで、面白い演出ができそうですね。 Cool Gradient 実装は非常にシンプル、コピペで簡単に利用できます。 HTML デモではdivとspanの二つを使用していますが、背景用にはdiv一つのみでOKです。 <div><span>Cool Background</span></div> CSS まずは、美しいグラデーションのスタイルシートから。 グラデーションの設定は楕円（ellipse）状でボックスの一番遠い角に合わせて（farthest-corner）います。 div { position: fixed; width: 100%; height: 100%; background-image: -webk
Case-sensitive Treat attributes in case sensitive manner (useful for custom HTML tags) Collapse boolean attributes Omit attribute values from boolean attributes Collapse inline tag whitespace Don't leave any spaces between display:inline; elements when collapsing. Must be used in conjunction with collapseWhitespace=true Collapse whitespace Collapse white space that contributes to text nodes in a d
アイコンフォントからSVGへ！より手軽にベクター画像を表示しようベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 2014 年 7 月 3 日 追記：SVG スプライトの書き方について修正＆追記しました。 SVG ってなに？SVG（Scalable Vector Graphics）は Illustrator で作成したようなベクター画像を表示する技術です。Web 上で一般的に使われる画像形式である JPEG や PNG などのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Apple がレティナ
「HTMLメール…一度は試してみたいけれど、Webデザインなんてサッパリだし、制作会社に頼むお金もないし、やっぱり諦めるしかないかな…」こんな悩みをお持ちの方はいませんか？ 本講座では2回にわたって、無料ツールを利用した簡単なHTMLメールの作り方をご紹介します。 >>HTMLメール用テンプレート集をプレゼント！ どの程度のHTMLメールが作れるの？今回は非デザイナーの筆者が、無料ツールを利用して実際にお客様に送るHTMLメールを作ってみました。アウトプットはこちらです。 いかがですか？ プロ並み！…とはいきませんが、素人が作ったにしてはなかなか悪くない（ですよね？）。本講座（全2回）を終えた頃には皆さんもこの程度のHTMLメールが作れるようになりますよ。Let’s challenge!! まずはメールテンプレートを作ろう！HTMLメールの作成工程は大きく、(1)メールテンプレートの作成
誰でも作れる！ “崩れない”HTMLメルマガ作成術：一撃デザインの種明かし（12）（1/4 ページ） キレイなHTMLメールを作るコツ/Tips盛りだくさん！ ECサイトはもちろん、企業サイトのニュースなど、いまなおプッシュ型の情報配信として支持されるメールマガジン。一時のフィードリーダーの盛り上がりもあり、以前に比べると落ち着きましたが、まだまだメールマガジンの効果は侮れません。 今回は、そんなメールマガジンの中でも、表現力豊かなHTMLメルマガの作り方について、徹底解説します！ 「HTML」自体は、それほど難しくないが…… 「HTML」というマークアップ言語自体はプログラム言語に比べると手が出しやすいので、Webを仕事としていない方でも触れた経験をお持ちの方はいらっしゃるのではないでしょうか？ そういう人にとっては、HTML言語自体はそれほど難しくないと思います。 しかし、そのHTML
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
KUBET | KUBET DW | KUBET DW312 KUBET telah menjadi salah satu situs judi online yang paling diminati di Indonesia berkat berbagai pilihan permainan yang ditawarkan, mulai dari taruhan olahraga, permainan kasino, hingga permainan slot. Dengan antarmuka yang user-friendly dan dukungan pembayaran lokal, Kubet berhasil menarik banyak pemain dari seluruh Indonesia. Bagi mereka yang sudah terdaftar, pro
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Page is Under Review The lab is awaiting moderator review and approval.
ニュートラルワークスの会社案内/サイト制作や ウェブマーケティングのお役立ち資料が無料で ダウンロードできます。
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整えるWebサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用の HTML と CSS コードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらっても OK です :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Sa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
