HTMLとCSSについて

2019年1月30日追記 2020年には埋め込みに使っていたAPIが使えなくなるので、この記事情報では設置ができなくなる可能性があります。 ご了承ください。 以前に紹介した埋め込み方法が非対応になっていました 最新のin […]

同じコンテンツを繰り返し使いたい場合に有効な「clone」 Webサイトを作成していると、1ページ内で何度も登場するコンテンツが見つかります。 例えばページャーや、ページ内リンクボタン、ナビゲーションがそれに当たるでしょ […]

JavaScriptで制御する 以前も背景を固定したページをInternetExplorer（IE）で表示した時に背景が上下に揺れるという現象についてお知らせしました。 背景を固定した時、IEでガタガタ動く現象について […]

rgba()を使って透過させる 要素を透過させる時には「opacity」を使用すると思います。 ですが「opacity」では、CSSを割り当てた要素全体が透過します・・・ なのでその要素に含まれる画像や文字も透過してしま […]

Flexboxはスマートフォン用のCSSに適用させる レスポンシブサイトを作る時に便利なFlexbox・・・非常に使い勝手がいいものの、IEなどの一部のブラウザでは対応していないものもいくつかあるので、なかなか使う事がで […]

コメント機能を活用して編集箇所を検索する CSSを編集していると、「あの項目はどこで設定したっけ？」とか「あのページのCSSはどのあたりに書いたかな？」と迷子になる事があります。 全てのページ、全てのパーツを同じ日に作り […]

Internet Explorerで発生する現象 スクロールしても背景画像が固定するような構成になっているWebサイトをよく見かけます。 これはCSSで背景画像に position : fixed background- […]

ブラウザの大きさを基準とした単位 CSS3では新たに「vw, vh, vmin, vmax」という単位が追加されたいたんですね。つい先日まで知りませんでした・・・ これら4つの単位に共通で付いている「v」は「Viewpo […]

idやclass名を日本語に設定する事ができます 以前に参考にしていたWebサイトを見ていた時です・・・何気なくclass名を確認してみると驚きの光景が広がっていました・・・ ・・・class名に日本語が使われていたんで […]

thやtdにpositionを指定しても効かない 先日、tabel要素のセルにアイコンをpositionで位置を指定して配置したい案件があったので、何気なしにtd要素へpositionを付けました。 普段から使っているG […]

viewportを設定して、表示させる画面サイズを決める GoogleのモバイルフレンドーテストでWebサイトをチェックしたとき、「モバイル用viewportが設定されていません。」なんて文言を見たことはありませんか？ […]

どうして？背景が途切れてしまう現象の解決法 作成したホームページをブラウザで表示させて、ウィンドウ幅を狭めてみてください。 横スクロールが出る状態になったら、今度は右へ移動させてみてください。 ・・・bodyなどに設定し […]

スマートフォンファーストで作ると印刷対応が難しい レスポンシブWEBデザインで作られたページの場合、画面幅によってCSSを切り替えます。 普通にブラウザで閲覧するには問題になりませんが、印刷する時・・・この時には思い通り […]

類似ページについて スマートフォン用にページを作った場合、PC様とスマートフォン用、二つのページが存在し、互いに掲載内容がほぼ同じになります。 同じWebサイトですので違うのはCSSや読み込ませる画像程度で、コンテンツま […]

paddingやborderを付けた時の要素幅指定について paddingとかborderって意外と厄介ですよね。 例えば横幅500pxのボックスを用意します。 そこにpadding:50px;とborder:5px s […]

2019年1月30日追記 2020年には埋め込みに使っていたAPIが使えなくなるので、この記事情報では設置ができなくなる可能性があります。 ご了承ください。 この記事にある実装方法では、設置ができない可能性があります。 […]

まだまだなくならないIE10以前・・・ Windowsに最初からインストールされているInternet ExplorerことIE 今では最新バージョンの11以前はサポートが終了していますね。 サポートの切れたインターネッ […]

コンテンツの高さを揃えたい時に便利！ Webページを作成していて3カラム、2カラムなどの複数列にコンテンツを配置する事がありますよね。 1行であればそこまで問題になりませんが、2行3行と複数行になっていくとコンテンツの高 […]