既存ページ画像のレスポンシブ化

おはようございます。にわか管理人のBenです。 今日は、我が社のWEBサイトのデザイン更新時の課題の一つをノートしたいと思います。 我が社はフリーのCMSのMODXを使用しています。CMSはHTML言語の知識がなくてもホームページを作れるというものですが、実際はある程度の知識がないと自在に作れません。今回はコンテンツはそのままでデザインを変えました。具体的にはCSSを全面更新して、左メニ…

続きを読む

CSSで作ったボタンに動きを付けよう

こんばんは! Benです。今回もボタンの設置についてです。 ボタンですよ 前回、ご覧のように画像を使わずにCSSでボタンを作成しました。今回はもう少し実用的な細かいことをノートします。 ボタンですよ まずは、皆さんの環境にもよりますが、そのままの状態でボタンの文字に下線が入らないようにします。これは、CSSにtext-decoration:none;を…

続きを読む

画像を使わずにCSSだけでボタンを作成

こんばんは! Benです。 ホームページネタが続きますが、今回はCSSだけでボタン風のリンクを作ろう!というものです。職場のホームページでもメインメニューやお問い合わせボタンなどあり、3Dにするまで凝らないけれど、グラデーションと丸い縁取りでボタン風にしました。 ↑完成形はこれです 昔の方法は、ボタン全体を画像で作るか、あらかじめグラデーションや縁のパーツを画像…

続きを読む

レスポンシブ対応のメニューを作ろう

Good morning! Benです。一昨日、全社のWEBサイト更新を何とか無事終えました。事前準備は切羽詰まってましたが、切り替えは意外とスムーズ。細かいことはこれからも出てくると思いますが、重大欠陥発覚で以前のに戻すという最悪な事態は避けられました。 その更新ではスマホやタブレットなどでも閲覧できるようにレスポンシブWEBデザインにしました。その中で悩むのがメニューです。の会社のホー…

続きを読む

CSSで要素の既定値設定と記載順序の基本

CSS

おはようございます。今日、全社のホームページのデザイン一斉更新で心臓がバクバクヒクヒクのBenです。 昨日、別の支社の担当者から「現ページはtableタグをレイアウトに多用しているのだけれど、スマホのような狭い画面幅では全幅で、PCの広い画面幅では全体の80%くらいで左右に均等の余白を設けたいけど、いちいちwidthやmarginの設定をするのが大変」とのコメントがありました。 なの…

続きを読む