H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
第一回 プログラマ向けデザイン勉強会 #design4p で「ズルいデザインテクニック」発表させていただきました。 - 納豆には卵を入れる派です。
どうも。 書くのが遅くなりすぎてもう半月ほども前のことになってすごく今更感があるのですが、書いておくべきことを書きそびれると、その後出てくる他の書きたい小ネタがどんどん書けなくなっていってドンづまるパターンになるので、やはり書いておきますね。。 先日、第一回 プログラマ向けデザイン勉強会というイベントで下記のスライド発表させていただきました。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck 反響の大きさに驚き！ありがとうございました。 実はあんまり発表自体は、盛り上がったという手応えがあまりなくて、一方で他の2人の発表が素晴らしすぎて、割としょんぼりしながら帰ってきたんですが、スライドをアップロードしたらあれよあれよという間に2000ブクマ超え…驚きました。読んで下さった皆様、ありがとうございました。何が原因だったのか考えてみたのですが、デザイン
Guide to HTML Semantic Markup
2014年8月17日 HTML, Webサイト制作 連載企画「実践で学ぶWebサイト制作ガイド」も佳境を迎え、今回いよいよHTMLマークアップの段階に突入します！「デザインは好きだけど、コーディングは苦手…」という人も、焦らず少しずつ記述していけばちゃんと形になります！お手持ちの「TextEdit」や「メモ帳」などのテキストエディタツールを開いて、さっそく始めましょう！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その6 目標：正しいページ構造のHTMLが書ける 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：HTMLの基礎知識がある・基本的なHTMLタグが手打ちで書ける 目次 誰のため？何のため？We
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
Gradient Button CSS: Create Stunning Effects
Not long ago, I delved into the realm of CSS cross-browser gradients, and just last week, I revisited the topic, delving once more into the world of CSS3 gradients. Now, you might be wondering, what’s on the agenda for today? Well, today’s agenda involves unveiling a practical application for the CSS gradient prowess. Within the confines of this piece, you’ll be privy to the art of employing CSS g
Islamic spells for love inter caste inter religion marriage
There is nothing more beautiful than the abyss that welcomes you with open arms, it's charms beckoning the many bewitched souls to sit with her amongst the stars and galaxies that spindle together like a tapestry of perfect symmetry. I understand what welcomes and drives those to go deeper into the gullet of a pet that consumes everything, yet is not bound by its gluttony and Beelzebolic need to i
デザインの引き出しを増やそう！細部にまでこだわった美しいウェブUIエレメントのPSD素材のまとめ
細部まで作り込まれた美しいデザインのウェブ用のUIエレメントのPSD素材を紹介します。 そのまま制作に使ってもよし、インスピレーションをもらってもよし、PSDなのでエフェクトの勉強をしてもよし、などいろいろ活用できると思います。 ※一部のファイルはPNGフォーマットです。
“モバイルファースト”の本当の意味と、Web担当者が知っておきたい基本＆実践3ステップ | Web担当者Forum
「モバイルファースト」というキーワードをご存知だろうか。その名の通り、まずモバイルサイトを中心にコンテンツを考え、PCなど他のデバイスへと対応させていく考えだが、その本当の意味を勘違いしている人も多いようだ。 スマートフォンの登場で注目を集めているモバイルファーストでは、「ワンソースから各デバイスに対応していく考え方」がポイントになる。そのとき重要になるのが、コンテンツを一元管理できるマルチデバイス対応CMSの存在だ。 この記事では、Webサイト制作現場だけでなく、企業Web戦略の面でも重要な意味を持つ、モバイルファーストの基本について解説する。 スマートフォンの普及で見直しが迫られるPCサイトスマートフォンの普及が加速している。ケータイキャリアのプロモーションや新製品ラインナップを見れば、これは当然の流れだろう。インターネットにアクセス可能なデバイスとして見ると、PC、フィーチャーフォン
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
無料ホームページテンプレート提供 Design Template T&S
2010.8.03 ホームページ作成 CLOUD LINE テンプレート：2column_type4_pink 2010.8.03 ホームページ作成 CLOUD LINE テンプレート：2column_type4_brown 2010.8.03 ホームページ作成 CLOUD LINE テンプレート：2column_type4_blue 2010.7.29 ホームページ作成 CLOUD LINE テンプレート：2column_type3_yellow 2010.7.29 ホームページ作成 CLOUD LINE テンプレート：2column_type3_red 2010.7.29 ホームページ作成 CLOUD LINE テンプレート：2column_type3_black 2010.7.29 ホームページ作成 CLOUD LINE テンプレート：2column_type2_orange 201
スマートフォンのコーディングで気を付けたい4つのポイント | グレヌデサ La graine du dessin
はじめに 現在、スマートフォンは大きく分けて2つのOS（iOS、Android）があります。 OSごとの仕様の違いも重要ですが、 特に問題になる端末の違いは画面の解像度で、 iOSは960×640px(iPhone4とiPhone3Gは同じサイズで表示できる) Androidは800×480px?(端末によってサイズがバラバラだが、横幅は480pxが基本) と、表示サイズが大きく異なります。 さらにスマートフォンは画面を横に回転させることもできるので、 解像度が縦横反対になることも想定しておかなければいけません。 iPhone4を基準としたデザインからコーディングをした場合の注意点とその参考サイトをまとめました。 iOSのSafariは様々な制限やバグがある ・画像のサイズ制限がある（GIF、PNG、TIFF画像のデコードサイズ制限は2メガピクセル） ・Web Fonts は使えない。 ・
９．売れるランディングページデザインの１０の特徴
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. ランディングページのデザインは、インターネットの技術の向上に合わせて変遷している。それに伴い、高いコンバージョンを見込めるレイアウトも、めまぐるしく変わっている。 しかし、結局、どのビジネスも最終的には似通ったデザイン/レイアウトに落ち着いていく。 なぜなら、結果を出すランディングページデザイン/レイアウトには、ある一定のルールのようなものが存在するからだ。そして、そのルールに則ってランディングページを作ると簡単に高い数字が出せる。 つまり、ゼロからデザインを考えるのではなく、既に結果が出ることが証明されている成果保証済のレイアウトやデザインを使う方が、遥かに簡単で結果が出やすいのだ。 そこで、近年非常に良く見られるランディングページのレ
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
スマートフォン時代のWebサイト制作 第1回 スマートフォン対応の重要性とその方法 | デベロッパーセンター
iPhoneに始まり、さらにここ数年で様々なAndroidケータイが登場し、日本でもスマートフォンが普及し始めています。それにともない、企業サイトやECサイトを、スマートフォンブラウザーで利用するユーザが着実に増えてきています。世界規模でいえば、2012年頃にはスマートフォンの販売台数がPCを超えるという予測もあります（ITU, Mark Lipacis, Morgan Stanley Research.2009 資料PDF ）。これはビジネス的に考えて、「まだ様子を見て、対応しなくてもよい」とはいえない状況でしょう。そこで、本連載では「スマートフォン時代のWebサイト制作」をテーマに、スマートフォン対応に必要となる考え方、Dreamweaverを使ったスマートフォン対応のテクニックなどを解説していきます。第1回目となる今回は、スマートフォン対応サイトを制作する前段階について考えてみましょ
色彩センスのいらない配色講座
3. 自己紹介 職業：デザイナー 物心ついたときには絵を描くのが好きだった そのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_
WEB管理画面のテンプレート２２:phpspot開発日誌
22 Awesome Admin Panels For Web Developers | ZoomZum WEB管理画面のテンプレート２２がまとまっていました。 すでに紹介したものもあり、ほとんどが有償ですが、デザインの参考にしたり、１から作るのに比べれば相当安価なので便利だと思います。 管理画面のデザインはちょっと普通のサイトと違うパターンであったりするので学習素材としてもよさそうです。 デザインは奥が深いですね。 関連エントリ CSSデザインの実用的な管理画面テンプレート１０個 管理画面やダッシュボードのハイクオリティなテンプレート色々
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
so-network.biz