タグ

HTMLに関するwazanakaのブックマーク (101)

  • 2009年、ウェブデザインに役立つまとめのまとめ

    Web Design Trends For 2009 邦訳:2009年、押さえておきたいウェブデザインの10のトレンド 2009年に流行るであろうとされた10のトレンドです。確かに、これらのものが使用されたサイトは多く見かけました。

  • JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル:phpspot開発日誌

    JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか?と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル

  • 複数のブラウザでウェブサイトのテストができるツール「Browsera」 | ライフハッカー・ジャパン

    仕事でウェブサイトのデザインや開発などに携わっている方はもちろんのこと、個人のブログやサイトでもときに必要なのが、ウェブサイトのテスト。エラーが潜んでいたり、別のブラウザで見るとレイアウトが崩れてしまっていたりでは、せっかくのウェブサイトが台無しです。そこで、複数のブラウザでウェブサイトのテストをサクっとやってくれる便利なツール「Browsera」をご紹介しましょう。 「Browsera」はウェブサイトのエラーやレイアウトをテストするためのウェブツール。同様のツールとしては様々なブラウザでウェブサイトのスクリーンショットを表示してくれる「BrowserShots」や「IETester」といったものもありますが、「Browsera」がこれらのツールよりさらに優れているのは、ブラウザのスクリーンショットを表示できるだけでなく、JavaScriptのエラーやレイアウト崩れなど、問題が起こりそうな

    複数のブラウザでウェブサイトのテストができるツール「Browsera」 | ライフハッカー・ジャパン
  • すくいぬ WEBデザイン詳しい暇な人ちょっとニートを助けて

    2024 02 ≪ 12345678910111213141516171819202122232425262728293031≫ 2024 04 1 名前:以下、名無しにかわりましてVIPがお送りします[] 投稿日:2009/11/24(火) 11:47:13.45 ID:ZAwq5sRE0 ちょっとカンプとかいうの作ったんで見て(´・.ゝ・`) 根からダメなのはわかるけど完成だけはさせたいんで アドバイスおくれ(´・.ゝ・`) 見出しの中身・・・ 3 名前:以下、名無しにかわりましてVIPがお送りします[] 投稿日:2009/11/24(火) 11:52:02.96 ID:ZAwq5sRE0 こねえ(; ・`д・´) 4 名前:以下、名無しにかわりましてVIPがお送りします[] 投稿日:2009/11/24(火) 11:53:31.47 ID:ZAwq5sRE0 ぬ・・・ そうか、甘え

  • Webデザイン事始め・まずはフリーソフトで始めよう。GimpとInkscapeの説明が分かりやすいサイト

    題名の通りですが、これから Webデザインに手を出そう、 という方の為に日語サイト で説明が凄く分かりやすい サイトと少しチュートリアル記事 の紹介です。 Webデザインを始めたいけどadobeのソフトは高額でなかなか手軽に始められません。まずはほぼ同等の機能を持ち、しかも無料で手に入るGimp(Photoshop代替ソフト)とInkscape(Illustrator代替ソフト)で様子見をしてみてはいかがでしょう。 使い方や実践チュートリアルを丁寧に説明してくれるサイトをご紹介します。「これなら触ってみよう」という気になれるかと思います。沢山あげられると選べずに萎えるので1,2サイトに絞りました。両ソフトのダウンロードもリンク先で出来ます。 プロも使ってるといわれるGimp。Webデザインをこれから始めようと思ってもなかなかとっつき難いかもしれません。ですので扉となってくれそうなサイトを

    Webデザイン事始め・まずはフリーソフトで始めよう。GimpとInkscapeの説明が分かりやすいサイト
  • ようこそJavaScriptの世界へ

    JavaScript格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず!?(編集部) JavaScriptってよく聞くけど何だろう? JavaScriptは、Webブラウザ上で動かすことのできる簡単なプログラム言語です。HTMLだけでは動くWebページはできませんが、JavaScriptを使うとWebページにさまざまな動きを入れることができるようになります。 プログラム言語と聞くと、なんだか難しそうに感じてしまうかもしれませんが、心配はいりません。 講座は、HTMLは分かるけどプログラムを書いたことがないという人や、デザインは得意だけどプログラムは全然分からない! 文科系で数学は苦手! という人が理解できるような入門講座として、JavaScriptの基から進めていきます。 用意するものはメモ帳などのテキストエディタとWebブラウザだ

    ようこそJavaScriptの世界へ
  • css-lecture.com

  • 携帯サイト(html)の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α

    「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ

  • 404 Not Found

    個人ニュースサイトとは、自分が興味のある情報を紹介するサイトです。 このページでは個人ニュースサイトを作る上で必要な情報を紹介しています。今日から個人ニュースサイトを始めてみませんか?

  • bookma! - 404

    リダイレクトします

    bookma! - 404
  • 国内の商用利用可能なWeb制作に使えるフリー素材配布サイトまとめ - かちびと.net

    Webデザインってあまりトレンド というのは無いような気がします。なんと言うか 見易さとか実用性メインでデザインは結構 シンプルだったりしますし、日人に合ってる のかもしれないですね。そんな訳で日人の 感性で作られた商用利用もOKの国内の Web素材配布サイトをまとめてメモしておきます。 僕自身がいいと思ったサイトを厳選してご紹介します。順不同。 サイトごとに利用規約が若干違うので重要な部分はメモしますが、ご利用の際は必ずご自身の目で利用規約ページをご確認下さい。問題が起きても当方は責任負いかねます。利用規約ページがある場合はそのページにもリンクを貼っておきます。 デザイン素材.com アイコンがメインでファイルはPNG。ネットショップ素材が中心で使いやすいデザインが沢山あります。 加工、商用OK、印刷物、ソフトウェアでも可能、Webデザイナーも利用可能。再配布、2次配布は不可。

    国内の商用利用可能なWeb制作に使えるフリー素材配布サイトまとめ - かちびと.net
  • https://vanillate.org/blog/wp-content/uploads/minecraftskin_02.jpg

  • ウェブデザインのタブーをあえて破ってみるための10のTips

    ウェブデザインにいつもと違うアイデアを入れてみるための10のTipsをWeb Designer Depotから紹介します。 10 Web Design Rules That You Can Break 下記、各ポイントをピックアップしてお届けします。 はじめに 1. 水平方向のスクロールバーを表示しない 2. フォントの書体は必要最小限の数だけ使用する 3. やたらと多くのカラーを使用しない 4. サイトのゴールを明白にする 5. ナビゲーションは理解しやすいものにする 6. テキストと背景には異なるカラーを使用する 7. コンテンツにはアニメーションを配置しない 8. ウェブ セーフ フォントを使用する 9. スプラッシュ(ランディング)ページを使用しない 10. tableは使用しない はじめに ウェブデザインの進化は、一貫した有用なデザインの保証とともに確立されてきました。そして、あ

  • 都道府県選択するやつ。

    メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北

    都道府県選択するやつ。
  • ブログのSEO対策で重要な12項目 | パシのSEOブログ

    先日の「企業サイトの8つのSEO」に続き、今回はブログのSEOやSMO、アクセスアップ法について考えて見ます。SEOの基的な手法は企業サイトも個人サイトもブログも変わりませんので、企業サイトの8つのSEOをお読みで無い方はまずはそちらをお読みください。 今回は、主にWordPressブログでの解説となっていますが、他のCMSや無料ブログにも役立つ内容も含まれていると思います。 1.タイトルはキーワードとブランディングを意識 ブログタイトル ブログタイトルはブランディングも考え、他のブログと被らないユニークでわかりやすいタイトルにします。もちろんターゲットキーワードを含めるのですが、独自ドメインのサブディレクトリやサブドメインとして設置するブログの場合には、メインサイトで狙うキーワードとの関連性も考慮してください。 ブログタイトルは、SEOにとって最も重要な要素である被リンクのアンカーテキ

  • ソースが公開されているcss小技11エントリーまとめ

    cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント ユーザービリティ(見易さ)を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとcssでテキストに影を付けるテクニック

    ソースが公開されているcss小技11エントリーまとめ
  • サイト立ち上げ後2週間でやった基本的(?)な7つのSEO対策 | Kousyoublog

    このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。

  • 【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。

    ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです! IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに!」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height(相当)の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi

    【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
  • 第65回 [図解]Webサイト構築プロジェクト・ワークフロー - Webデザイン エンジニアリング:ITpro

    今回は,Webサイト構築プロジェクトのワークフローを俯瞰してみたいと思います。実際にクライアントから声がかかる場面から納品,つまり開発案件の完了までを12の「ステージ」に分けて図解してみました。思考のプロセス/人的配置/タスク/ツールなども一緒に記しています。少し大きな図になってしまいましたが,ご参考になれば。 図は,一番上は「4つのステップ/3つのタスク/12の要素(第62回 持続可能なWebサイト開発を支える12の要素)」。その下は,人的配置をロール(役割)ごとに記述しています。その下は,大まかなタスクのレベルです。それぞれの期間内に処理すべき項目を列挙しています。その下が,「ステージ」。プロジェクト全体を12のステージに分類して作業内容を整理しています。基的には,その流れの順で進んでいきます。その下は,それぞれのステージのアウトプットのイメージで,更にその下にはよく使うファイルアイ

    第65回 [図解]Webサイト構築プロジェクト・ワークフロー - Webデザイン エンジニアリング:ITpro
  • | ^^ |秒刊SUNDAY | 鼻血が出るほど高センスなWEBデザインサイトギャラリー集まとめ

    2009年06月08日 鼻血が出るほど高センスなWEBデザインサイトギャラリー集まとめ カテゴリ:WEBデザイン デザインサイト集というのは、こんなにも沢山出来上がっているとは知らなかったのですが、仕事柄かなり活用しますのでここで抑えておきたいと思います。 ◆いけてるサイト.com このサイトを紹介しないと、この記事のコンセプトがわからないので、とりあえずフリということで。 ■WEBデザイン リンク集 : ikesai.com --- いけてるサイト ドットコム(WEBデザインの参考にどうぞ) ◆Webデザイン・Webデザイナーのまとめサイト 膨大なデータベースです。色やキーワードで検索できる。ここにいけばほぼそろうか? ■Webデザイン・Webデザイナーのまとめサイト | Webデザインに優れたサイトのリンク集 ≪デザインリンクデータベース≫ ◆WEBデザイン・データベースWEBdeDB