新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]

先日、「要素の幅が変動しても左右中央寄せする方法」を、こちらの記事でご紹介しました。 [blogcard url="https://www.web-myoko.net/blog/web-production/css3-max-content-margin-0px-auto-horizontal-center/"] つまり「要素の幅が変動していても、[margin:0px auto;]を …… 続きを読む

ホームページをデザインするとき、ページ内のちょっとした要素に「角度」をつけたくなることがありませんか? 「新着情報の一覧ページが、長方形の写真や四角いボタンばっかりで、ちょっと味気ない印象かな…。」 「せめて、この要素をクイッと斜めにすれば、ちょっと印象も変わるのになぁ…」 そのような状況にコーディング段階で対応するために、「要素を好きな角度だけ回転する方法」をご紹介します。 …… 続きを読む

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央に寄せたい場合は[text-align:center;]が一般的ですよね。 あるいはブロック要素なら、そのブロックの幅を決めたうえで、同じクラスやタグに[margin:0px auto;]のように指定すれば中央寄せになるでしょうか。 …… 続きを読む

Photoshop(フォトショップ)では、様々なブレンドモード(描画モード)が実現できます。 その表現を応用すればデザイン性の高い作品も作れますが、ホームページで、とくに更新の頻度が高いページに使う素材として描画モードを施した画像を扱うのは作業の手間がかかるもの。 でも、Photoshopと同様の描画モードがCSSで実現できるとしたら、いかがでしょう? 今回は、その方法をご紹介し …… 続きを読む

ユーザーの方の操作に応じて、Webページ内の表示や動きを制御するホームページは、今ではよく見受けられます。 それらを実現している要素は「jQuery&CSS」です! 今回は、jQueryでCSSのスタイル定義を追加・変更・削除する方法をご紹介したいと思います。 この記事の目次 [基本]jQueryでCSSを操作する(主な)2つの方法 [方法1]特定の要素のCSSのスタ …… 続きを読む

CSSで、ページ内のコンテンツとコンテンツを仕切る要素として「区切り線」というものがあります。 今回は「hr要素で区切り線をデザインする方法」として、基本的な考え方を中心にご紹介します。 この記事の目次 [前提]リセット用CSSであらかじめ記述しておきたいスタイル定義 [基本]リセット用CSSで定義してしまえば、ある程度は[border属性]だけで表現できる件 [応用]背 …… 続きを読む

主要ブラウザの一つとして、Safari(サファリ)も挙げられるかと思います。 「Safariだけ他のブラウザと表示が違う!」 という声を聴く頻度は、私の個人的には、あまりありません。 でも、ゼロではないのも事実です(^^;) そこで今回は「Safariが対象のCSSハック」をご紹介します。 Safariだけに適用されるCSS Safariのみにスタイルを適用させ …… 続きを読む

マイクロソフトに「Edge(エッジ)」というブラウザがあります。 コーディングをしていると、いろいろな理由でEdgeだけズレているという場合もあります。 今回は「Edgeが対象のCSSハック」をご紹介します。 Edgeだけに適用されるCSS Edgeだけに適用されるCSSは、適用させたいCSSのスタイル定義を[@supports (-ms-ime-align:auto) { …… 続きを読む

コーディングをしていると時々、一部のブラウザのみで、想定と違う表示になってしまう場合があります。 そのほとんどが「まるで違う」というより「微妙なズレ」という程度のものではないでしょうか。 一部のブラウザで表示がズレている場合、一般的には「CSSハック」と呼ばれる、そのブラウザのみで適用される特殊なCSSの記述形式を用いるのが一般的です。 今回はその中で「Internet Expl …… 続きを読む

ホームページを作るとき、特にスマートフォン用サイトの制作の場で「ハンバーガーメニュー」という単語をよく聞くようになりました。 HTMLとCSS、そしてjQueryを用いて作ることがまだまだ多いと思われますが、一部のスマートフォンの機種でjQueryの一部記述と相性が良くない問題があり、 「できればjQueryなしで作りたい!」 とお考えの方も多いようです(^^;) そこで今 …… 続きを読む

1 / 212

Copyright (C) 妙高Web屋 All Rights Reserved.