文字に影を付けるには 文字に影を付ける事で読みやすくしたり、見出しのような文字を目立たせたりできるので、付けたいと思う場面はありませんか? 特に背景に写真を配置して、その上の文字を載せると文字が読みにくくなってしまいます […]
HTMLとCSSについて
inline要素にして並べた時にできる謎の空白を消すには
inline-blockにした要素同士を並べると隙間が生まれる inline-blockを使うと、全体を中央や右へ寄せる事ができるのでとても便利です! 例えばul・li要素を使ってリストを作成して、中央寄せにする場合 & […]
CSSを使ってアニメーションさせる方法
アニメーションはCSSで作れる ボタンにマウスを載せた時に背景色を変える、文字色を変えるなどの変化を加える際、普通に作りこむとパッ!っと一瞬で色が変わりますよね。 例えばこんな感じ・・・ リンクボタン CSS a{ ba […]
本当に使える!CSS疑似要素3つ
CSS疑似要素とは CSS疑似要素とは、HTMLではなくCSSを使って疑似的に作成した要素をページの指定した部分へ挿入することのできる便利なものです! ・・・よくわかりませんね。 実際にどんな事ができるのか見てみましょう […]
人をダメにするエディタ、見つけました
入力を簡略化してくれる「VSCode」 HTMLの入力って、「<」「>」を入力するのが面倒だったり、開始タグと閉じタグで同じ文言を書く事が二度手間に感じたりしませんか? 実際にHTMLを入力していると、閉じタ […]
ファイル名やclass名にはアンダーバー(_)を活用しよう
アンダーバー(_)を使うことで選択が簡単になる ホームページを制作していると画像のファイル名やCSSのclass・id名に困ってくると思います。 実際に制作をしているとよく困ります・・・ Webサーバーにアップすると、画 […]
Facebookのタイムラインをホームページへ設置する
Facebookのタイムラインを設置するには「ページプラグイン」を利用する SNSが爆発的に拡がり、Facebookのアカウントを持っている方も多いのではないでしょうか。 Facebookを使ったプロモーションの一つとし […]
GoogleMapをホームページへ設置する
GoogleMapをページに設置する 地図を見るときに便利なGoogleMap。スマートフォンを使ってGoogleMapを利用されている方も多いかと思います。 目的地や知りたい周辺の情報を見るときに便利ですよね。私もよく […]
機能が増えて表現の幅が広がったCSS3
CSS3とは 「CSS3」という単語をHTMLを学んでいるとよく目にしませんか? CSS3について簡単に説明すると、CSS(スタイルシート)の規格のひとつなんです。 このCSSには、規格のバージョンがあり、最初のCSSは […]
CSSが適応される優先順について
CSSは下に書かれている記述が優先される CSSをガリガリ書き込んで、ページに反映・・・と思ったのに反映されない!!なんてことはありませんか? そのCSS、書き込む順番に問題があるのかもしれません。 CSSは下に書かれて […]
CSSを活用して要素を左右に配置しよう
ホームページ上での要素配置について div要素など、ブロック要素と呼ばれる要素は、上から下へ縦並びで配置されます。 でもそれではWebページのレイアウトがうまくできませんよね。 要素を左右に配置するには「float」を使 […]
ホームページの文字・背景に色を付けるには
CSSを使って色付けするにはカラーコードを使う CSSを使って色を付ける。と言っても色合いの指定をどうしたらいいのか困りませんか? 思い浮かんだ色を、どうやってインターネットブラウザに伝えるのかなんて始めはわかりませんよ […]
ページ内リンクを設定するには
アンカーリンクとは a要素を使って、ホームページリンクを設定する場合、リンクをクリックした後は移動先ページの先頭が表示されますよね。 でも時々、リンクをクリックするとページの途中へ移動したり、ページの途中から表示される事 […]
CSSが適用されない時に確認する5つのこと
CSSを頑張って書いたのに適用されないときに確認すべき箇所 とても頑張ってホームページのデザインをして、CSSを書いたのに全然デザインが反映されなかったり、一部だけ適用されない・・・という事が時々あります。 その時に注意 […]
class名とid名を付けてデザインをする
CSSを要素別に割り当てるには 前回(第16回:CSSの文法とホームページに適用させる3つの方法)ではCSSの基本的な文法をお伝えしました。 この方法だとセレクタがHTMLタグなので、ページ内で該当する要素の装飾がすべて […]
文章を強調させる時に使うタグ
一部を強調して、より伝わる文章にするために 太字や赤字など、変化のある文章と何も変化のない文章では見た目も読みやすさも各段にかわります。 というのも、基本的に興味のない文章は読まない、または斜め読みをするからです。 たと […]
文字や画像にリンクを設定する
リンクを設定する時に使われる「a要素」 クリックして他のページに移動するリンクは、ホームページに欠かせない要素です。 文字や画像にリンクを設定するにはa要素を使います。 a要素でマークアップし、リンクを設定すると次のよう […]
リストタグを使って箇条書きを表現する
箇条書きを表現する時に便利な「ul・li要素」 箇条書きやリストを表現する時にはul要素・li要素を使います。 ul・li要素でマークアップすると次のようになります。 行の先頭に「・(中黒)」が入り、箇条書きになっていき […]