表示デバイスに最適化された画像へ切り替えて表示しよう 同じ画像であっても、スマートフォンの画面表示と、パソコンの画面表示とで別々の画像を表示させたい時があります。 画面の縦横比率が異なるので、パソコンの画面を想定した画像 […]
HTMLとCSSについて
疑似要素を活用して、同じ意味合いの言葉を重複させないようにする
同じ意味合いの言葉を重複させないために Webサイト内の“見出し”や“ナビゲーション”で、“お知らせ / INFORMATION”みたいな表記をする事があります。 この表記の他にも“ホーム / HOME”や“お問い合わせ […]
CSSで画像をトリミングしよう!便利な「object-fit」プロパティ
CSSを使って画像をトリミングする Webサイトを作っていくと写真の縦横比で悩まされる事も多いのではないでしょうか。 見た目の問題で、写真の下に来る文字の先頭を揃えたい!!という事はよくあるもの。 作り初めの頃は写真を撮 […]
画像の読込処理をしてWebサイトの表示速度を改善
画像などの読み込みを遅延させて表示速度を上げる Webサイト上で大きな影響力を持つ画像。 文字で説明されるより、絵で見た方が理解できる物もありますし、なにより表示したときのインパクトは絶大です。Webサイトの印象を左右す […]
lang属性とhreflang属性
使用する言語を示すlang属性 Webサイトは世界のどこからでもアクセスできるます。もちろん生活圏が異なれば言語も異なりますね。 なのでWebサイト上に掲載する言語も日本語や英語など、多岐にわたります。 Webサイト上の […]
Webサイト制作で活躍しているリセットCSS
リセットCSSは各種ブラウザで初期設定されているCSSを無効化するために使う そもそもリセットCSSとはなんじゃいな?という方もいるかもしれないのでまずは説明いたしましょう。 インターネットを使ってWebサイトを閲覧する […]
とても便利なFlexbox(その2)
配置間隔の制御も簡単にできる 前回Flexboxをつかったコンテンツ配置をご案内しました。使ってみると、とても便利な事に気が付きますね。 でも子要素の配置が難しい?とお考えではありませんか? 大丈夫、そんなことはありませ […]
とても便利なFlexbox(その1)
要素を並べるのに便利で素敵なFlexbox Webサイトのコンテンツ配置に使える「Flexbox」 他にもfloatを使ったり、inline-blockで並べたりと、様々な方法がありますが、細かい調整を自動でしてくれるの […]
英文の改行について
Webサイト上で英文を改行する Webサイトにおいて英文は単語の途中で改行されないようになっています。 なのでハイフン(-)や空白を含まない文章の場合、改行される事なく続きます。 これによって何が起こるかというと、Web […]
CSSは短く簡潔に
CSSを見直して読み込み速度改善を図る Webサイトの表示速度が遅いと感じる事があると思います。 多くはデータ容量の大きな写真が沢山貼られているなど、単純に読み込む情報量が大きすぎる場合だと思いますが、CSSなどのソース […]
星マークを使ったレートをCSSで表現する
レビューサイトで見かける★を使った表現 商品を買う時、お店を選ぶ時に必ずといっていいほどチェックするレビューサイト。 実際に買ったり、お店に行ってサービスを受けた方の感想が書かれていたり、店内の雰囲気が写真を使って説明さ […]
画面内に入った時にclassを付与する
アニメーションを付ける時に役立つ CSSアニメーションを作っても、意図したタイミングで見てもらえなければ意味がありません。 ページを開いた時にスグ目につく場所であればそれほど困りませんが、ページの下に行くほどどうしていい […]
remを使って文字のサイズを設定しよう
様々な端末に対応させる為にも簡単な設定をしよう パソコン、タブレット、スマートフォンと、多様な端末でホームページを閲覧する時代です。 それに合わせて、ホームページもレスポンシブWEBデザインという作り方でどの端末からでも […]
CSSを使ってページに動きを持たせる
アニメーションはCSSで作れる! よくWebサイトを閲覧していて、要素がフェードインで浮き上がってきたり、左右から出て来りする物を目にするようになったような気がします。 これらは以前からありましたが、最近ランディングペー […]
EmmetをつかったCSSコーディング
Emmetを使ったページ作成について 以前ご紹介した「VSCode」 あれから色々と試してみましたが、なかなかクセが抜けきれないので手動入力で全文を書いてしまいます・・・ 数年間続けた習慣はなかなか抜けませんね・・・ 使 […]
Googleしごと検索へ掲載する構造化データのマークアップ
Googleしごと検索へ掲載する方法について Googleしごと検索へこのWEBサイト内の求人情報を掲載してみました。 掲載するにはいくつか方法があって、 1.自社サイトへ構造化データのマークアッを行う 2.Google […]
背景画像の指定について
CSSを使って背景に入れた画像を調整する 要素の背景には色や画像を入れる方法について以前紹介しました。(第20回:ホームページの文字・背景に色を付けるには) 実際に背景に画像を入れると、繰り返して表示されたり、背景画像の […]
レスポンシブWEBデザインで使われるメディアクエリについて
ブラウザの画面幅によってデザインを切り替える レスポンシブWEBデザインは、1つのHTMLを使って、PCブラウズ・タブレット・スマートフォンでデザインを切り替えています。 デザインを切り替える手段としては、「〇〇のブラウ […]