ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

CSS

クロスドメインでiframeカスタマイズする際に抑えておきたいこととポイント

今回のホームページ制作講座では外部ドメインのiframeタグ内を編集する際に注意すべきポイントについてに関して説明しています。 第1の注意ポイントはクロスドメインでのiframeです。 基本的に外部ドメインのWebページなどをiframeで読み込んだ場合、CSS編集…

CSSをiPhone inputボタンで有効化する知識

ホームページ制作講座のブログ記事として今回は、ボタンCSSを有効化する方法に関してスマホサイトの送信フォームで有効化についてレポートしてみました。わりと初歩的な知識や基本情報に関して記事にすることが多いです。 《ホームページ制作講座の手順の流…

img画像下余白をCSS flexboxで消去する知識

ホームページ制作講座のブログ記事として今回は、イメージ画像したの空白を編集する方法に関してCSS3のレイアウトモジュールflexboxで消去についてレポートしてみました。わりと初歩的な知識や基本情報に関して記事にすることが多いです。 《ホームページ制…

%、em、remについて-CSS プロパティ値における違いを理解するWeb制作講座

今回のホームページ制作講座ではCSS(カスケードスタイルシート)でパーセントやemまたはrem指定において、それぞれの相違点する一連の流れについてプロパティ値における違いを理解することに関して解説しています。 [第1の解説]まずは、%(パーセント)につい…

記号が小さく表示される状況をCSS font-familyを利用して解決してみましょう。

今回のホームページ制作講座では表示が小さい記号文字を対処する一連の流れについてHTMLソースのプロパティfont-familyで解決に関して説明しています。 [第1の工程] ここではCSSファイルを使用して、特定記号〇や△などを表示指定する一番最後に読み込まれる…

CSS背景の透過問題解決集backgroundの背景画像と背景色解決する

css背景画像と背景色の透過に関係のある知識が必要な場合は、サーチ検索では下の関連キーワードで検索してもよいでしょう。 css背景画像と背景色の透過の問題解決について。 cssによる背景色や背景画像の透過指定方法は、主に2種類の指定方法があり希望する…

CSS背景画像のサイズを変更する問題解決集backgroundのサイズ変更解決する

CSS背景画像のサイズを変更するに関係のある知識が必要な場合は、サーチ検索では下の関連キーワードで検索してもよいでしょう。CSS背景画像のサイズを変更するについてより理解を深めるための検索キーワードの組み合わせには、background-size:background-si…

CSS heightとwidthプロパティのvh/vw/vmin/vmaxの知識

CSS heightとwidthプロパティのvh/vw/vmin/vmaxに関係のある知識が必要な場合は、サーチ検索では下の関連キーワードで検索してもよいでしょう。 CSS heightとwidthプロパティのvh/vw/vmin/vmaxについてより理解を深めるための検索キーワードの組み合わせには…

画像のtext-align:centerが効かない時の解決方法

ブロック要素内でimgタグをCSSでtext-align:centerで指定しても、ブロック内の中央に配置されない。テキストを配置した場合には正しくセンタリングされるのである。 imgタグのCSSセレクタにdisplay:blockプロパティが指定されていたので、優先度の高いセレク…

CSSセレクタのプロパティの値inheritに関する記事

CSSプロパティ値でたまに"inherit"なる値が設定されていたりする。inherit(インヘリット)とは、『継承』という意味で、このセレクタの親要素のプロパティ値を強制的に継承させるという意味です。継承させたい同一のプロパティ値が大量にある場合は有効ですが…

リンク画像イメージの点線枠囲み線を消すためのCSSプロパティ

ホームページ内にaタグでURLリンクを貼りつけたイメージ画像ですが、選択時やページ内でクリックした場合などは、画像の周りに点線の枠が見られます。 マウスオーバー時のマウスカーソル同様、どの画像が選択されクリッカブルなのかをユーザーに知らせてくれ…

CSSセレクタの優先順位を指定する!important宣言

CSSはカスケード(段階や構造)化された名前の通り、最後に記述されたセレクタが優先され、各セレクタの優先順位はIDセレクタ、クラスセレクタとなっています。また、import(ブラウザによっては読み込みが遅くなる)などでCSSファイルを指定した場合もその記述…

CSSスプライトについて

CSSスプライトとは、.. 画像の呼び出しは、キャッシュが残っていたりしない場合は、プリロードするか表示する度にリクエストするので、回線やサイト閲覧に多少不可がかかり、表示が遅くなったりします。CSSスプライトで画像をなるべく一度の読み込みで完了さ…

Flashやimg、アンカーリンクの周りの点線を消す方法

読み込むHTMLページに背景色を指定し制作したFlashコンテンツやリンクを貼ったimgタグをFirefoxでプレビューしたところ、flashやimgタグの周りに点線が表示される。背景色が濃い場合ですが点線が目立つので、点線を消す方法が必要です。 それにはswfファイル…

table内のボーダーを重ねるborder-collapse

table内のセルにボーダーを指定した場合、隣り合う線が並ぶので1pxで指定した場合、テーブルの左右の端のみ1pxボーダーで、内部のセルが隣接する部分が2pxになり、すこし見栄えがよくないので、この部分を重ねます。 CSSのセレクタ内にborder-collapseプロパ…

list-style-positionプロパティでレイアウト崩れを直す

ul(Unordered List=順序のないリスト) とli(List Item)などを使用する場合、マーカーリストのタイプlist-style-typeやマーカーの位置について記述する必要があります。これらの記述はブラウザごとに解釈がまちまちであったり、階層構造によってはCSSのプロパ…

CSS3対応ブラウザ一覧

CSS3対応ブラウザ一覧CSS3対応ブラウザ一覧はまず、対応一覧サイトで。http://www.findmebyip.com/litmus/カスケードスタイルシートのヴァージョン3、CSS3ですが、新しい言語ではないようです。従来のCSS2との互換性もあり、セレクタやプロパティのcss2拡張…

margin:autoセンタリングCSS

WEBサイト制作時に、最近はブラウザウィンドウの中央にコンテンツ表示させるセンタリングがかなり標準的に なってきました。CSSで制御する場合、margin:auto;でdivタグなどのブロックレベル要素を中央に表示させるわけですが、 記述方法と×などについてまと…

imgタグの枠線を消してみる

imgタグをアンカータグで囲んだ場合、Aタグ内のイメージ画像をクリックすると、リンク参照ができるようになりますが、まれにリンクの枠線がイメージ画像を囲んでしまう場合があります。 機能やレイアウトにはまったく問題ないのですが、(ブラウザFireFoxでは…

CSS入力指定のinputタグime-mode

メールフォームなどで使用されるinputタグのtype=textにCSS指定で半角全角入力の指定が可能な"ime-mode"プロパティがありますが、 値の種類についてまとめてみました。 ime-modeとはテキスト入力時のIMEの入力モードを指定するInternet Explorerで独自に追加…

imgとテキスト、水平に揃わない

CSS

テキストに画像の回り込みや、同じブロック上に配置する場合ですが、入れ子になるCSSの指定方法によってはブラウザでの表示の仕方がことなり、テキストと画像の水平位置が揃わないことがあります。 その場合、imgタグに回り込み指定や、CSSのvertical-align…