タグ

webデザインと5-web制作に関するaegis09のブックマーク (15)

  • CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多め

    CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの?というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない

  • CSSでアイコンをデザイン

    ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ

    CSSでアイコンをデザイン
  • Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳

    Yamadaです。 かれこれWeb屋暦が14年くらいになるんですが、こうしてWebに携わっていると、3ヶ月周期で情報の入れ替えをしていかないと、正直追いつかないと感じます。そんな激流のようなWeb業界にこれから飛び込もうと言う新卒の方や、中途の方に送るバイブルとなればと思います。 というわけで改めて春ですし、これからホームページ(Webサイト)を作成してWeb屋さんになる方へ送るお勧めサイト集です。 後編はこちら Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報 忘れないで欲しい事 Web制作には、様々なスキルが求められます。 しかしその技術が、いつの間にか消えていったり、使えなくなったりしました。新しいデザイン、新しいコード、新しい言語、新しい環境、様々なものがあります。しかし、それらを追い続けていくうちに、一つ、とても大事な事を忘れて

    Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳
  • まとめ記事やTipsなど、ひたすらjQueryの情報を配信しているブログ・jQuery4u

    jQueryのプラグインのまとめ記事 や、Tipsなど、jQuery関連の情報 のみをひたすら配信しているブログ jQuery4uをご紹介。即効RSS購読 でした。まとめ記事も多数あるので 暇を見て全部見まわっていきたい。 まだ大量の記事数ではありませんが、今後に期待したいところ。以前書いた「jQueryプラグインを探す際にだいたい見て回る巡回サイトまとめ」にも加えています。 jQuery情報のチェック先に。 いくつか良かった記事をご紹介。 フォーム系プラグイン30個 バリデーションとかフォームデザインとかいろいろ jQuery Forms > 30 Examples and Plugins 画像拡大系プラグイン10個 画像を拡大する的なプラグインいろいろ 10 jQuery Image Zoomers jQuery Mobileを使った5つのテクニック jQuery Mobileのテクニ

    まとめ記事やTipsなど、ひたすらjQueryの情報を配信しているブログ・jQuery4u
  • サイト作成に欠かせないサイトやサービスなどを20個|Webpark

    私がサイトを作る際によくお世話になっているサイトやサービス、フリーソフトを紹介します。個人的に見ているものだけなのでまだまだあると思いますが、ご参考になればうれしいです。 週間ウェブデザイン 次の「あんじょうできてはる」が更新停止になっているのでこちらを。1ページあたりの表示数が多いので探しやすいですね。 あんじょうできてはる Webデザインのギャラリーはたくさんありますが、見やすさ探しやすさでこちらをよく見ます。更新は止まっちゃってますが。。 MephoBox ヘッダーやフッターなど部分的なものにこだわった海外のギャラリーです。404やナビゲーションなんかもあり参考になります。 ロゴストック 日を中心にかなりの数のロゴが集められています。管理人さんや訪問者の評価も見ることができて参考になります。 フリーの素材集です。「ロイヤリティフリーなフリーフォト、無料写真素材サイトのまとめ」もご参

    サイト作成に欠かせないサイトやサービスなどを20個|Webpark
  • Home - Designzzz

    We’ve seen many AI artists use the limitless possibilities of artificial intelligence to toy with reality as we know it, and Imagined Architecture is the next one in line. This AI artist is using... We can always count on Etsy to accurately predict the latest trends in the world of home décor, and their forecast for the upcoming holiday season is finally here. From candycore to gingerbread girl,..

    Home - Designzzz
  • 「ホームページを作る人のネタ帳」さんのリデザインをしました

    2013年3月23日 Webサイト制作, Webデザイン Webデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。今回「ホームページを作る人のネタ帳」さんのリデザインをお手伝いさせて頂きました!リデザインにあたり、改善点やリデザインの流れをケーススタディーとして公開してみようと思います。 ↑私が10年以上利用している会計ソフト! 打ち合わせ リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、 とにかく読みやすく、スッキリと 差し色にピンクを使いたい jQueryを使った何か仕掛けが欲しい の三点。文章主体であるこちらのブログでは読みやすさが命。スッキリとしたデザインを第一にしてほしいとのこと。また、「ユーザーに数秒でもいいので楽しんでもらいたい」という思いから、何か仕掛けを、と依頼されました。Yamadaさんらしい遊び心ですね

    「ホームページを作る人のネタ帳」さんのリデザインをしました
  • 「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた  -1.メニュー編-(※iPhone寄り) - Kaleidoscope

    【目次】 1.メニュー編 2.HTMLCSSで画像を操る編(前編) 2.HTMLCSSで画像を操る編(後編) 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん!!」って方も多いのではないでしょうか? ということで、記事でも書いてみっかぁ!と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です( ̄▽ ̄;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon

    「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた  -1.メニュー編-(※iPhone寄り) - Kaleidoscope
  • [CSS]ブラウザのサイズに合わせて垂直・水平方向に可変するレイアウト -SuperStretch! | コリス

    ブラウザを縦長にしたキャプチャ 可変レイアウトの実装はHTMLCSSで実現されています。 対応ブラウザはIE6/7/8, Fx, Op, Safari, Chromeなど主要ブラウザに対応しており、IE6はIE7のように振る舞うスクリプト「ie7-js」を使用しています。 実際のサイトに使用されている例も紹介されていました。

  • ディレクターなら押さえておきたいモバイルSEO34項目 : LINE Corporation ディレクターブログ

    ディレクターの渡邉雄介です。 ディレクターブログで以前に何度かモバイルSEOについて言及していますが、今回は、モバイルコンテンツ制作に関わるディレクターが最低限押さえておきたいSEOの進め方と、34個のチェック項目を紹介したいと思います。 SEO、その前に SEOを行うとき、まず最初に何をしていますか? 「さっそく実施する」とお答えになる方もいるかもしれませんが、私は最初は何も手を付けず、現状の数値の把握から始めています。 たとえば、ページ内に特定のキーワードの出現回数を増やして、そのワードの検索順位の向上を目指しているような場合、施策を実施する前に最低1週間は過去の順位の推移・平均をみておかないと、結果どれだけ向上したのか、適切な検証ができません。 モバイルはPCと違って、まだまだ解析できる項目が限られているため、SEOの実施後にどれだけの変化があったのかを適切に検証をするには、実施前の

    ディレクターなら押さえておきたいモバイルSEO34項目 : LINE Corporation ディレクターブログ
  • マウスホバーでハイライトするピュアCSSのメニュー作成サンプル:phpspot開発日誌

    Active State in Navigation - CSS Navigation Tutorial - Active Navigation Tutorial CSS マウスホバーでハイライトするピュアCSSのメニュー作成サンプル。 次のように、マウスホバーで色が変わるメニューをJavaScript なしで実現します。 デモページ JavaScript を切っても動くということで、非javascript環境でもこの動作をさせたい方は参考に出来そうですね。 当然ですが、a と a:hover を使いつつ実装しているようです。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 デザインの参考になるユニークなナビゲーション集 ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集

  • ついつい長居してしまう専門的なサイト25選 - かちびと.net

    仕事があるのについつい長居してしまう サイトって無いですか?何かを大量に まとめてあるサイトだったり、掘り下げたく なるような専門サイトだったり、理由は様々です。 僕も例外なく気が付いたら全然仕事してない時も あります。そんなサイトを25サイト選んでご紹介します。 中には僕にはまだ必要ないサイトもありますが、こんな専門サイトもあるよ、って事で。因みに一貫性は全くありません。ただ、「長居しちゃう」ってだけ。順不同です。 SourceForge.JP 日語で読めるオープンソース配布サイト。ここはかなり素敵。 SourceForge.JP OpenSourceCMS オープンソースのCMSに絞った海外の配布サイト。ブログとかEC系とかやたらあります。管理画面のデモもあるのでDLする前に触れるのは嬉しい。 OpenSourceCMS Twitpaper Twitterの背景の秀逸なデザインをダウ

  • これは便利!な 「FC2ブログで関連エントリーリスト」を試す(後編)

    FC2Blogで関連エントリを手軽に表示する方法はないものか、と色々試してみてみたものの、どれも一長一短で満足できるものはありませんでした。 しかし、その後探し当てたのが「FC2ブログで関連エントリーリスト」です。前回は関連エントリそのものについて書くだけで終わってしまったので、今度こそ格的なレビューに入ります。物ぐさな私でもこれなら満足できるのでしょうか? 導入は簡単でユーザータグを使っているならハードルは低め 導入方法は簡単な部類に入り、ここからソースを入手して使用しているテンプレートに貼り付けるだけです。オプションの「target="_blank"」は関連エントリを新しいウィンドウ(もしくはタブ)で開くかどうか設定で、残りは書いてあるそのままの意味なので任意の値を設定すればいいでしょう。 ただし、「抽出元」の設定だけは少し注意が必要です。 デフォルト設定の「ユーザータグ」を選んだ場

    これは便利!な 「FC2ブログで関連エントリーリスト」を試す(後編)
  • クロスブラウザの為のCSSテクニック集「15+ techniques and tools for cross browser CSS coding」

    TOP  >  WebDesign  >  クロスブラウザの為のCSSテクニック集「15+ techniques and tools for cross browser CSS coding」 IE、Firefox、safariなどを始めとして様々なブラウザがリリースされていて、制作者サイドにはブラウザ間の差異を極力少なくすると言うのは使命の一つだと思いますが、構成によってはなかなか難しく手こずったりする場合があります。今日紹介する「15+ techniques and tools for cross browser CSS coding」はクロスブラウザの為のCSSテクニックを集めたエントリーです。 CSSをリセットする方法からIE用のCSSを読み込ます方法等々、様々なCSSのテクニックが紹介されていますが、今日はその中からいくつか気になったモノをピックアップして紹介したいと思います。

    クロスブラウザの為のCSSテクニック集「15+ techniques and tools for cross browser CSS coding」
  • ECサイト制作者のためのデザインリソース「ecommr」

    ASPやオープンソースなどでECサイトを構築する敷居も相当下がってきて、世間的にもインターネットでの販売が当たり前になってきた部分があり、ECサイトを運営しているという方は以外と多いのではないでしょうか? 今日紹介するのはECサイトのデザインのリソースをあつめたWEBサイト「ecommr」です。ECサイトのなかでもサイト全体ではなく、インターフェイス毎にデザインが収録されています。 詳しくは以下 デザインはカテゴリー別に登録されており、大きなところエレメント単位、サイト単位にわけられて登録されていて、さらにそこから細かくエレメント単位だと、カートに入れる、サーバーエラー、ナビゲーションなどなど様々な部位別にデザインを参照する事が可能です。 ECはインターフェイスの良し、悪しが直接売り上げに影響を及ぼす可能性があるだけに、デザインや作りには十分気をつけたいところ、日海外ではデザインやユー

    ECサイト制作者のためのデザインリソース「ecommr」
  • 1