Home > TagScript > html、css、Java > html5css3

ベクトルドロー・レベルゼロ

記事を作成する際に役立つhtml、cssの知識

新規作成日 2015-11-10
最終更新日

テンプレートを使用するとメニューやフッタ、リンクのデザイン、サイドバーなど、こだわりたい部分の外観が既に出来上がっています。そのために必要な技法に関する知識は必要ありません。しかし、記事は自分で作成する必要があります。記事を作成するために必要な、文章や画像、リンクを配置したり、記事を読みやすくするために必要なhtmlやcssの知識は、探して使用する必要があります。

CSS3

cssは、スタイルシートにスタイルをまとめることで、サイト全体のスタイルを統一、変更が簡単にできる仕組みです。

css3に進化したことで、アニメーションも使えるようになりました。アニメーションを利用することで、訪問者の視線を誘導することができるので、より読みやすく、見やすいページにすることができます。上品なデザインをうまく配置して、サイトの居心地をより快適なものにしましょう。

自分で独自にcssアニメーションを作成するのは大変ですが、ネット上にいろいろなcssアニメーションの実装が公開されていますので、有効に利用し、運営するサイトのデザインを向上させましょう。

cssは、htmlタグとの組み合わせで、どのようなデザインの要素が表示されるか確認していきましょう。

リンク

サイトのリンクをデザインする

サイト上のページにリンクを配置すると、別のページに移動することができます。

内容をどのように分割して、どこにリンクを配置するかで、ページの読みやすさや理解しやすさが変わります。htmlに加えて、cssを使用することで、リンクの外観を変更できます。また、マウスホバーと呼ばれるカーソルが上に来たときだけのデザインと一度訪れたページへのリンクの外観を変更できます。

ページ内の特定の位置に移動する

要素を配置する

画面サイズの変更に対応するレスポンシブWebデザインと呼ばれるhtml、cssの記述方法が現れたことで、それぞれの要素が、どのように表示されるかだけでなく、表示幅が変更された時、それぞれの要素がどのように移動するかまで考える必要があります。

配置に関するcssプロパティ

要素を配置するときに使用するcssプロパティです。htmlでページをデザインする際には、要素の位置と表示方法を頻繁に参照します。

htmlとcssで 文字と画像を横に並べる方法

html要素には、ブロック要素とインライン要素があります。ブロック要素には、margin、padding、borderプロパティを持っています。これらのプロパティと位置の関係を理解する必要があります。

同じ大きさの要素を並べて表示する

htmlとcssを使用して、同じ大きさの要素をページに並べて表示したいときがあります。

色表現

色見本

色見本は自分で作成したいものですが、まあそれはそれ、作成してくれている人のサイトを利用しましょう。

グラデーションを作成する

記事の表現を広げるテクニック

cssをうまく使用するとhtmlタグからは想像ができないほど豊かな表示表現が可能になります。

videoタグを使ってmp4動画を再生する

ページ内に、動きがあると視線を誘導することができます。videoタグを使うとmp4ファイルを再生することができます。videoタグは、html5から導入された機能です。videoタグを使用して、mp4ファイルをページ内で再生する方法をまとめました。

定義リスト<dl><dt><dd>に、cssでスタイルを追加する

<dl><dt><dd>のタグを使用したものを定義・説明リストといいます。この<dl><dt><dd>タグは、cssを使用してスタイルを調整しないで使うことはまずありません。

このエントリーをはてなブックマークに追加

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011-2018 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」