カテゴリー: ホームページ制作(html,css)

ウェブサイトやウェブアプリケーション制作をしていると、アイコンを表示させたい場面が出てくると思います。 アイコンとは、たとえばメールや矢印のマークだったり、TwitterやFacebookのロゴなどです。 そういったアイコン表示をさせることができるのがFont Awesomeです。   今回は、そんなWEB制作に必ず役立つFont Awesomeの使い方をまとめていきます。  […]

  今回は作成したWEBページに地図を表示させてみましょう。 今まで学習してきたHTML,CSSの基礎がわかっていれば、とても簡単にできる作業になります。   イメージとしては上のような感じです。企業や店舗のサイトでは必ずと言っていいほどページの下部に見られます。     Google mapを表示しよう 基本的にWEBページ上のマップ埋め込みはGoogle[…]

  今回は作成したボタンに効果を付けていこうと思います。 ボタンの効果は主に、カーソルをボタン上に乗せた時の効果とボタンをクリックした時の効果があります。この効果は、JavaScriptやjQueryといった言語を使って実装されることが多いですが、CSSだけでも再現可能です。 今回は、すでに学習しているCSSを使ってボタンの効果を出してみましょう。     共通のHT[…]

  ０からサイト制作を学ぼう！ １２回ではボタンの作成方法を紹介しました。 今回はCSSでボタンのデザインを変更したり、Bootstrapというフレームワークを使ってボタンを作成していきます。   ボタンの作成方法がわからない場合は、前回の記事を参考にしてください。 ０からサイト制作を学ぼう！ １２ – HTML(ボタンを設置しよう) –   ボタンのデザイン変更 &[…]

  WEBサイトでボタンはとても重要な役割を果たします。 たとえば、クリックするとどこかのページへ移動するリンクにもボタンが使用されていることが多いですし、フォームの送信やリセットもボタンの一種です。 今回はボタンの種類や設置方法について解説していきたいと思います。       ボタンの種類     submitボタン 「０からサイト制作[…]

今回は、ファビコン（favicon）についてです。ファビコンはWEBブラウザのタブに表示される小さなアイコン等の画像のことで、ブックマークした際にも表示されます。 このファビコンにはどういった意味があるのか、どうやって作成して設定するのかを解説していきたいと思います。   ファビコンとは ファビコンとは、「Favorite（お気に入り） + Icon（アイコン）」が派生した用語で、ブラウ[…]

  こんにちは、真面目系変人マサです。   コロナ時代、何かスキルをつけたいと思い始めている方はとても多いです。 このブログをみているあなたは、多少なりともWEBデザインやプログラミングに興味のある方だと思います。 今の時代、ブログやyoutubeに多くの情報があり、その情報を基に独学勉強することも可能ですが、やはり「物足りない、もっと深く勉強したい」と思うこともあるのではない[…]

こんにちは、真面目系変人マサです。   今回はフォームの作り方ついて学習していきたいと思います。フォームとは下の画像のようなものです。お問い合わせや会員登録のページで見たことがあると思います。   ＜注意点＞フォームは記入された内容をメールに送信したり、データベースに保存ができるものですが、この機能を作るためにはPHPでのプログラミングが必要になります。ただし、フォームの入力欄[…]

  こんにちは、真面目系変人マサです。   今回は、ページの余白調整をしていきたいと思います。余白の調整は、文字や要素に対して余白をつけることでページを見やすくするために行います。   たとえば下の画像のように縦横の幅を指定したボックスをページ内に作り、文字を打ち込みます。すると、ボックスと文字は自動的にページの左上に表示されます。この状態だと、ボックスと文字の左側と[…]

  こんにちは、真面目系変人マサです。 前回は<header>や<footer>、<div>タグを使用してグループ分けをしました。今回はグループ分けした要素に色付けをしたり、中の文字色を変更したりしていきます。       要素のセレクタ指定方法 CSSを使って要素内の色付けや文字色を変更する場合は、セレクタの指定が必要で[…]