忍者ブログ
手探りでパソコンの事を勉強するブログです。 何か覚えたら記録していきます。
2024 . 04
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
    • 　　

    [PR]



     このエントリーをはてなブックマークに追加
    ×

    [PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

    ブログの外枠（左右）に影をつけるレイアウト方法



     このエントリーをはてなブックマークに追加
    このブログにも導入されていますがブログなどの全体のレイアウトの枠に影のような物を表示させる方法を紹介します。実はこれの仕組みは結構シンプルで高さ1pxの画像を縦に並べてるだけなんです。

    まずは画像を用意します。
    仮にレイアウトの幅が1024pxだった場合は1024px*1pxの影用の画像（1054px*1px）を用意します。

    b97280c9.png

    影をつけたいところ全体に適当なクラスを付けた<div></div>で囲みます。
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <div class="kage">

    ~コンテンツスペース~

    </div>
    </body>
    </html>


    PR

    xhtmlにて<input> を *行目の <form>～</form> 内に書くことはできません。



     このエントリーをはてなブックマークに追加
    ショッピングカートなどを利用するときに発行される貼付け用のタグでよくあるのがこれ。
    発行タグをそのまま貼り付けた場合にxhtmlを宣言しているコードだとよくこのエラーが出ます。
    このエラー分は解説を見てもどう直したらいいのか具体的な解決策を書いていなかったため今回紹介します。

    このエラーは<form>～</form>の間に<p>～</p>を挿入することで回避できます。
    以下は例文です。

    <form action="http://hoge.net/hoge/basket.php" method="post">
    <p>
    <input type="hidden" name="action" value="regist" />
    <input type="hidden" name="goodno1" value="01" />
    <select name="count1" tabindex="1">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select> セット <input type="submit" value="買い物かごに入れる" tabindex="1" accesskey="a" />
    <input type="hidden" name="surl" value="http://hoge.com/hoge.html" />
    </p>
    </form>

    見出しの先頭に画像を表示する



     このエントリーをはてなブックマークに追加

    <h1></h1><h2></h2>などの見出しタグの先頭に画像を表示させる方法です。


    CSSソース


     <style type="text/css">
    h1.entry-title {
        background-image:url(http://hoge.gif);
        background-repeat:no-repeat;
        background-position:left top;
        padding-left:26px;
        background-position: 2px 4px;
    }
    </style>

    htmlソース

     
    <h1 class="entry-title">見出し</h1>


    aee2ff66.PNG

    面白いテーブルレイアウト



     このエントリーをはてなブックマークに追加
    寝る前に面白いテーブルレイアウトを思いついたので紹介します。
    セルを結合させる方法で設計しました。
    個人的な感想ですが、こういったテーブルレイアウトは紙などに設計図を書いてからソースを考えたほうが作りやすいと思います。
    すでに誰かが思いついているかも知れませんが一応。。。

    横方向のテーブルセル結合　colspan="数"
    縦方向のテーブルセル結合　rowspan="数"

    <th></th>や<td></td>に適用して使用して下さい。

    携帯ボタンでジャンプするハイパーリンク



     このエントリーをはてなブックマークに追加
    　携帯用のＨＰはコンテンツが多くなるとそれだけ縦の幅が長くなって、一番下までスクロールするのにすごく時間がかかってしまうようになります。
    そこで携帯電話の①や②ボタンを押すだけでページ内の指定した場所にジャンプできるリンクを紹介したいと思います。

    使う技術はそれほど難しくはなく、HTMLだけでできます。

    HPのファビコン（アイコン）を設定する。



     このエントリーをはてなブックマークに追加
    <head></head>内に記載する。

    <link href="favicon.ico" rel="shortcut icon" />

    rel=""
    shortcut icon     を指定します。

    href=""
    ファビコンファイルを指定します。
    .icoファイルを指定します。

    HOME
    ©パソコン手探り all rights reserved.
    Powered by ニンジャブログ　　Designed by ピンキー・ローン・ピッグ
    忍者ブログ / [PR]