角の丸い「タブ」をHTMLとCSSで作る方法 [ホームページ作成] All About角の丸い「タブ」をHTMLとCSSで作る方法左上と右上の角を丸くして「タブ」に見えるデザインをHTMLとCSS(スタイルシート)で作成する方法を解説。リンクに長方形の枠を加えて上側の角を丸くすると「タブ」らしく見え、視覚的に分かりやすいナビゲーション機能が作れます。文字はテキスト・配色はCSSで記述するため、ソースをコピーするだけでいくつでも並べられ、修正も簡単です。
![角の丸い「タブ」をHTMLとCSSで作る方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/1e3ad433daeb1ba25ad4d76ff7b050a2ac61043c/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F7%2F0%2Ftopimg_original.png)
長さを変更できるテキスト入力欄を作る [ホームページ作成] All About
テキスト入力欄の長さを変更可能に 掲示板やメッセージ送信フォームなどでは、投稿欄（入力欄）が狭いと長い文章が書きにくくなってしまいます。 かといって、広大なスペースを最初から取っておくとページ全体を見渡しにくくなってしまいます。 そこで、投稿者が必要に応じて編集領域を広げられるようなテキスト入力欄を作ってみましょう。 上記の入力欄の下部にある「広げる」ボタンや「狭める」ボタンをクリックしてみて下さい。 クリックするたびに、2行分ずつ入力欄（編集領域）が増減します。 なお、accesskey属性を使ってアクセスキーを指定してありますので、以下のショートカットキーでもボタンを押せます。（キーの方がマウスよりも連続で押しやすいです。） ●Windowsの場合は(※) ・（[Shift]＋） [Alt]＋[X]キーで「広げる」、 ・（[Shift]＋） [Alt]＋[C]キーで「狭める」ボタンを押
![長さを変更できるテキスト入力欄を作る [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
どのリンクが選択中なのかを際立たせる装飾 [ホームページ作成] All About
メニューやリンクリストに活用するとおもしろいかも？ リンクの上にマウスポインタを載せると装飾が変化するデザインは、よく使われていますね。 では、リンクの上にマウスを載せたときに、リンクの横や上などに矢印を表示させる装飾はいかがでしょうか。 以下のリンクにマウスポインタを重ねてみてください。 リンクにポインタを重ねると、リンク文字の右側に赤色の矢印（）が現れるはずです。 リンクからマウスを放すと、矢印は消えます。 動的に矢印画像が表示されたり消えたりしますが、ここではスクリプトは一切使っていません。スタイルシートだけで実現しています。 ここで表示しているリンクは、通常のテキストリンク（文字で書いたリンク）です。 どんな文字を何文字表示させているリンクの横でも実現可能です。 矢印でなくても表示可能 もちろん、表示させるのは矢印である必要はありません。以下のような装飾も可能です。 リンクにマウス
ボックス横幅の最大値・最小値を指定する [ホームページ作成] All About
ボックス横幅の最大値・最小値を指定する可変幅のボックスを作る際、範囲を制限したいことがあります。「80％の横幅で表示するが、200pxより小さくはしたくなく、800pxより大きくはしたくない」というような場合です。スタイルシートで簡単に指定できます。 リキッドレイアウト（サイズが可変なレイアウト）を作る際、デザインが崩れないよう「最大幅」や「最小幅」を指定したいことがあります。 例えば、「原則として80％の横幅で表示したいが、200ピクセルより小さくはしたくなく、800ピクセルよりは大きくしたくない」というような場合です。 （＝200～800ピクセルの範囲内だけで横幅を可変にする） これらの指定は、すべてスタイルシートを使うことで簡単に実現できます。横幅はもちろん、横幅の最大値・最小値も指定可能です。 以下にサンプルページを用意しましたので、試しに表示させてみて下さい。 ウインドウ幅を変化
サイト内検索機能を設置する（Google版） [ホームページ作成] All About
サイト内検索機能を設置する（Google版）自分のホームページ内に限定した検索機能（サイト内検索機能）を設置したくありませんか？ 高度なスキルがなくても、HTMLを貼り付けるだけでサイト内検索機能を実現するお手軽な方法があります。ぜひご活用下さい！ サイト内検索機能を設置してみましょう ホームページのページ数が増えてくると、自分のホームページ内に限定した検索機能（サイト内検索機能）を設置したくなりませんか？ namazuなどの全文検索エンジンをサーバ内に設置できるホームページスペースを使っているなら、それらのシステムをセットアップすることで、自前でサイト内検索機能を提供できます。 しかし、そういう環境を使っていない方々も多いでしょう。 そこで、指定されたHTMLソースを貼り付けるだけで設置できる、お手軽サイト内検索機能の利用方法をご紹介致します。 カスタマイズもできるサイト内検索機能 今回
右クリックを禁止する方法と禁止を解除(回避)する方法 [ホームページ作成] All About
右クリックを禁止する方法と禁止を解除(回避)する方法ブラウザ上で右クリックした際に表示されるメニュー(コンテキストメニュー)の表示を禁止したり、コピー操作を無効化したり、その際に警告を表示したりする方法はとても簡単です。しかし、その禁止や無効化を解除(回避)する方法もとても簡単です。右クリックやコピーを禁止するHTML＋JavaScriptの書き方と、その解除方法の両方を解説。 ブラウザ上での右クリック禁止は簡単だが、禁止の解除(回避)も簡単 多くのブラウザでは、ウェブページ上でマウスを右クリックすると状況に応じたメニューが表示されます。たとえば、画像を右クリックすれば、画像だけを単独で表示させる項目や、画像を保存する項目などが表示されるでしょう。ページ上の何もない場所で右クリックすれば、そのページのHTMLソースを表示する項目などが表示されます。 このような、マウスの右クリックで表示され
![右クリックを禁止する方法と禁止を解除(回避)する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/6bd4f9813cf27915c112d61469c0c5d41c8d22dd/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F9%2F3%2F201609181519%2Ftopimg_original.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
