cssで見出しにアイコン画像を表示させる方法いろいろ - emuramemo
見出しのアクセントとしてよく使われるアイコン画像。 imgタグで表示させるよりもcssで書いたほうがメンテナンス性にも優れます。 センター寄せをする方法も含め、まとめておきます。 １．backgroundで表示する方法 cssでアイコン画像を表示させる一番スタンダードな方法です。 backgroundのプロパティ内容は場合によって変更して使いわけます。 html <h1 class="title">タイトルです</h1> テキストが１行の場合 CSS title { padding-left: 30px; line-height: 30px; background: url(../images/icon.png) no-repeat; } line-heightでアイコン画像とテキストの上下位置を中央にするテクニックです。 line-heightはアイコンの高さ分を指定し、 padding
HTMLタグ/ページ全般タグ/お気に入りアイコン（ファビコン）を指定する - TAG index
type属性の値には、使用する画像のMIMEタイプを指定します。 例えば、ファビコンで使用する画像がICO形式で作成されている場合は、以下のように記述します。 type="image/vnd.microsoft.icon" ファビコンで使用する画像は、ICO形式で作成するのが一般的です。（IEがこの画像形式にしか対応していないので） ファビコンの表示例 使用例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
HTML で同一階層のパスを指定する方法。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog えぇっと、色んなサイトを見ていて「あれ？ 意外とみんな知らない？」と思ったことがあるので、サラッと書いておきます。 「んなことくらい知っとるわ！」という方は優しくスルーしてください。 一つ前の階層とルート まずはおさらい。 HTML で一つ前の階層を指定するときは「../（ドット ドット スラッシュ）」と書きます。 例えば、 <a href="../index.html">一つ前の階層のトップページへ</a> みたいな。 また、ルートのパスを指定するときは「/（スラッシュ）」のみを書きます。 例えば、 <a href="/index.html">トップページへ</a> でトップページに戻れる訳です。 この2つは、どのサイトでもよく使われています。 特に前者は使わな
WordPressの生成するURLには.htmlの拡張子を付ける方が良いのか | SEOのホワイトハットジャパン
WordPressの吐き出すURLは、デフォルトのhttp://example.net/?p=123といった形のものや、http://example.net/hogehoge/ のような形式の/（スラッシュ）で終了する形がよく使われています。 では、WordPressが生成するURLに.htmlの拡張子を与え、htmlファイルであるかのごとく見せかける行為に意味はあるのか。 結論からいうと、新規コンテンツの場合は意味はありません。 しかし、MovableTypeからWordPressに移行される方や、htmlで作成したサイトをWordPressへと移行させたい場合は、.htmlを与える方が良いと考えられます。 今回は、WordPressの生成するパーマリンクに拡張子をつけた方がいい状況や、付ける必要がない状況について解説いたします。 WordPressのパーマリンク設定 拡張子を付ける設定
はてなブログ | 無料ブログを作成しよう
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
Webサイトの作り方のまとめ！コーディングまで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめました。 ここで言うコーディングとは、「HTMLで文書を書いて（マークアップして）、CSSで見栄えを整える（CSSコーディングする）」ことを指します。主に「Webデザイナー」と呼ばれる人たちが担う範囲のコーディングについて書いてます。 以下は目次です。クリックするとその項目へ移動します。 コーディングの下準備 ディレクトリの構造を考える ディレクトリの設置 Web開発環境について CotEditorというテキストエディタ Zen-Codingという便利なプラグイン その他のWeb開発環境 コーディング！まずはマークアップ（HTML） index.htmlの基本設定 トップページの内容をマークアップ コーディング！レイアウトを整える（CSS） style.cssの基本設定 トップページのレイアウトを整える <heade
文字と画像の位置がずれる。[初心者のお小遣い稼ぎ＋ホームページ作成情報局]
◇文字と画像の位置がずれる 画像と文字をうまく並べたいことってありませんか?たとえば下記のような場合です。 ←サンプル画像 これだと文字が画像に対して下すぎませんか? ここでは文字と画像の位置をある程度揃えるにはどうすればよいかを説明します。 ◇位置をそろえる方法 方法としてalign="absmiddle"もしくはalign="middle"を使う方法があります。また上にそろえたい場合align="texttop"等でできます。記述方法を下記に説明します。 （例1）真ん中にそろえたい場合 <p><img align="absmiddle" src="img/sample.jpg" width="50" height="50">←サンプル画像</p> ↓結果↓（このようにある程度位置をそろえることができます。） ←サンプル画像 （例2）テキストを上に持っていきたい場合 <p><img al
WordPressで作ったサイトを静的サイトへ変換する | Permanent SEO
レンタルサーバの引越しに一通り目処がつきました。当サイトは１月ほど前にサーバ引越しを終えていたのですが、引越し元のサーバでプライマリドメインに設定していたサイトをどう移行させるかで色々と悪戦苦闘してつい３日ほど前に移行を完了させております。 そのサイトですが、ワードプレスの2.6で作成したサイトなのですが、コレを機会に静的なXHTMLサイトへ変換してしまおうと目論みました。 yahoo知恵袋に紹介されているWEBページの保存の中で紹介されているweboxというフリーソフトを使ってWordPressで作った自分のサイトを全て静的なXHTMLファイルとしてローカルにダウンロードしてみました。 このWEBBOXというソフトは本当に素晴らしく、目論み通り目的の静的XHTMLファイルをほぼ理想の形（ディレクトリ構造含む）でローカルに保存する事が出来ました。 WordPressでサイトを作成してもう手
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://kobotake.com/webmaster
サービス終了のお知らせ