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

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

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

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

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

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

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

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

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

CSSでoverflow: scroll指定時に、横スクロールを無しにする
お知らせなど同じようなフォーマットが連続して縦に続く場合、iframeで埋め込み縦スクロールにするほうが見やすかったりし ...

ボタンの二度押しをwait画面でガードしてみた。
以前フォームの二重送信をガードする方法について書いた記事があります。 これは、ブラウザの更新ボタン(F5ボタン)連打をガ ...

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

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

CSSで割り切れない値を横幅指定する方法
ホームページを組む場合に、横4列構成でレイアウトするケースがあります。例えば商品情報などです。 少量の情報一覧であれば、 ...

CSSで画像と文字を横並び縦中央に揃える
webデザインでレスポンシブが一般化してからは、スマホでの縮尺変化による見にくさ、高速化の観点から「デザイン画像」が使 ...

右下配置のCSS 背景画像に余白をつける
CSS背景に画像を指定することはよくあることです。背景指定方法には、縦位置、横位置の指定があり、左上、右下などに配置でき ...

CSSで複数枚背景画像を設定しさらに背景色も加える。
ホームページ制作で、背景画像を使用することはよくあります。またホームページ制作入門でもどちらかといえば初級のテクニックだ ...

フォームクリックで周囲が青くならないようにする。
検索フォームをおしゃれに組むことはよくあることです。ただ、ブラウザの動作でせっかくおしゃれに作ったフォームが安っぽく見え ...

tableタグが角丸にならない問題に対処~意外なcssが原因でした~
テーブルタグに線を引くことは、HTMLやCSSで日常的に行う操作になります。今回、テーブルタグを「角丸」にしようと思った ...

Facebookいいねボタンがずれる問題に対応
SNSの各種ボタンを埋め込むことが最近では標準化してきました。webデザインでもSNSボタンを埋め込むことを前提にレイア ...

検索サイトに好まれるHTML構造
前回は、ホームページの軽量化についてお話いたしました。 そもそも軽量化を推奨するのは、閲覧される方が見やすくなるようにす ...

ホームページ軽量化の方法
前回は、ホームページの軽量化が必要になっているお話をいたしました。 今回は、ホームページの軽量化方法についてお話いたしま ...

重いホームページと軽いホームページ
最近の検索サイトは、様々な項目を総合的に判断し、検索順位を決定しているといわれています。 具体的にどの項目を判断している ...

カラミーショップ bxSlider画像幅をレスポンシブに対応させる
手軽にアイキャッチに画像スライドを導入する「bxSlider」は、レスポンシブに対応しています。 カラミーショップにbx ...