ヘッダとフッタを固定して常に表示 « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
少し前までのWebサイト制作ではフレームによって簡単に実装されていましたが、Web標準が重視されフレームの使用がご法度になった今、画面全体がスクロールするWebサイトが一般的になりました。しかし、コンテンツ部分が長くなると、コンテンツ上部にあるメニューボタンの利用が不便になるなど、ユーザビリティの低下も否めません。 好みや慣れもあると思いますが、XHTML+CSSでフレームのようにヘッダとフッタを画面の上下に固定し、常に表示する方法をご紹介します。 ページの情報量が少ない場合も画面最下部にフッタを表示する方法は、フッタ固定で紹介しています。 サンプル ヘッダとフッタを固定して常に表示するサンプル（別ウィンドウで表示） ソース 上記サンプルで使用しているソースです。 body{ margin: 0; padding: 100px 0 50px 0; } * html body{ overfl
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
[CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法
ナビゲーションを実装する時など、ul要素を使って水平に並べると意図しない隙間ができてしまうのを解決する方法を紹介します。 Fighting the Space Between Inline Block Elements [ad#ad-2] デモ 解決方法 floatでいいんじゃないの デモ まずは、元となるコードから。 HTML nav要素を使い、a要素で各アイテムを実装します。 <nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> </nav> CSS 「display: inline-block;」を使って水平に並べます。 nav a { display: inline-block; padding: 5px; background: red; } このままだと、下記のように意図しない隙間ができてしまいま
Google検索の「&as_qdr=y15」オプションが便利だぞ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
Firefox 4のplaces.sqliteが太らないように制限してみる: べつになんでもないこと
Firefox 4を使っているうちにplaces.sqliteが20MBに…… Firefox 3.xの頃と違い、極端な反応の劣化はないようですが、たまにスマートブックマークの表示がもたついたりするので、places.sqliteを初期値の10MBより太らないように制限してみることにしました。 某掲示板ｗによると places.history.expiration.transient_current_max_pages はPCのスペックに応じた値が自動的に設定され、上限を指定するには places.history.expiration.max_pages を整数値で設定すれば良いらしい。 max_pagesとはなんのページなのか分からりませんが、私のFirefoxはtransient_current_max_pagesが193249に設定されていてVACUUMすると19MBでした。 試しに
ウェブリブログ：サービスは終了しました。
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧
【Windows 10／11】タスクスケジューラで定期的な作業を自動化する
対象：Windows 10／Windows 11、Windows Server 2016／Windows Server 2019／Windows Server 2022 コンピュータを使って業務をこなしていると、定期的にほとんど同じことを繰り返している作業がある。例えば、ファイルのバックアップやウイルスのチェックなどが挙げられるだろう。こうした作業を手動で繰り返すのは非効率かつ面倒なので、できる限りコンピュータに自動実行させたい。 定例の作業を自動化できる機能として、Windows OSには「タスクスケジューラ」が標準で装備されている。本Tech TIPSでは、このタスクスケジューラを利用して定期的にプログラム起動を繰り返すための基本的な設定手順を説明する。 ここでは、Windows 10／11上で特定フォルダを毎日決まった時刻にファイルサーバへバックアップするという作業を例に手順を紹介す
neue cc - AutoHotKeyによるマウス/キーボード徹底カスタマイズ
目的と準備 キーボードには無意味なキーが多い。「変換」だの「無変換」だの使い道ゼロ。PauseやScrollLockなんてお飾り。Insertは間違えて押してイライラするだけ。マウスにしたって、たった3ボタンしかない貴重なホイールクリックボタンを利用頻度の少ない、ちょっとした特殊動作（例えばタブバー上で閉じるとか、ページ上では利用価値ゼロのスクロールアシストとか）に割り当てているようでは、勿体ない。というわけでこれらを有効活用しよう、というのが今回の目的になります。ついでに最終的にはボタン数の多さは正義、というわけで11ボタンマウスのカスタマイズのやり方まで進めます。 必要なのは日本語キーボード(キー数の多さが有利になります)、ふつーの3ボタンマウス、AutoHotkey。AutoHotKeyに関しては、とりあえずダウンロードしてautohotkey.iniをコリッと書き換えるだけ。書き換
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック
天地左右の中央に配置したい要素のサイズが幅も高さもピクセルで指定されていれば、marginやpaddingで簡単に配置できますが、サイズ指定にパーセントを使用した要素だと表示サイズに依存されてサイズが分かりません。 そんなパーセントで指定されたピクセルでの正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニックを紹介します。 デモページ：幅780pxで表示 HTML HTMLはシンプルで、中央に配置するdiv要素だけです。 <body> <div>Percentage sized and still centered.</div> </body> CSS ぱっと思いつく方法としてはパーセントをネガティブマージンで使えばいいのでは、となるところですが、ネガティブマージンを使用すると左右の中央はできますが、天地の中央がうまくいきません。 ここではネガティブマージンではなく、
ラッパーに含まれたコンテンツとヘッダ、ヘッダの幅だけラッパーを超えさせるテクニック | コリス
全体をラッパーで包み、ホワイトのコンテンツはラッパーで指定した幅だけど、レッドのヘッダは表示サイズが指定した幅より広い時にラッパーを超えた幅で表示するスタイルシートのテクニックを紹介します。 いやー、日本語ムズカシイ、、、 デモ 実装 デモ デモページは構造的にはラッパーの中に上から、半透明のレッドのヘッダ、ホワイトのコンテンツの2つで構成されています。 まずは、表示サイズがラッパーの幅960pxを超えた時の表示。 Improved Full Width Browser：幅1200px コンテンツは幅960pxで表示され、ラッパー内にヘッダが含まれているけど、ヘッダの幅はそのコンテンツのラッパーを超えている状態です。 表示幅が960px以下になると、ヘッダはコンテンツの上部に成り行きで収まります。 Improved Full Width Browser：幅780px 実装 HTML HTM
EvernoteのWindowsクライアントが劇的に軽くなる神ワザを教えてもらった | Busidea
EvernoteのWindowsクライアントが劇的に軽くなる神ワザを教えてもらった 2009年6月18日 2021年8月24日 2020年以前の記事 プレミアム会員にもなり、日ごろから大変お世話になっておりうEvernote。 しかし悲しいかな、Windows版のクライアントは、動作が大変重い。 自宅PCならいざしらず、モバイルPCにはかなりしんどいご様子で、定期的に火を噴きそうになるので、 私: しかし相変わらずEvernoteのwinクライアントの重いこと。何とかならんもんでしょうか と、ちょっと口走ったら @sq0202 デフォルトのフォントを日本語フォントにかえてみて下さい @sq0202 具体的にはWindows版クライアントのTools→OptionsメニューでNoteタブを選び、｢Default note font｣の設定(ここには通常｢Tahoma｣が設定されていると思いま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リレーショナル・データベースの世界
どうしてます？生姜の皮むき。 by taka_jam