html <table class="star-rating1"> <tr><th>価格：</th><td style="color:#ccc;"><span style="color:#f90;">★★</span>★★★</td></tr> <tr><th>見た目：</th><td style="color:#ccc;"><span style="color:#f90;">★★★★★</span></td></tr> <tr><th>耐久性：</th><td style="color:#ccc;"><span style="color:#f90;">★★★</span>★★</td></tr> </table> ちょっとした解説 とくに何の工夫もなく、単にテキストで星（★）を表示して、点数分の星だけ<span style="color:#f90;"> ～ </span>で色を変えていま
SEOの内部対策をするにはキチンとしたHTMLタグを使うことから！！！ ということでSEOには役立ちそうだけど、普段のHTMLコーディングではあまり意識しないHTMLのタグをまとめてみました。 正直それぞれのタグでどのくらいの効果があるのかはわからないですが、この手のコーディングは最初にやらないと、後から直すっていうことはないので、できれば最初にちゃんとやっておきたいですね。 主に以下のサイトを参考にしてます。 HTMLクイックリファレンス HTML 5.1 W3C Proposed Recommendation, 15 September 2016 base 相対パスリンクを指定したときのルートとなるパスをデフォルトで指定することができます。 headタグ内にいれます。 <html> <head> <base href="http://qiita.com" target="_blank"
Photo by dalcrose こんにちは、谷口です。 プログラミング学習に関するサービスを運営していますが、最近は現役のITエンジニアやWebデザイナーといった職種に限らず、「HTML/CSSを勉強したい！」という人が増えてきたなと感じます。 ただ、初心者にとって一番の悩みは「どうやってHTML/CSSを勉強していくか」ではないでしょうか。 また、一口にHTML/CSSを学びたいと言っても 未経験から勉強を始めてWebデザイナーになりたい 独学で勉強しているが、周囲に質問できる人がいなくてつまずいた時に解決できない 仕事でエンジニアやデザイナーと話すときにHTML/CSSのことがわからなくて困ったので基礎的なことだけでも知っておきたい そもそもどうやって勉強を始めたらいいのか・どんな勉強法があるのかがわからない などなど、その人によって求めるレベル感は様々ですし、学び方もその人の目的
こんにちわ、ゆう。です(^^)/ カラーチャート作りがひと段落したので、またcssの紹介をしていきますね(^^♪ 以前にも説明したようにwebページには、ヘッダー・メインコンテンツ・フッターのそれぞれの領域があります。 このページでは、webページのそれぞれの領域の表示幅（横幅）の設定方法を紹介します。 目次 widthプロパティの使い方 widthを使ってwebページの表示幅（横幅）を設定しよう widthプロパティの使い方 webページの表示幅（横幅）を設定する時は、width（ウィズ）プロパティを使います。 widthプロパティは、htmlファイルに記述しても良いですが、管理が大変になるので基本的にはcssファイルに記述するようにしましょう！ #example{ width:800px; } widthプロパティの使い方は簡単で、上のように「width：表示幅（横幅）;」のように書く
Photo by slavik_V こんにちは。谷口がお送りします。 Webの仕事を目指している人やプログラミング初心者、さらにはブログをやっている人など、HTMLとCSSを習得したい人は多いと思います。特に最初は「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」など、さまざまな悩みがあるのではないでしょうか。 HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。 マークアップ言語とは、プログラミング言語と違い「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基本的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算はできません。 CSSは、Webペ
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
今日は、ちょっと技術的な話を。「meta referrer」という、リンクをクリックしてページ移動するときなどにリファラをどう送るかを、ページ側で指定できるタグの実装が進んでいるのです。 グーグルはHTTPSを推奨するけれども、リファラが……グーグルは、サイトがHTTPSかどうかを順位決定の要因とするなど、HTTPSを推奨しています。 でも、自分のサイトをHTTPSにすると、自分のサイトから非HTTPS（ふつうのHTTP）のサイトへのリンクをクリックしたときに、リファラが飛ばないんですよね。 これは、RFC 2616で、「セキュア接続のページから、非セキュア接続のページに移動するときは、リファラを送出するべきではない」と定められているからです（セクション15.1.3）。 とはいえ、Web担のようなメディアでは、「Web担のページから、うちのサイトにけっこう来る人いるんですよ」という反応も大
CSSやJavaScriptを使って、IE6, IE7, IE8, IE9 とIEの異なるバージョンごとにスタイルシートを適用する方法のまとめを紹介します。 Use Different Styles For Different Internet Explorer Versions [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS: 条件付きコメント(class) CSS: 条件付きコメント(外部スタイルシート) CSS: CSS Hack JavaScript JavaScript: jQuery おまけ CSS: 条件付きコメント 条件付きコメントを使用して、ドキュメントの一番上の要素(html)にIE6/7/8用のclassを付与します。 HTML <!--[if IE 6]> <html class="ie6"> <![endif]--
このエントリーはHatena::Staff Advent Calendar 2011のために書かれたものです はじめまして。最近は映画けいおんが生き甲斐のuedayです。 11月8日にクローズドベータリリースした「はてなブログ」のデザイン全般を担当しました。裏側というほどの話ができるか微妙ですが書いてみます。 開発チーム 開発チームは、エンジニアid:cho45／デザイナーid:ueday／ディレクションid:onishiです。デザインはクオリティチェックをid:tikedaに依頼して、適宜フィードバックを貰いながら進めていきました。このほかに制作スタッフが数名います。プロジェクトが立ち上がったのが8月1日だったので、開発期間は約3ヶ月です。アルファ版完成が異常に速く、開発2日目か3日目で記事投稿ができるようになり、5日目でアルファ版を社内リリース。choさんほんとすごいなって思いました
2011年04月20日 googleの裏技いろいろ Tweet 0コメント ｜2011年04月20日 00:00｜Web・テクノロジー｜Editタグ ：Google意外としんどい http://hato.2ch.net/test/read.cgi/news/1295558779/ 1 ： ベーコロン(広西チワン族自治区)：11/01/21 06:26 ID:SNxFSb/SO ascii art で検索 【2ch】ニュー速クオリティ:Googleで「AA」で検索かけるとGoogleのロゴがAAっぽくなる 50 ： ルネ(北海道)：11/01/21 09:31 ID:NdeBivAg0 キャッシュを10年前に戻して検索するのは便利だぞ 当ブログサイトはアフィリエイト広告、バナー広告を利用しています。 52 ： そなえちゃん(東京都)：11/01/21 10:44 ID:EjQpUNv40 カ
Googleアルゴリズムの200の要素を発見しましょう！（Let’s Try to Find All 200 Parameters in Google Algorithm） は2009年に書かれた記事ですが、パンダアップデートが適用された今現在（2011年4月）でも重要項目が多く書かれているもので。 多くはGoogleの特許（合衆国特許出願0050071741）に基づいていますが、筆者のアンが自身の解析結果や予測を盛り込んでいる事で、より実践に近い内容になっています。 SEO初心者の方は、これからのウェブ制作の軸に、SEOエキスパートの方はもう一度自身のサイトを見直す目次として確認してみてはいかがでしょうか。 ドメインに関する13要因 ドメイン年齢 ドメイン取得からの長さ ドメイン登録情報（Who is情報）の表示/非表示 ドメイン種類（サイトレベルドメイン（.com や co.uk） ト
１．そもそもWebページとは？JavaScriptとは？ ブラウザで解釈されるHTMLという言語に基づいてレイアウトやデザイン、挙動が制御されます。・・・って、そんなことはもう皆さんはお解りですよね。 で、そのHTMLではDOMといって、それぞれのデザインパーツやタグなどが、階層構造に基づいて管理・解釈・実行されていきます。階層構造というのは、そもそもHTMLという大きなパーツがあって、その中にヘッダー、ボディ（本文）・・・・、そしてボディの中に、見出し、段落・・・というようにグループ化され解釈されていくのです。 実は、その中に＜Ａ＞というリンクを構成するパーツが認識され、その内部をチェックし・・・「あ！このリンク先はhttp://〜ってなってる！じゃあ、外部リンクだな。ならばイベントトラッキングの命令を付加して実行させよう！」と制御してくれるのです。それを、多くのWebページではJava
Web屋さんのための新年の抱負アイデア242011年がスタートしましたが、「なんだか調子でないなー」という方！今年の目標はもう設定しましたか？私は毎年「新年の抱負」を考えているのですが、今年は何にしましょう？ということで、Web屋さんが設定できそうな新年の抱負案を考えてみたので、参考にしつつ新年の抱負を考えてみてはいかがでしょう？ 1. CSS3 の勉強をする角丸・グラデーションをはじめ、画像を使わなければできなかった効果が CSS3 を使えば簡単に実装できます。デザインの幅がぐんっと広がります。IE で対応していないなどの問題もありますが、CSS3 PIEを使えば IE でも使えるようになりますよ。 CSS3 リファレンス CSS3 のリファレンスサイト。コードの例もわかりやすいです。 たった一行を追加するだけで IE6/7/8 を CSS3 対応にする -CSS3 PIE CSS3 P
10 Tips for Optimizing Web Form Submission Usability [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 必須入力欄は強調する 2. エラーメッセージは分かりやすく 3. クライアントサイドのバリデーション 4. 入力している欄を明示 5. 進捗を明示 6. データの保存やキャッシュ 7. 送信ボタンの文言 8. キャンセルボタン 9. 入力例の記載 10. 垂直に配置 1. 必須入力欄は強調する ユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。まずは、入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。 2. エラーメッセージは分かりやすく フォームのエラーメッセージは、「あなたが下に必要とさせるフィー
Web Design Trends in 2011 [ad#ad-2] 以下、各ポイントを意訳したものです。 1. HTML5 + CSS3 2. シンプルなカラースキーム 3. モバイル対応 4. 視差効果 5. タッチスクリーン 6. 奥行き 7. 大きい写真の背景 8. 素敵なドメイン名 9. QRコード 10. サムネイルデザイン 11. Life Stream 1. HTML5 + CSS3 HTML5とCSS3はリリースされてから今日まで、あまり多くは使用されませんでした。しかし、この2011年、多くのサイトで採用されるようになるはずです。 多くのデザイナーはFlashから離れてはじめています。次の2つのサイトを見てみてください。 Scribblertoo(Flash) ここで注意してほしいのは、FlashとHTML5は敵対するものではないことを理解しておいてください。問題は、
JavaScript を知らない人に JavaScript の話して欲しいと言われる夢を見たのでブログ書きました。*1 難しい話は抜きにして JavaScript は <script> と </script> で囲えば動きます。*2 HTML をコードレベルで編集できるサービスなら、設定は一切不要です。 <script> JavaScriptのコード </script> 拡張子にも制限はありません。最終的にHTML文書として出力されるのであれば、htmlでもphpでもcgiでも構いません。なおフレームの代わりにPHPを使うという為になる記事があるのですが、ここでは関係ないので読むのは後ででよいです。 ついでに JavaScript を少しでも使えるようになれば、こんなことができるという一例を紹介します。 コピーライトの西暦を自動更新 JavaScript を使えばページフッタの西暦も自動更
Keep Margins Out of Link Lists 下記は各ポイントを意訳したものです。 HTML：スタイルシート無しの状態 CSS：リンクをブロックレベルに CSS：さらによい実装方法 [ad#ad-2] HTML：スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ（当方作成） リストのアイテムはブロックレベル、リンクはインラインレベルになり、リンクのクリックできる領域はテキストの長さに依存するため、小さく窮屈なものになっています。 CSS：リンクをブロックレベルに a要素をブロ
はじめに ご使用上の注意 (1) 主な更新履歴 (25) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (402) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (42) TypeScript (1) Java (26) Perl (6) PHP (14) Ruby (11) Python (14) Go言語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
