CSS3では、border-radiusプロパティを使う事で角丸を表現する事ができます。 この方法を少し詳しく調べてみました。 .radius{ border-radius: 10px; /* CSS3草案 */ } ここの10pxとは角丸の半径の大きさとなります。 ただし、現在のところはCSS3はまだ草案なので、 Safari、Google Chrome では -webkit-border-radius、 Firefox では -moz-border-radius と指定します。 Safari、Chorme用(-webkit-border-radius) 4辺を一括指定する場合は以下のように書きます。 .webkit1{ -webkit-border-radius: 10px; /*一括指定*/ } 4辺を個別に指定する場合は以下のように書きます。 .webkit2{ -webkit-b
「指定したページが見つからない」(404エラー)など、Webサーバが表示するエラーページをカスタマイズしてオリジナルページにする。これも/etc/apache2/conf/commonapache2.confで行う。 すべての17種類すべてのエラーページを用意するのは大変なので、よく使う(?)4種類のページだけオリジナルにした。commonapache2.confのデフォルト設定は、# ErrorDocument 401 /error/HTTP_UNAUTHORIZED.html.var # ErrorDocument 403 /error/HTTP_FORBIDDEN.html.var # ErrorDocument 404 /error/HTTP_NOT_FOUND.html.var # ErrorDocument 500 /error/HTTP_INTERNAL_SE
CSSをシンプルに書くことができるLESS使ってみた CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 投稿日2011年12月13日 更新日2011年12月13日 ネスト(階層)化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a
実は以前に別の場所でも書いたのですが、今回Google Page Speedの方でも少しだけ触れられていたので、改めてまとめ。 自分でも経験があることなのですが、開発をやっているとどうしても、構造をモジュール化して複数のファイルに分割して管理したくなります。 StyleSheetにおいても同様で、プレゼンテーション層のコンポーネントにあわせてCSSを用意し、ページ構成にあわせて取り込むようなことをやりたくなるでしょう。 しかしその際、@import構文を使うのはパフォーマンスと挙動の両方に有害である可能性が高いと、「」の著者としても知られるSteve Souders氏が警鐘を鳴らしています。 使うべきでないポイント @importは、大きく分けて2つの観点で「使うべきでない」とされています。 ひとつは、パフォーマンスの問題。StyleSheetはほぼ全ての主要ブラウザでパラレルロードがサポ
VALUE-DOMAIN.COMでドメインを取得しましたが アドレスバーのFaviconが変わって困ってます。 Apacheに RewriteEngine On RewriteCond %{REQUEST_URI} "favicon.ico$" RewriteRule "(.*)(favicon.ico$)" "<faviconファイルまでのパス>" [N,PT] と記述しても HTMLファイルに <link rel="shortcut icon" href="ファビコンまでのパス/favicon.ico"> と記述しても変えることができません 非常に困ってますどなたか分かる方がいましたらどうか教えていただけないでしょうか できればApacheで設定できればうれしいです。
HTMLファイルの中でもmetaタグ指定で任意のページに飛ばすことが可能だ。しかし、この方法では明らかに転送元ページが表示されるため、場合によっては不利な点がある。また、永続的に転送させたい場合には、次のようなサーバ側で設定する方法が安心できるだろう。 ここで紹介するのは、Apacheの設定でURL転送(リダイレクト)を行う方法だ。 # vi /etc/httpd/conf/httpd.conf (RPMの場合) # vi /usr/local/apache/conf/httpd.conf (ソースからの場合) DocumentRoot "/var/www/html" <Directory /> Redirect / http://www.example.com/ </Directory> ※メインのホストアドレスにアクセスすると、www.example.comに転送される。ただし、このよ
僕のところに、毎月1,2件必ず寄せられる質問があります。 それは、「wwwあり」のURLと「wwwなし」のURLに関する質問です。 もう少し正確に言うと、「wwwあり」と「wwwなし」の統合です。 同じコンテンツを示すURLが、「http://www.example.com/」と「http://example.com/」のように、2つに分かれてしまっている場合があります。 人間にとっては同じでも、検索エンジンにとってはまったく別のページになります。 被リンクが両方に張られていたら分散してしまうし、それよりもなによりも異なるURLで同じコンテンツなので、複製コンテンツとしてマークされてしまう危険も付きまといます。 本来ならサイトの構築を始める前に、「wwwあり」で運用するのか、「wwwなし」で運用するのか決めるべきですが、何らかの事情で分かれてしまっていることもあるでしょう。 そこで、「ww
現在運用中のWebサーバーで、もうひとつWebサイトを運用する。 ここでは、WebサーバーApacheのバーチャルホスト機能を使用して、以下に示す条件で2つのWebサイトを運用できるようにする。 ・メインWebサイトはhttp://centossrv.com/ ・追加するWebサイトはhttp://virtual.com/ ・メインWebサイトのドキュメントルートは/var/www/html/centossrv.com ・追加するWebサイトのドキュメントルートは/var/www/html/virtual.com ・メインWebサイトへのアクセスログは/var/log/httpd/access_log、/var/log/httpd/error_logに記録する ・追加するWebサイトへのアクセスログは/var/log/httpd/virtual.com-access_log、/var/lo
アドレスの左に付いてるあのアイコン=ファビコン 作成方法は以下の通り 1.「16px×16px」と「32px×32px」の画像 を作成 2.上記をgifかpngで書き出す 3.@icon変換(※インストールしなくてもexeファイルダブルクリックで使えます。) http://www.vector.co.jp/soft/win95/amuse/se201729.html を使って、 32x32 16x16 の2つの画像を、ツール内にドラッグ。 4.@iconで二つとも選択しながら、「マルチアイコンに保存」をする。 ※2つの画像を1つのアイコンにすることができる。 5.好きな場所に保存 6.<link rel="shortcut icon" href="ファビコンまでのパス/名前.ico" /> を<head></head>内に挿入。 7.各ページに設定 8.サーバーにアップ 9.完了 【ドメイ
うまくいかない場合の原因と解決方法 「.htaccess」ファイルを記述してアップロードしたのにうまくいかない場合は、下記の原因と解決方法を参考にして下さい。 ■どこにアクセスしてもInternal Server Error が表示されてしまう場合 「.htaccess」ファイルをアップロードした結果、どのページを閲覧しようとしても、すべてに「Internal Server Error」が表示されるようになってしまった場合は、 「.htaccess」ファイルの記述内容に誤りがあります。このファイルの中身に誤りがあると、有効範囲内の全てのページの閲覧ができなくなります。 この問題に遭遇した場合は、もう一度すべての記述方法を読み直して、「どこか書き間違えていないか?」、「余計な文字を書いてしまっていないか?」などを確認して下さい。例えば、半角スペースで空ける必要のある箇所で全角スペースが使われ
▼メルマガ移行中▼ 現在、ブログとメルマガをリニューアル中です! 新メルマガはこちらで配信していくので、まだ移行していない人は登録お願いします。 → 今すぐ購読する 今はこんなことやってます! → 最近の活動について シリウスではファビコンが自動生成してくれる機能が有ります。しかし、クロームではファビコンが表示されないことがあります。 これには相当の時間を費やして・・何度も悩みました。結果、以下の手順でキャッシュをクリアすると解決です。 Google Chromeで「設定」から「履歴」へ。 (もしくはアドレスバーに【chrome://settings/】と入力) すべてのデータを消去を選択します。 以下の項目にチェックをいれ、履歴データを消去。 これでブラウザを再起動して該当のサイトを開けばOKです。・・・以上。 簡単なことなんですけど、ハマりました。せっかくファビコンを設定後は、すぐにチ
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く