
スタイルシートで文字を「斜体」にしようとしてはまる
HTMLでホームページを制作する場合、スタイルシートは欠かせません。今や装飾はほとんどスタイルシートでできます。 そんな ...

英文を両端ぞろえにする
ホームページの文章を見栄えよくする方法として、両端ぞろえという方法があります。文章の右側が、改行位置でそろっていると、見 ...

背景画像を画面中央+300pxにする。
背景画像はスタイルシートの指定で、左寄せ、中央寄せ、右寄せ、上寄せ、下寄せがあります。ですが、今回次のようなことをする必 ...

CSSで背景の下半分だけ色を塗る
web制作でスタイルシートでの背景設定はとても重要です。文章の羅列を、デザインに変化させるからです。 今回デザイン上、「 ...

tdタグにnowrapが指定されている場合に強制改行させる。
半角英数字で記述すると、単語の途中では改行されず枠からはみ出るというものがあります。その場合は、スタイルシートで「wor ...

CSSの:before :afterでz-indexがうまく機能しない現象に対処
最近はHTMLのコーディング作業での装飾にスタイルシートを使うことが多くなりました。以前は画像を使って背景に当てていまし ...

スタイルシートだけで サイド部分をスクロール固定する。
ホームページは、2列構成になるケースがあります。メインカラムと、サイドカラムです。 たいていメインカラムのほうが縦に長く ...

cssでtdタグにmin-heightと同様の機能をいれてみた
tableタグを使用してカレンダーを構築している際に、気になることがありました。それはTDタグの高さが足りないということ ...

font awesome アイコンを文字の縦中央に合わせてみた
ホームページ制作でアイコンの役割はとても重要です。直感的に意味を伝えてくれるからです。 そんなわけで、アイコンフォントで ...

レスポンシブで長方形画像を正方形のままキープする
以前、長方形画像をスタイルシートで正方形表示する方法について記事を書きました。 スタイルシートの object-fit ...

css だけで文字を回転させる
ホームページ屋にとって、スタイルシートを極めることはとても重要です。なぜならば、レスポンシブに対応するためにはHTMLコ ...

CSSだけで縦書きを実現する
ホームページは基本的に横書きの媒体です。なぜならば、横書きは改行位置が上から下へ流れますが、縦書きの場合は改行後下から上 ...

半角アルファベットでレイアウトが崩れる場合に強制改行させる方法
HTMLに長いこと携わっていても、たまに初歩的なことでつまずくことがあります。単純な現象ほど難しかったりするものです。今 ...

inputのplaceholderに色を付けてみた
placeholderとはあまり聞きなれない名称です。わかりやすく言うと、入力フォームの中に記述されている「入力例」のこ ...

CSSだけでリンクを無効にしてみた
ホームページが一般的になって最も有効に使われたタグがあります。それは「リンクタグ」です。 他のページへジャンプするだけの ...

HTMLで画像の右クリック保存をガードする
HTMLはその特性上画像をダウンロードしたり、ソースを閲覧することが容易にできるようになっています。 ただ昨今、著作権や ...

fixedで指定したCSSを縦横中央寄席にしてみた
スタイルシートで、縦横中央寄席はよくありますが、いざ設定してみようとするとなかなかうまくいきません。 横中央揃えならとも ...

cssでmax-width min-widthの値をリセットする
ホームページのレスポンシブ化(画面サイズ自動可変表示)が一般的になり、スタイルシートの設計も複雑化してきました。 例えば ...

CSSで複数テキスト行を縦中央揃えにした。
CSSで正方形を作り、縦横中央揃えでテキストを入れることがしばしばあります。 横揃えは標準のスタイルシートで簡単にできま ...

CSSだけで画像を正方形に調整してみた
ホームページ制作の際に、画像サイズの調整はデザイン制作段階で行います。写真の縮尺等もPhotoshop等を使用して調整す ...

CSSでoverflow: scroll指定時に、横スクロールを無しにする

ボタンの二度押しをwait画面でガードしてみた。

Googleサイト内検索のデザインをカスタムした。
先日Google検索の埋め込み方についての記事を掲載いたしました。 埋め込むだけならば、「Googleサイト内検索」か ...

Font Awesomeが表示されない現象に対処
web制作でレスポンシブ(PCとスマホ表示を自動で切り替える構築方法)が一般的になって変化したことがあります。 それは「 ...