windows10の大型アップデートが先日4月11日から開始になりましたね。みなさんはもうアップデートされましたか? 私は昨日13日の夜にアップデートしました。 色々な機能が追加されているようなので、いろいろと使いながら […]
Web制作スタッフのブログ
PC・スマートフォンに対応させるデザインの考え方
レスポンシブWEBデザインには相対的な値を使う PC・スマートフォンに対応したデザインを作ることは割と増えてきています。 スマートフォンの普及率が増したり、タブレットの様に使えるパソコンが出てきたりと、閲覧する画面幅がユ […]
CSS3を使ってグラデーションをつくる方法
グラデーションはCSSで作れる グラデーションの付いたボタンや背景など、ホームページにはグラデーションを付けて装飾したい部分がありますよね。 特にボタンはグラデーションをうまく付ける事で盛り上がって見えるので、ボタンらし […]
ホームページのアイコン”ファビコン”を作ろう
ファビコンはホームページを示すアイコン ファビコン(favicon)って聞いたことないですか? インターネットブラウザーでホームページを見た時、アドレスバーの付近やタブに出る小さなアイコンの事です。 ファビコンは単なる飾 […]
CSS3を使って角丸を表現する方法
四隅にRを付けて丸くするデザインは大変? 普通にHTMLとCSSだけで装飾をしていくと、要素は四角になって角が直角になりますよね。 角ばったデザインが作っているホームページの雰囲気やイメージにピッタリ合うこともありますが […]
Webユーザビリティに関する3つの間違い
ユーザビリティの高いページにしよう!と思ってユーザーの声を聴いて反映させればよい物になると思っていませんか? 実はそれは間違いかもしれません。 どんな方でも使えるようにするのはアクセシビリティ アクセシビリティとユーザビ […]
※や・などの付いた文章全体をインデント(字下げ)する方法
字下げして、整った文章を成形する 段落が何文字分か下げることを「インデント」といいます。 文章の先頭に「・」や「①」など、記号があるとき、その段落は全て先頭を1文字分インデントして先頭をそろえたいですよね。 […]
CSS3を使ってボックスに影を付けて装飾する
ボックスに影をつけるには ボックスに影を付ける事で少し浮いたような表現をすることができます。 特にリンクボタンに付けると押し込める様に見えたり、他と差別化できるので目立たせることができます。 こういった影の事をドロップシ […]
メールアドレスを掲載する時に気を付けたい事
メールアドレスを掲載すると迷惑メールが増える原因になる お問い合わせの受付で何かと便利なメールアドレスの掲載。 今ではメール送信は当たり前になりました。送信したら1分も待たないで受信ができるような環境が整って、とても身近 […]
CSS3を使って文字に影を付けて装飾する
文字に影を付けるには 文字に影を付ける事で読みやすくしたり、見出しのような文字を目立たせたりできるので、付けたいと思う場面はありませんか? 特に背景に写真を配置して、その上の文字を載せると文字が読みにくくなってしまいます […]
inline要素にして並べた時にできる謎の空白を消すには
inline-blockにした要素同士を並べると隙間が生まれる inline-blockを使うと、全体を中央や右へ寄せる事ができるのでとても便利です! 例えばul・li要素を使ってリストを作成して、中央寄せにする場合 & […]
CSSを使ってアニメーションさせる方法
アニメーションはCSSで作れる ボタンにマウスを載せた時に背景色を変える、文字色を変えるなどの変化を加える際、普通に作りこむとパッ!っと一瞬で色が変わりますよね。 例えばこんな感じ・・・ リンクボタン CSS a{ ba […]
h1要素の位置はどこがベストなのか
ロゴをh1にするのはもったいない h1~6の見出しを明記するHTML要素は、ページの構造をわかりやすくする上で重要な項目で、中でもh1要素の重要度は一番上になります。 これらの見出しタグはSEO(検索エンジン対策)を考え […]
レスポンシブWEBデザインはスマートフォンを優先
レスポンシブWEBデザインでホームページを作成する時、ついパソコン画面での表示に目がいってしまいます。 パソコンの様な大きな画面への配置を優先した「PCファースト」のデザインになってしまうんです。 もちろんWeb戦略的に […]
画像ファイル形式の違いについて
「JPG」「PNG」「GIF」「BMP」「TIFF」の5つの代表的な画像ファイルについて 写真や絵を画像にするには画像ファイルにして保存しなければなりません。 でも形式がいろいろあって迷うことはありませんか? 保存する画 […]
本当に使える!CSS疑似要素3つ
CSS疑似要素とは CSS疑似要素とは、HTMLではなくCSSを使って疑似的に作成した要素をページの指定した部分へ挿入することのできる便利なものです! ・・・よくわかりませんね。 実際にどんな事ができるのか見てみましょう […]
WDB形式との遭遇~JPG形式への変換
先日PowerPointで作成したファイルを頂いて、そこから画像を書き出したときに「.wdb」なんて拡張子の画像ファイルが出てきました。 WordやExcel、PowerPointから画像を抜き出すと「.jpeg」という […]
JPGやPNGを軽量化しよう
画像をさらに圧縮して、ページ全体の軽量化を図るメリット ホームページの大部分が写真やグラフィックといった画像ファイルになります。これは画像を埋め込んだ方が、デザインが伝わるからです。 画像を多用すればその分1ページ全体の […]