ブラウザの画面幅によってデザインを切り替える レスポンシブWEBデザインは、1つのHTMLを使って、PCブラウズ・タブレット・スマートフォンでデザインを切り替えています。 デザインを切り替える手段としては、「〇〇のブラウ […]
HTMLとCSSについて
counterを使って自動ナンバリングを付ける
list-styleでもできるけど使いにくい!そんなアナタへ リスト表示にした際、1から順に先頭に数字を設けるデザインをする事がありますが、list-styleで数字を振っていくと、なんだか装飾しにくくてイライラする事が […]
HTMLの基本と必ず書かなければならないもの
トップページのファイル名は必ずindex.html ホームページを作るときにはページ毎にファイル名を付けますが、トップページのファイル名はなんでもいいか。とはなりません。 トップページは必ずindex.htmlをファイル […]
ホームページに文章を入力する・改行する
文章に段落を付けたり、改行する ホームページに文章を入力するには、WordやExcel、メモ帳などの文章作成ソフトやブログ、メールで文字を入力するのと同じように、body要素に書き込むことで表示されます。ですが改行したい […]
HTMLを見やすく整えて、Webページ更新を効率化
HTMLを見やすく整えよう HTMLを書いていくと、要素がどんどんと入れ子に状になって更新したい箇所がわかりにくくなってしまいます。 なんとか見つけて編集できても、不用意にHTMLタグを消してしまって、Webページがきち […]
ホームページ内の見出しを設定する
見出しをhタグを使ってつける 文章はまとまりごとに見出しがあるととても見やすくなります。 見出しはh要素を使い、h1、h2、h3、h4、h5、h6の6種類があります。 h要素はh1から使い、数字の小さいほど重要度が上がっ […]
ホームページのタイトルを設定する
ページについて、一言で表せるようなタイトルをつけよう ページタイトルはhead要素の中にtitle要素を書いて設定します。title要素に入れた文言がページタイトルとなります。 書き方は「<title>」タグ […]
CSSの文法とホームページに適用させる3つの方法
CSSの文法 HTMLに文法があったように、CSSにも文法があります。 例えばp要素にCSSでデザインをしたい場合、まずは下のように書きます。 p {} このように装飾したい要素を指定して、「{}」(波括弧)の内側に装飾 […]
ホームページ制作で使用頻度の高いHTMLタグ
ホームページでよく使われるHTMLタグ div要素 複数の要素をまとめる時によく使われます。 まとめたい要素の親要素となるように、<div>と</div>で囲んで使います。 div要素でまとめた前 […]
CSSを使ってホームページをデザインする
ホームページのデザインにはCSSを使う HTMLで作ったホームページは、なんだか味気ないですよね。 それもそうです、デザインが入っていないからなんです。 情報を見やすくしたい。イメージを伝わるようにしたい。などなど、デザ […]
googleマイマップを埋め込むときに縮尺・位置を調整する方法
GoogleMapのマイマップとは GoogleMapって便利ですよね。 建物名や住所を入れるだけでその位置にピンが立ち、場所を知らせてくれます。 またホームページにも埋め込むことができたり、リンクを知らせて共有できたり […]
brをdisplayで隠した時に空白ができる原因と対策
br要素を使った改行には問題がたくさん PCページの時はbr要素を使った改行をCSSのdisplay:none;で消したりはしませんが、レスポンシブWEBデザインで作成したページの場合、PCで見た時とスマートフォンで見た […]
HTMLタグには囲んだ箇所に意味を持たせる効果がある
適切な箇所に適切なHTMLタグを使おう HTMLタグにはそれぞれ意味を持っています。 例えば・・・ ・p要素:ひとつの段落 ・ul要素:配置順に意味を持たないリスト ・ol要素:配置順に意味を持つリスト ・li要素:リス […]
HTMLとは?
HTMLとはホームページを構成する言語です 私たちが普段目にしているホームページはHTML(HyperText Markup Language・ハイパーテキスト マークアップ ランゲージ)というコンピュータ言語で作られて […]
余白を付けるpaddingとmarginについて
余白を持たせるデザインをする 余白を持たせるには、CSSを使って「padding」または「margin」で数値を指定します。 例えば 上に余白を10px持たせるには、 padding-top:10px; margin-t […]
phpを使ってインスタグラムの投稿をページに掲載する方法
2019年1月30日追記 2020年には埋め込みに使っていたAPIが使えなくなるので、この記事情報では設置ができなくなる可能性があります。 ご了承ください。 以前に紹介した埋め込み方法が非対応になっていました 最新のin […]
任意のパーツを簡単に複製してつかえる「clone」
同じコンテンツを繰り返し使いたい場合に有効な「clone」 Webサイトを作成していると、1ページ内で何度も登場するコンテンツが見つかります。 例えばページャーや、ページ内リンクボタン、ナビゲーションがそれに当たるでしょ […]
スムーズスクロールを強制的に無効化してIEでも背景を固定する
JavaScriptで制御する 以前も背景を固定したページをInternetExplorer(IE)で表示した時に背景が上下に揺れるという現象についてお知らせしました。 背景を固定した時、IEでガタガタ動く現象について […]