LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@redstar-hr(Redstar HR)

私のstyle.css(編集中)

Last updated at Posted at 2024-04-25

はじめに

普段テンプレート用に使っているstyle.cssの備忘録

用意するもの

style.cssを書いていく

今回は、別記事の
qiita 記事リンク :html の サンプルコード

と一緒にstyle.css コードを書いていきます。

css定義とimport reset.css

  • css定義
  • リセットCSSの読み込み @import url reset.css 
    @charset "utf-8";
/*リセットCSSの読み込み
---------------------------------------------------------------------------*/
@import url("reset.css");
@import url("ios_reset.css");

全体の設定

  • 全体のフォント設定
    html.body の設定をしていきます。 
    /*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;padding: 0;
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。下の方にある「画面幅900px以上」で基準を大きなサイズに再設定しています。*/
}

body {
	font-family: 'BIZ UDPGothic', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #666;		/*全体の文字色*/
	line-height: 2;		/*行間*/
	overflow-x: hidden;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*ul,olタグ*/
ul, ol {margin-bottom: 30px;}
  • html,body：全体のページ設定を行います。
  • margin: 0; padding: 0; で余白をリセットし、
  • height: 100%; で高さを100%に設定します。
  • font-size: 13px; は基準となるフォントサイズを指定しています。
  • body：本文要素のスタイルを指定しています。
  • font-family でフォント種類を指定し、
  • -webkit-text-size-adjust: none; でiOSデバイス上でのテキストサイズの自動調整を無効にしています。
  • background で背景色、color で全体の文字色、
  • line-height で行間を指定しています。
  • overflow-x: hidden; は横スクロールバーを非表示にします。
  • リセット：figure、dd、nav に対してマージンをリセットしています。
  • table：テーブル全般の設定を行います。
  • border-collapse:collapse; でセルの境界線を統合します。
  • 画像全般の設定：画像要素に関するスタイルを指定しています。
  • border: none; で枠線をなくし、
  • max-width: 100%; で画像の最大幅を親要素に合わせています。
  • video：ビデオ要素に関するスタイルを指定しています。
  • max-width: 100%; でビデオの最大幅を親要素に合わせます。
  • iframe：埋め込みフレーム要素に関するスタイルを指定しています。
  • width: 100%; でフレームの幅を親要素に合わせます。 ul,
  • ol：順序付きリストと順序なしリストのスタイルを指定しています。
  • margin-bottom: 30px; でリストの下側に余白を追加します。

リンクテキスト全般の設定

  • リンクテキスト全般の設定
    リンクテキスト全般の設定をしていきます。
    a タグ 
    /*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #666;	/*文字色*/
	transition: 0.3s;
}

a:hover {
	opacity: 0.8;	/*マウスオン時に80%の透明度にする*/
}

    通常のリンクテキストは灰色になり、
    transition: 0.3s; は、リンクにホバー（マウスを重ねたとき）した際のアニメーション効果を制御しています。具体的には、transition プロパティは CSS プロパティの変化を滑らかにするために使用されます。ここでは、0.3s という値が指定されており、これは変化が発生する時間を示しています。つまり、リンクにマウスが重なったときに変化が発生し、その変化が 0.3 秒かけて行われるということです。
    マウスをリンク上に移動すると透明度が 80% に変化します。
    これにより、ユーザーがリンクにマウスを重ねたときに視覚的なフィードバックが得られます。

header設定

    header設定
  • /*ヘッダーブロック*/
  • /*ヘッダーのリンクテキストの文字色*/
  • /*ロゴ画像*/
  • /*トップページのロゴ画像*/
  • /*トップページのロゴ下に書いている説明文*/

/*ヘッダーブロック*/

/*header
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	background: #e159a2;	/*背景色*/
	color: #fff;			/*文字色*/
	position: relative;
}

これにより、ヘッダーの背景色がピンク色 (#e159a2) に、文字色が白色 (#fff) に設定され、ヘッダー要素が相対位置付けされます。

/*ヘッダーのリンクテキストの文字色*/

/*ヘッダーのリンクテキストの文字色*/
header a {
	color: #fff;
}

ヘッダー内のすべてのリンクが白色で表示されます。

/*ロゴ画像*/

/*ロゴ画像*/
header #logo img {display: block;}
header #logo {
	width: 200px;		/*幅*/
	margin: 0 auto;		/*ロゴを左右中央に配置*/
}

header 内の #logo ID を持つ要素に関するスタイルが設定されています。
#logo 内の img 要素に対して display: block; スタイルが適用され、
#logo 要素自体に幅を 200px、左右のマージンを auto に設定しています。
これにより、ロゴ画像が横幅 200px で中央に配置される効果が得られます。

/*トップページのロゴ画像*/

/*トップページのロゴ画像*/
.home header #logo {
	position: absolute; z-index: 1;
	width: 75%;		/*ロゴの幅*/
	left: 15%;		/*headerに対して、左からの配置場所*/
	top: 0px;		/*headerに対して、上からの配置場所*/
}

.home クラスを持つ要素内の header に含まれる #logo ID を持つ要素に関するスタイルが設定されています。
ロゴ画像が絶対位置配置され、z-index が 1 に設定され、
幅が 75%
左端からの位置が 15%
上端からの位置が 0px

これにより、トップページのヘッダー内でロゴ画像が特定の配置に固定される効果が得られます。

body内のタグ設定

sectionタグと詳細ページの共通設定

  • sectionタグ
  • 詳細ページの共通設定 
/*sectionタグと、詳細ページの共通設定
---------------------------------------------------------------------------*/
section,
main > article {
	padding: 3% 5%;		/*上下、左右へのボックス内の余白*/
}

section 要素と詳細ページ
上下に 3% 、左右に 5% の余白が設定されます。
このスタイルは、コンテンツの読みやすさや整形のために利用されることが一般的です。

containerブロック

containerタグの設定 
/*containerブロック
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	max-width: 1920px;				/*サイトの最大幅*/
	margin: 0 auto;
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}

高さは親要素の100%を取ります。
最大幅は1920pxに制限されます。
要素は水平方向に中央寄せされます。
子要素は縦方向に配置され、それらの間に均等なスペースが空きます。

menu

  • /*menuブロック初期設定
  • /*大きな端末用のメニュー設定
  • /*小さな端末用の設定（開閉ブロック）
  • /*ドロップダウンメニュー

/*menuブロック初期設定

/*menuブロック初期設定
---------------------------------------------------------------------------*/
#menu ul {list-style: none;margin: 0;padding: 0;}

/*メニューを非表示にしておく*/
#menu {display: none;}

/*開閉用のスタイル*/
#menu.db {display: block;}
#menu.dn {display: none;}

/*メニュー１個あたりの設定*/
#menu a {
	display: block;text-decoration: none;
	text-align: center;	/*テキストを中央に*/
	padding: 14px 0;	/*上下、左右へのメニュー内の余白*/
}

/*マウスオン時*/
#menu ul li a:hover {
	opacity: 1;
	background: #e159a2;	/*背景色*/
	color: #fff;			/*文字色*/
}

#menu ブロックおよびその中のメニューアイテムの外観と動作が定義されます。

/*大きな端末用のメニュー設定

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?