fontawesomeや画像を用いずCSSだけで矢印アイコンを表現する ggってもなかなか検索で見つからないので自作してみた。 filename.html <div class="topScroll"> <a href=""></a> </div> filename.css topScroll { width: 70px; height: 70px; background-color: black; border-radius: 50%; position: fixed; bottom: 50px; right: 50px; } .topScroll a { width: 100px; height: 100px; position: relative; display: block; } .topScroll a::before { content: ""; border-left: 3px solid grey; border-top: 3px solid grey; width: 25px; height: 25px; transform: rotate(45deg); position: absolute; top: 30px; left: 21px; }
<div class="topScroll"> <a href=""></a> </div>
topScroll { width: 70px; height: 70px; background-color: black; border-radius: 50%; position: fixed; bottom: 50px; right: 50px; } .topScroll a { width: 100px; height: 100px; position: relative; display: block; } .topScroll a::before { content: ""; border-left: 3px solid grey; border-top: 3px solid grey; width: 25px; height: 25px; transform: rotate(45deg); position: absolute; top: 30px; left: 21px; }
CSSをやっているとたまに、positionがわからなくなります。 これたぶん初心者あるあるなんじゃないかな。 せっかくだから、自分の頭の整理がてら、まとめてみます。 Positionとは でもその前に、そもそも position とはなんなのでしょうか。 簡単に言うと要素の「配置・位置」を決めるCSSプロパティのこと。 要素を重ねるときや、要素を特定の位置に配置させる時に使用します。 Positionの種類一覧 それでは、まずpositionの種類とその簡単な説明。今まで、なんとなく、これか！いや、うまく行かない、じゃあこれか！みたいな感じで使っていた感が否めないので、ここで大体の特徴は掴みたいと思います。 static 何も指定しなければ、static というのがdefaultになっています。 このstaticというのは、位置の指定ができないもので、position=無効！みたいな感じで覚えておきます。もしpositionを変更したいのであれば、他のプロパティに変更する必要があります。 relative 要素が通常配置される位置を基準に動かすプロパティ。 relativeは、通常配置されている位置は、確保されたまま要素が動くので、次に要素があっても詰められることがありません。 absolute 親要素を基準とした中で絶対的な位置を決める。しかし、その場合、親要素は"必ずrelativeかfixed"でなければならない。 absoluteの場合、relativeと違い、通常配置されるはずだった位置は確保されずに動くので次にある要素が詰めてきます。 fixed absoluteと似ているが、親要素ではなく、ウィンドウ自体を基準として位置を決める。 使える要素一覧 left, right, top, bottomが使用できるのは relative absolute またここでマイナスの値を指定することで、要素からはみ出すことができる。 ※基本的に、rightとleftを同時に使用する、もしくは、topとbottomを同時に使用することはありません。もし同時に使用してしまった場合は下記の優先順位が適用されますのでご注意を。 right > left top > bottom z-indexが使えるのは relative absolute fixed まとめ positionは、ちゃんと理解できるまでは使うのが難しいです。 またfloatやdisplayなどと重なると、さらにわけわかめになってきますよね。。 でも、とりあえずdiv要素の配置に困ったら、positionで位置を固定することを心がけてみます。 ちなみに、position覚えるためには、こんなWEBSITE（テーマ）を模作してみると良いよ。 http://sage.theroar.nl/ （pinterestでオシャンなHP探してたら、見つけたやつ。）
CSSをやっているとたまに、positionがわからなくなります。
これたぶん初心者あるあるなんじゃないかな。 せっかくだから、自分の頭の整理がてら、まとめてみます。
でもその前に、そもそも position とはなんなのでしょうか。
簡単に言うと要素の「配置・位置」を決めるCSSプロパティのこと。 要素を重ねるときや、要素を特定の位置に配置させる時に使用します。
それでは、まずpositionの種類とその簡単な説明。今まで、なんとなく、これか！いや、うまく行かない、じゃあこれか！みたいな感じで使っていた感が否めないので、ここで大体の特徴は掴みたいと思います。
何も指定しなければ、static というのがdefaultになっています。 このstaticというのは、位置の指定ができないもので、position=無効！みたいな感じで覚えておきます。もしpositionを変更したいのであれば、他のプロパティに変更する必要があります。
要素が通常配置される位置を基準に動かすプロパティ。 relativeは、通常配置されている位置は、確保されたまま要素が動くので、次に要素があっても詰められることがありません。
親要素を基準とした中で絶対的な位置を決める。しかし、その場合、親要素は"必ずrelativeかfixed"でなければならない。 absoluteの場合、relativeと違い、通常配置されるはずだった位置は確保されずに動くので次にある要素が詰めてきます。
absoluteと似ているが、親要素ではなく、ウィンドウ自体を基準として位置を決める。
またここでマイナスの値を指定することで、要素からはみ出すことができる。
※基本的に、rightとleftを同時に使用する、もしくは、topとbottomを同時に使用することはありません。もし同時に使用してしまった場合は下記の優先順位が適用されますのでご注意を。 right > left top > bottom
positionは、ちゃんと理解できるまでは使うのが難しいです。 またfloatやdisplayなどと重なると、さらにわけわかめになってきますよね。。
でも、とりあえずdiv要素の配置に困ったら、positionで位置を固定することを心がけてみます。
ちなみに、position覚えるためには、こんなWEBSITE（テーマ）を模作してみると良いよ。
http://sage.theroar.nl/
（pinterestでオシャンなHP探してたら、見つけたやつ。）
参考情報 coliss: CSS Flexbox の基礎知識と使い方をやさしく解説 link 各プロパティの詳細な説明や概観理解はこちらを参照した方がよいと思います 例html <body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> </body> css .flex-container { display: flex; /* 子要素がflexアイテムになる */ display: inline-flex; /* インライン要素をflexアイテムにしたい場合 */ /* flexコンテナの主軸の方法を */ flex-direction: row /* 左から右の水平方向に設定する. default */ flex-direction: row-reverse /* 右から左の水平方向に設定する */ flex-direction: column /* 上から下の垂直方法に設定する */ flex-direction: column-reverse /* 下から上の垂直方向に設定する */ /* flexコンテナのwrap方法を指定 */ flex-wrap: nowrap; /* 複数のアイテムを1行に配置する. default */ flex-wrap: wrap; /* 必要に応じてflexアイテムを左から右、上から下に複数行に配置する */ flex-wrap: wrap-reverse; /* flexアイテムを左から右、下から上へ複数行に配置する */ /* flex-directionとflex-wrapをまとめて設定する */ flex-flow: <flex-direction> || <flex-wrap>; flex-flow: row nowrap; /* default */ /* flexコンテナの主軸に剃ってflexアイテムを1行に配置する */ justify-content: flex-start; /* モードに従い、flexコンテナの左側に配置される. default */ justify-content: flex-end; /* モードに従い、flexコンテナの右側に配置される */ justify-content: center; /* flexコンテナの中央に配置される */ justify-content: space-between; /* 最初と最後のアイテムは端に、残りは等間隔で配置される */ justify-content: space-around; /* 等間隔のmarginを持ったアイテムが等間隔に配置される */ /* flexコンテナのクロス軸に垂直方向で配置する align-items: stretch; /* flexアイテムはflexコンテナの高さ（または幅）いっぱいに配置される */ align-items: flex-start; /* flexアイテムはクロス軸の視点に配置される. 上側とか */ align-items: flex-end; /* flexアイテムはflexコンテナのクロス軸の終点に配置される. 下側とか */ align-items: center; /* flexアイテムはflexコンテナのクロス軸の中央に配置される */ align-items: baseline; /* flexアイテムはベースラインに沿って配置される. ベースラインはggr */ } .flex-item { /* flexアイテムの相対配置順位を指定する */ order: <integer> /* フリーのポジティブなスペースがある場合、 */ /* flexアイテムが他のflexアイテムと比較してどのくらいの大きさになるかを指定する */ flex-grow: <number>; flex-grow: 0; /* 伸長しない. default */ /* フリーのネガティブなスペースがある場合、 */ /* flexアイテムが他のflexアイテムと比較してどのくらい縮まるかを指定する */ flex-shrink: <number>; flex-shrink: 0; /* オリジナルのサイズを維持する */ flex-shrink: 1; /* default */ /* flexアイテムの最初のメインとなるサイズを指定する */ flex-basis: auto | <width>; flex-basis: 350px; /* デフォルトのサイズを350pxに指定する */ flex-basis: auto /* default */ /* flex-grow, flex-shrink, flex-basisを指定するショートハンド */ /* w3c推奨 */ flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; flex: 0 1 auto; /* default */ /* 個別のflexアイテムのalign-items値を指定する */ align-self: auto | flex-start | flex-end | center | baseline | stretch; align-self: auto; /* default */ }
<body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> </body>
.flex-container { display: flex; /* 子要素がflexアイテムになる */ display: inline-flex; /* インライン要素をflexアイテムにしたい場合 */ /* flexコンテナの主軸の方法を */ flex-direction: row /* 左から右の水平方向に設定する. default */ flex-direction: row-reverse /* 右から左の水平方向に設定する */ flex-direction: column /* 上から下の垂直方法に設定する */ flex-direction: column-reverse /* 下から上の垂直方向に設定する */ /* flexコンテナのwrap方法を指定 */ flex-wrap: nowrap; /* 複数のアイテムを1行に配置する. default */ flex-wrap: wrap; /* 必要に応じてflexアイテムを左から右、上から下に複数行に配置する */ flex-wrap: wrap-reverse; /* flexアイテムを左から右、下から上へ複数行に配置する */ /* flex-directionとflex-wrapをまとめて設定する */ flex-flow: <flex-direction> || <flex-wrap>; flex-flow: row nowrap; /* default */ /* flexコンテナの主軸に剃ってflexアイテムを1行に配置する */ justify-content: flex-start; /* モードに従い、flexコンテナの左側に配置される. default */ justify-content: flex-end; /* モードに従い、flexコンテナの右側に配置される */ justify-content: center; /* flexコンテナの中央に配置される */ justify-content: space-between; /* 最初と最後のアイテムは端に、残りは等間隔で配置される */ justify-content: space-around; /* 等間隔のmarginを持ったアイテムが等間隔に配置される */ /* flexコンテナのクロス軸に垂直方向で配置する align-items: stretch; /* flexアイテムはflexコンテナの高さ（または幅）いっぱいに配置される */ align-items: flex-start; /* flexアイテムはクロス軸の視点に配置される. 上側とか */ align-items: flex-end; /* flexアイテムはflexコンテナのクロス軸の終点に配置される. 下側とか */ align-items: center; /* flexアイテムはflexコンテナのクロス軸の中央に配置される */ align-items: baseline; /* flexアイテムはベースラインに沿って配置される. ベースラインはggr */ } .flex-item { /* flexアイテムの相対配置順位を指定する */ order: <integer> /* フリーのポジティブなスペースがある場合、 */ /* flexアイテムが他のflexアイテムと比較してどのくらいの大きさになるかを指定する */ flex-grow: <number>; flex-grow: 0; /* 伸長しない. default */ /* フリーのネガティブなスペースがある場合、 */ /* flexアイテムが他のflexアイテムと比較してどのくらい縮まるかを指定する */ flex-shrink: <number>; flex-shrink: 0; /* オリジナルのサイズを維持する */ flex-shrink: 1; /* default */ /* flexアイテムの最初のメインとなるサイズを指定する */ flex-basis: auto | <width>; flex-basis: 350px; /* デフォルトのサイズを350pxに指定する */ flex-basis: auto /* default */ /* flex-grow, flex-shrink, flex-basisを指定するショートハンド */ /* w3c推奨 */ flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; flex: 0 1 auto; /* default */ /* 個別のflexアイテムのalign-items値を指定する */ align-self: auto | flex-start | flex-end | center | baseline | stretch; align-self: auto; /* default */ }
CSSで実装するアコーディオンメニューサンプル プラス、マイナスつきアコーディオンメニュー（複数開閉可能） See the Pen dyPrMjV by shintarou-akao (@shintarou-akao) on CodePen. メニューを開く前は、プラスがついており、開いた直後にマイナスに切り替わります。また複数開閉可能なようにtype属性にcheckboxを指定しています。 この場合、inputタグにidを指定しておき、checkedされた場合に label要素の後ろにマイナスを表示 メニュー内を display: block; によって表示 しています。 プラス、マイナスつきアコーディオンメニュー（一つ開くと一つ閉じる） See the Pen povqyyv by shintarou-akao (@shintarou-akao) on CodePen. こちらはプラス、マイナス部分は先ほどと同じですが、type属性をradioにすることにより、一つのみしか選択できなくなります。 これによって、一つのメニューのみ開く動きをつけることができます。
See the Pen dyPrMjV by shintarou-akao (@shintarou-akao) on CodePen.
メニューを開く前は、プラスがついており、開いた直後にマイナスに切り替わります。また複数開閉可能なようにtype属性にcheckboxを指定しています。
この場合、inputタグにidを指定しておき、checkedされた場合に
しています。
See the Pen povqyyv by shintarou-akao (@shintarou-akao) on CodePen.
こちらはプラス、マイナス部分は先ほどと同じですが、type属性をradioにすることにより、一つのみしか選択できなくなります。
これによって、一つのメニューのみ開く動きをつけることができます。
