画像などの読み込みを遅延させて表示速度を上げる Webサイト上で大きな影響力を持つ画像。 文字で説明されるより、絵で見た方が理解できる物もありますし、なにより表示したときのインパクトは絶大です。Webサイトの印象を左右す […]
htmlとcss3
2020.09.18
画像の読込処理をしてWebサイトの表示速度を改善
HTMLとCSSについて
htmlとcss3
2020.08.19
lang属性とhreflang属性
使用する言語を示すlang属性 Webサイトは世界のどこからでもアクセスできるます。もちろん生活圏が異なれば言語も異なりますね。 なのでWebサイト上に掲載する言語も日本語や英語など、多岐にわたります。 Webサイト上の […]
htmlとcss3
2020.07.08
Webサイト制作で活躍しているリセットCSS
リセットCSSは各種ブラウザで初期設定されているCSSを無効化するために使う そもそもリセットCSSとはなんじゃいな？という方もいるかもしれないのでまずは説明いたしましょう。 インターネットを使ってWebサイトを閲覧する […]
htmlとcss3
2020.06.23
とても便利なFlexbox（その2）
配置間隔の制御も簡単にできる 前回Flexboxをつかったコンテンツ配置をご案内しました。使ってみると、とても便利な事に気が付きますね。 でも子要素の配置が難しい？とお考えではありませんか？ 大丈夫、そんなことはありませ […]
htmlとcss3
2020.05.21
とても便利なFlexbox（その1）
要素を並べるのに便利で素敵なFlexbox Webサイトのコンテンツ配置に使える「Flexbox」 他にもfloatを使ったり、inline-blockで並べたりと、様々な方法がありますが、細かい調整を自動でしてくれるの […]
htmlとcss3
2020.03.16
英文の改行について
Webサイト上で英文を改行する Webサイトにおいて英文は単語の途中で改行されないようになっています。 なのでハイフン(-)や空白を含まない文章の場合、改行される事なく続きます。 これによって何が起こるかというと、Web […]
htmlとcss3
2020.01.24
CSSは短く簡潔に
CSSを見直して読み込み速度改善を図る Webサイトの表示速度が遅いと感じる事があると思います。 多くはデータ容量の大きな写真が沢山貼られているなど、単純に読み込む情報量が大きすぎる場合だと思いますが、CSSなどのソース […]
htmlとcss3
2019.09.24
星マークを使ったレートをCSSで表現する
レビューサイトで見かける★を使った表現 商品を買う時、お店を選ぶ時に必ずといっていいほどチェックするレビューサイト。 実際に買ったり、お店に行ってサービスを受けた方の感想が書かれていたり、店内の雰囲気が写真を使って説明さ […]
htmlとcss3
2019.09.12
画面内に入った時にclassを付与する
アニメーションを付ける時に役立つ CSSアニメーションを作っても、意図したタイミングで見てもらえなければ意味がありません。 ページを開いた時にスグ目につく場所であればそれほど困りませんが、ページの下に行くほどどうしていい […]
htmlとcss3
2019.08.27
remを使って文字のサイズを設定しよう
様々な端末に対応させる為にも簡単な設定をしよう パソコン、タブレット、スマートフォンと、多様な端末でホームページを閲覧する時代です。 それに合わせて、ホームページもレスポンシブWEBデザインという作り方でどの端末からでも […]
htmlとcss3
2019.07.23
CSSを使ってページに動きを持たせる
アニメーションはCSSで作れる！ よくWebサイトを閲覧していて、要素がフェードインで浮き上がってきたり、左右から出て来りする物を目にするようになったような気がします。 これらは以前からありましたが、最近ランディングペー […]
htmlとcss3
2019.05.15
EmmetをつかったCSSコーディング
Emmetを使ったページ作成について 以前ご紹介した「VSCode」 あれから色々と試してみましたが、なかなかクセが抜けきれないので手動入力で全文を書いてしまいます・・・ 数年間続けた習慣はなかなか抜けませんね・・・ 使 […]
htmlとcss3
2019.02.25
Googleしごと検索へ掲載する構造化データのマークアップ
Googleしごと検索へ掲載する方法について Googleしごと検索へこのWEBサイト内の求人情報を掲載してみました。 掲載するにはいくつか方法があって、 1.自社サイトへ構造化データのマークアッを行う 2.Google […]
htmlとcss3
2019.02.14
背景画像の指定について
CSSを使って背景に入れた画像を調整する 要素の背景には色や画像を入れる方法について以前紹介しました。（第20回：ホームページの文字・背景に色を付けるには） 実際に背景に画像を入れると、繰り返して表示されたり、背景画像の […]
htmlとcss3
2019.01.17
レスポンシブWEBデザインで使われるメディアクエリについて
ブラウザの画面幅によってデザインを切り替える レスポンシブWEBデザインは、1つのHTMLを使って、PCブラウズ・タブレット・スマートフォンでデザインを切り替えています。 デザインを切り替える手段としては、「〇〇のブラウ […]
htmlとcss3
2018.12.19
counterを使って自動ナンバリングを付ける
list-styleでもできるけど使いにくい！そんなアナタへ リスト表示にした際、1から順に先頭に数字を設けるデザインをする事がありますが、list-styleで数字を振っていくと、なんだか装飾しにくくてイライラする事が […]
htmlとcss3
2018.11.06
HTMLの基本と必ず書かなければならないもの
トップページのファイル名は必ずindex.html ホームページを作るときにはページ毎にファイル名を付けますが、トップページのファイル名はなんでもいいか。とはなりません。 トップページは必ずindex.htmlをファイル […]
htmlとcss3
2018.10.15
ホームページに文章を入力する・改行する
文章に段落を付けたり、改行する ホームページに文章を入力するには、WordやExcel、メモ帳などの文章作成ソフトやブログ、メールで文字を入力するのと同じように、body要素に書き込むことで表示されます。ですが改行したい […]
htmlとcss3
2018.10.04
HTMLを見やすく整えて、Webページ更新を効率化
HTMLを見やすく整えよう HTMLを書いていくと、要素がどんどんと入れ子に状になって更新したい箇所がわかりにくくなってしまいます。 なんとか見つけて編集できても、不用意にHTMLタグを消してしまって、Webページがきち […]
htmlとcss3
2018.09.29
ホームページ内の見出しを設定する
見出しをhタグを使ってつける 文章はまとまりごとに見出しがあるととても見やすくなります。 見出しはh要素を使い、h1、h2、h3、h4、h5、h6の6種類があります。 h要素はh1から使い、数字の小さいほど重要度が上がっ […]
htmlとcss3
2018.09.25
ホームページのタイトルを設定する
ページについて、一言で表せるようなタイトルをつけよう ページタイトルはhead要素の中にtitle要素を書いて設定します。title要素に入れた文言がページタイトルとなります。 書き方は「<title>」タグ […]
htmlとcss3
2018.09.19
CSSの文法とホームページに適用させる3つの方法
CSSの文法 HTMLに文法があったように、CSSにも文法があります。 例えばp要素にCSSでデザインをしたい場合、まずは下のように書きます。 p {} このように装飾したい要素を指定して、「{}」(波括弧)の内側に装飾 […]
htmlとcss3
2018.09.10
ホームページ制作で使用頻度の高いHTMLタグ
ホームページでよく使われるHTMLタグ div要素 複数の要素をまとめる時によく使われます。 まとめたい要素の親要素となるように、<div>と</div>で囲んで使います。 div要素でまとめた前 […]
htmlとcss3
2018.08.27
CSSを使ってホームページをデザインする
ホームページのデザインにはCSSを使う HTMLで作ったホームページは、なんだか味気ないですよね。 それもそうです、デザインが入っていないからなんです。 情報を見やすくしたい。イメージを伝わるようにしたい。などなど、デザ […]
htmlとcss3
2018.08.10
googleマイマップを埋め込むときに縮尺・位置を調整する方法
GoogleMapのマイマップとは GoogleMapって便利ですよね。 建物名や住所を入れるだけでその位置にピンが立ち、場所を知らせてくれます。 またホームページにも埋め込むことができたり、リンクを知らせて共有できたり […]
htmlとcss3
2018.07.02
brをdisplayで隠した時に空白ができる原因と対策
br要素を使った改行には問題がたくさん PCページの時はbr要素を使った改行をCSSのdisplay:none;で消したりはしませんが、レスポンシブWEBデザインで作成したページの場合、PCで見た時とスマートフォンで見た […]
htmlとcss3
2018.05.22
HTMLタグには囲んだ箇所に意味を持たせる効果がある
適切な箇所に適切なHTMLタグを使おう HTMLタグにはそれぞれ意味を持っています。 例えば・・・ ・p要素：ひとつの段落 ・ul要素：配置順に意味を持たないリスト ・ol要素：配置順に意味を持つリスト ・li要素：リス […]
htmlとcss3
2018.05.10
HTMLとは？
HTMLとはホームページを構成する言語です 私たちが普段目にしているホームページはHTML(HyperText Markup Language・ハイパーテキスト マークアップ ランゲージ)というコンピュータ言語で作られて […]
htmlとcss3
2018.01.31
余白を付けるpaddingとmarginについて
余白を持たせるデザインをする 余白を持たせるには、CSSを使って「padding」または「margin」で数値を指定します。 例えば 上に余白を10px持たせるには、 padding-top:10px; margin-t […]
htmlとcss3
2017.11.18
phpを使ってインスタグラムの投稿をページに掲載する方法
2019年1月30日追記 2020年には埋め込みに使っていたAPIが使えなくなるので、この記事情報では設置ができなくなる可能性があります。 ご了承ください。 以前に紹介した埋め込み方法が非対応になっていました 最新のin […]
