リンクのHREF属性における絶対パスと相対パスの使い分けについて
ホームページの管理の際、リンク表記をどう書いたらいいの？という疑問を時々聞きます。 ここでは「こうしたら結構効率的だった」というリンク表記の使い分けについてご紹介します。 絶対パスと相対パスそのものについては詳しく説明しませんので、それらの違いが分らない/知らないという方は、下記のページ等を参照して下さい。 Web KANZAKI 内のページ： http://www.kanzaki.com/docs/html/htminfo-uri.html Google で検索： 絶対パス 相対パス で Google 検索 このページでは、ひとまず以下のように呼び分けることにします。 絶対パス： <A HREF=”http://sugutsukaeru.jp/products/P004-G1-A0/index.html”>「すぐ使えるCGI」画像付 ウェブページ更新ツール</A> 完全相対パス： <A
スタイルの優先順位－CSSの基本
■スタイルの優先順位 よりタグに近い、より後から読み込まれたスタイルが優先される 複数箇所でスタイルを指定すると、同じプロパティに異なる値が指定されてスタイルが競合することも起こりえます。 こうした場合には、よりタグに近いところで指定されたスタイルや、 より後から読み込まれたスタイルが優先されて、プロパティの値が上書きされます。 例えば、外部CSSファイルの指定では文字色を赤く、 <style>要素による文書単位の指定では黄色く、 style属性による局所的な指定では青く指定した場合には、 より後から読み込まれる値で上書きされるため青い文字となります。 p {color:red;} /*赤色*/ p {color:yellow;} /*黄色で上書き*/ p {color:blue;} /*青色で上書き、この値が有効となる*/ セレクタの種類
ブログカテゴリー一覧｜ネットインパクト
ホームページ制作ホームページ制作ホームページ制作の流れホームページ制作プラン 料金成功するホームページとは制作コンセプトホームページの保守・管理ホームページ制作実績ホームページ制作に関するQ＆Aホームページ制作 お申込み ＳＥＯ ショッピングサイト構築ショッピングサイト制作プラン 料金ショッピングサイト機能一覧SEO対策 プラン 料金SEOに関するQ&Aリスティング広告ホスティングサービスホスティング料金ドメイン取得サービス ネットインパクト会社案内会社概要よくある質問プライバシーポリシーサイトマップ ネットインパクトＢＬＯＧGoogle順位変動・アルゴリズム更新SEO(検索エンジン上位表示)WEB制作者の苦労話オープンソースコンテンツ作成の裏ワザスタッフの雑談ネットの未来地球環境と経済環境変化Copyright © 2024 ネットインパクト All rights reserved.
inputタグの下の隙間をCSSで消すには - OKWAVE
CSSの左横に隙間ができてしまいます。 画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { paddi
html初心者です。テキストフォームと検索ボタンがずれる。 - htmlで検索フォームを作りたいのですが、テキストフォームの横の検索ボタン... - Yahoo!知恵袋
html初心者です。テキストフォームと検索ボタンがずれる。 htmlで検索フォームを作りたいのですが、テキストフォームの横の検索ボタンは画像で 作りたいと思っています。以下のようにしたのですが、テキストフォームよりも画像が 少し上に上がってしまいます。キレイに揃えるにはどうしたらいいのでしょうか？ わかる方がおられたら教えてください。 <form action="" method="post"> <input type="text" name="name" value="" maxlength="30"> <input type="image" src="search_button.gif" width="50" height="24" alt="検索"> </form>
文字数カウンターを作る - purazumakoiの[はてなブログ]
昔作った文字数カウントするやつが出てきたのでメモ、 この頃はjqueryをあんまり使って無かったみたい。 Prototypeのversionは'1.5.1.1' 完成デモ demo 主なソース部分 html側 <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/text_count.js"></script> ・ ・ ・ <textarea id="tContents"></textarea> <p>現在の文字数<span id="sCount"></span>文字</p> text_count.js window.onload = function () { fCount_load(); } // ページの初期化 functi
![文字数カウンターを作る - purazumakoiの[はてなブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/30b67b785570bd6606dbfd85fc885e88cd09e66c/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F12704538227038789114%2F11696248318755872953%2F1374114669)
Firebugを活用しよう！jQueryの動作チェックに最適な『FireQuery』
皆さんご存知のFirefoxのアドオン「firebug」コーダーとかであれば、これを入れている人はかなり多くいると思います！ しかし、中には『linker』のまーしーさんや『スグラボ』のフジカワさんのように、”いまいちFirebugを使いこなせていない”なんて人もいるのではないでしょうか？ 今回はそんな方もふくめ「FireQuery」のご紹介を仕様と思います！個人的にかなり便利だと思います。 FireQueryとは？ FireQueryは、Firebugを便利にさせる機能強化アドオンで、Firebugのコンソールで楽々jQueryを使えるようにしたり、DOM画面イベントがどこについているのかとかを確認することができるようになるツールです。 ただのFirebugでもJavaScriptのデバッグや動作の確認をすることはできたのですが、FireQueryを入れることによって、jQueryを使っ
URLに使える文字 URLに使えない文字 - プログラマのチラシの裏
URLにはどんな文字が使えるのか、ちょっと気になったので少しRFCを読んでみた。 ※なおチラシの裏なので、間違いを含む可能性は多分にあります。 RFC2396 "Uniform Resource Identifiers (URI): Generic Syntax"(訳:大橋正典氏) RFC2396に書いてあるが、ざっくりとまとめてみる。 ・まずURIに使用可能な文字は大きく以下の3つに分類される。 uric = reserved | unreserved | escaped ※uricはURI Characters ・予約文字(URIの中で、区切り文字など特定の役割・意味を持つ文字) reserved = ";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" | "$" | "," ※URIはいくつかのパーツ(成分)から構成されているが、その箇所によっ
WordPress オリジナルテーマの作り方
2013年12月25日 Wordpress WordPressのオリジナルテーマの作り方について説明していきます。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。PHPの知識は必要ありませんが（もちろんあった方が楽ですが）、自分でデザインをするためのPhotoshopとCSSの知識は必要です。前回に引き続き、Nick La氏によるWeb Designer Wallを参照しています。 ↑私が10年以上利用している会計ソフト！ ※これはWordpress旧バージョンのオリジナルテーマの作り方です。最新版Wordpressを使用してのオリジナルテーマの作り方は「WordPress オリジナルテーマの作り方 3.0+
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
IE で border-radius を使う方法 - それはBooks
CSS3 から使えるようになった border-radius を IE でも使う方法です。IE でも使うと言っては語弊がありますが、IE でも角丸を表現する方法です。それは Blog で使っている方法をメモ。 IE で角丸を表現する方法 ご存じの通り、IE6、IE7、IE8 では CSS3 の border-radius を使って角丸を表現することはできません。んじゃ、どうやって角丸を実現するのかというと次のような方法があります。 border-radius.htc を使う VML を利用して、behavior を使って border-radius を実現する方法 border-radius.js を使う JavaScript を使って border-radius を実現する方法 JQuery Corner を使う jQuery Corner という jQuery プラグインを使って bo
背景に関する設定をまとめて指定する
解説 背景に関する数々の設定は一括で1つのプロパティにまとめることができます。 「background」プロパティに背景画像に関する各プロパティの値を1つずつ値を記入します。 値同士は半角スペースで区切ります。 各プロパティの解説は以下を参照してください。 background-colorプロパティ background-imageプロパティ background-positionプロパティ background-repeatプロパティ background-attachmentプロパティ 各プロパティの記述順序について 「background」プロパティに設定する各プロパティの値の書く順番は順不同です。 どのような順番で書いても構いません。 プロパティの省略について 「background」プロパティに設定できるプロパティの値は5つですが、これらの値の一部を省略することも可能です。 この
background-image－スタイルシートリファレンス
background-imageプロパティは、背景画像を指定する際に使用します。 <BODY>や <TABLE>だけではなく、 <P>・ <DIV>・ <SPAN>などの要素にも背景画像を指定することができます。 背景画像はURLで指定します。 スタイルシート部分を外部ファイルにしている場合には、HTMLファイルから見た相対パスではなく、 外部スタイルシートファイルからの相対パスで指定しなくてはならないので注意してください。 背景に画像を指定する際には、背景色と文字色も同時に指定するようにしてください。 これは、ユーザーの環境により背景画像が表示されない場合に、 背景色と文字色の関係により、文字が読みにくくなってしまうことがあるからです。 ■値 URI（URL）で画像ファイルを指定 URI（URL）で画像ファイルを指定します。 none 背景に画像ファイルを使用しないことを明示します。これ
背景に画像【background-image】：CSS入門
以下、前回までのCSSコードです。 h1, h2 { margin: 0; padding: 0; } body { background-color: #ffff00; font-size: 100.01%; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Pゴシック","MS PGothic",Osaka,sans-self,Verdana,Arial,Helvetica; } h1 { background-color: #191970; color: #ffffff; font-size: 120%; padding: 5px; text-align: center; } h2 { background-color: #ffffff; font-size: 100%; border-top: 2px solid
イラストレーターCS6のhtml保存ができない
現在、イラストレーターCS6を使って操作を勉強中です。 ただ、本はCS5のものを使用していますので、若干異なる点というか、わからない部分があります。 「イラストにリンクを設定して、htmlで保存する」というところなのですが、 リンクは設定できたものの、gifしか保存できません。 本の通りにやると、 「ファイル」→「Webおよびデバイス用に保存」→「プリセットはGIFにしておく」→「保存」→「最適化ファイルを別名で保存」 ここで「ファイルの種類」を「HTMLと画像」に選択することができるのですが、CS6でやるとここで「画像のみ」しか選択できないようになっています。 どうすればHTMLとして保存することができるのでしょうか？ よろしければご回答お願いいたします。
Illustratorでパスに沿ったクリッカブルマップをつける | グレヌデサ La graine du dessin
Illustratorでクリッカブルマップをつける方法を自分メモがわりに投稿します。 詳しくはつづきで。 今回はこの近畿エリアの都道府県ボタンにクリッカブルマップをつけてみます。 １．クリッカブルマップにしたいパスを選択します。 ※パスが「複合パス」になっていると、パス通りのクリッカブルマップになりません。 ２．[ウィンドウ]メニューから[属性]をクリックして、属性パレットを表示させ、「イメージマップ」を「多角形」にします。 ３．「URL」にリンク先を指定。今回はアンカーリンクにしています。 ４．[ファイル]メニューから[Webおよびデバイス用に保存]をクリック。 ５．保存時に「ファイルの種類」を「HTMLと画像」に設定しておきます。 ６．パス通りのクリッカブルマップができました。あとはHTMLファイルのソースをコピペするだけです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの優先順位〜CSSテクニック〜
http://www.ryo.com/2006/07/27/247/
http://omazinai.isonoyado.com/index.php?%E3%82%A2%E3%83%B3%E3%82%AB%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A8%E3%81%AF
xml.vc