リストに枠線をつけたい リストを1pxの太さの枠線で囲みます。 li{ border:solid 1px #EEE; } 上記のコードだけだと枠線が重なり、線の太さが2pxになってしまいます。 重なりをなくす 下記のコードの li + li はリストの二つ目以降という意味になります。 つまり二つ目以降は上の枠線を消すということです。 li{ border:solid 1px #EEE; } li + li { boder-top:none; } なくした結果 上記のコードを記述することで線の重なりをなくすことができました 最後に 他にもっと良い方法がありましたらご教授ください。
リストを1pxの太さの枠線で囲みます。
li{ border:solid 1px #EEE; }
上記のコードだけだと枠線が重なり、線の太さが2pxになってしまいます。
下記のコードの li + li はリストの二つ目以降という意味になります。 つまり二つ目以降は上の枠線を消すということです。
li{ border:solid 1px #EEE; } li + li { boder-top:none; }
上記のコードを記述することで線の重なりをなくすことができました
他にもっと良い方法がありましたらご教授ください。
CSS animation day7 となりました。 ちょっとはCSS animation に慣れてきましたが、まだ底なし沼の感じがあります。 本日は、雲を表現したいと思います。 1. 完成版 See the Pen WPwxXJ by hiroya iizuka (@hiroyaiizuka) on CodePen. 2. なぜか？ 雲を取り入れることで、サイトに厳粛な印象を漂わせたり 不思議で魅力的な感じを表現することができます。 有名な素敵なwebサイトですが 寒川神社 magic leap こういうデザインは、みるものを本当に魅了しますね！ 3. 参考文献 youtube 雲をこちらからダウンロード 4. 分解してみる ❶. では、画面に雲を出しましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="cloud"></div> </body> </html> styles.css body{ margin: 0; padding: 0; background: #090a0f } .cloud{ position: absolute; top:0; left: 0; width: 100%; height:100%; background: url('../img/clouds.png'); background-size: cover; } ポイントは1つ ・background-size :cover ダウンロードした画像の縦横比はそのままで、背景をちゃんと覆う最小サイズになるように設定されます。 ❷. 雲を動かす styles.css .cloud{ position: absolute; top:0; left: 0; width: 100%; height:100%; background: url('../img/clouds.png'); background-size: cover; animation: cloud 60s linear infinite; } @keyframes cloud{ 0%{ background-position: 0px; } 100%{ background-position: 5440px; } } ポイントは2つ ・animation の動く時間(60s) はゆっくりの方が、厳かな感じが出そうです。 ・background-position 100% の設定に、画像の横幅のサイズを書くことで、画像上を左から右までフルに動きます ❸. 逆方向に流れるゆっくり目の雲を追加します。 styles.css .cloud:before{ content: ''; position: absolute; top:0; left: 0; width: 100%; height:100%; background: url('../img/clouds.png'); background-size: cover; opacity:0.9; animation: cloud-reverse 120s linear infinite; } @keyframes cloud-reverse{ 0%{ background-position: 5440px; } 100%{ background-position: 0px; } } このテクニックは、wave2 と同じで 逆方向に、ゆっくりなアニメーションを、右から左に流す表現方法です。 画面にさらなる立体感が出て、パララックスの動きと似てますね。 背景を変えたり、月を添えたり、星をつけたり いろんな表現を追加するともっと素敵になりますね。 本日は以上です〜
CSS animation day7 となりました。
ちょっとはCSS animation に慣れてきましたが、まだ底なし沼の感じがあります。
本日は、雲を表現したいと思います。
See the Pen WPwxXJ by hiroya iizuka (@hiroyaiizuka) on CodePen.
雲を取り入れることで、サイトに厳粛な印象を漂わせたり 不思議で魅力的な感じを表現することができます。
有名な素敵なwebサイトですが
寒川神社 magic leap
こういうデザインは、みるものを本当に魅了しますね！
youtube 雲をこちらからダウンロード
❶. では、画面に雲を出しましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="cloud"></div> </body> </html>
body{ margin: 0; padding: 0; background: #090a0f } .cloud{ position: absolute; top:0; left: 0; width: 100%; height:100%; background: url('../img/clouds.png'); background-size: cover; }
ポイントは1つ ・background-size :cover ダウンロードした画像の縦横比はそのままで、背景をちゃんと覆う最小サイズになるように設定されます。
ダウンロードした画像の縦横比はそのままで、背景をちゃんと覆う最小サイズになるように設定されます。
❷. 雲を動かす
.cloud{ position: absolute; top:0; left: 0; width: 100%; height:100%; background: url('../img/clouds.png'); background-size: cover; animation: cloud 60s linear infinite; } @keyframes cloud{ 0%{ background-position: 0px; } 100%{ background-position: 5440px; } }
ポイントは2つ ・animation の動く時間(60s) はゆっくりの方が、厳かな感じが出そうです。 ・background-position 100% の設定に、画像の横幅のサイズを書くことで、画像上を左から右までフルに動きます
100% の設定に、画像の横幅のサイズを書くことで、画像上を左から右までフルに動きます
❸. 逆方向に流れるゆっくり目の雲を追加します。
.cloud:before{ content: ''; position: absolute; top:0; left: 0; width: 100%; height:100%; background: url('../img/clouds.png'); background-size: cover; opacity:0.9; animation: cloud-reverse 120s linear infinite; } @keyframes cloud-reverse{ 0%{ background-position: 5440px; } 100%{ background-position: 0px; } }
このテクニックは、wave2 と同じで 逆方向に、ゆっくりなアニメーションを、右から左に流す表現方法です。 画面にさらなる立体感が出て、パララックスの動きと似てますね。
背景を変えたり、月を添えたり、星をつけたり いろんな表現を追加するともっと素敵になりますね。
本日は以上です〜
＊TECH::EXPERT でインプットした知識を自分なりの理解でアウトプットしています。何も参考にならないので悪しからず。 今日のインプット [HTML] <a要素・・・URLをもつ属性が必要である。その要素の表示するURLをリンクづけする。 ex) <a href="リンク先" <img要素・・・画像をもつ属性が必要である。その要素がもつ画像を表示する。 ex) <img src(画像の所在）="image.jpg" alt(代替文字列)="hanage" <!-- -->・・・コメントアウト。<!--〇〇-->で囲まれた部分を隠す。バグ等が怪しい位置にコメントアウトを適用して追跡をすることもできる。 ・・・ブラウザ上に表示されないサイトの情報を書き記す。 ①title要素・・・サイトのタイトルをつける ②meta要素・・・文章の情報を保存し、サイトや検索エンジンに知らせるために記載（文字化け防止） ③link要素・・・スタイルシートの指定 ④script要素・・・Javascriptの指定 <p要素・・・paragraph。ブロック要素にあたり、CSSをあて、この文章に背景色をつけたり別の要素から幅をとったりすることができる *HTML5においての構造化タグ ①article:独立したコンテンツであることを示すタグ ②section:コンテンツの中の1つの区切りであることを示すタグ ③nav:ページのナビゲーションを示すタグ ④aside：メインコンテンツとは別にサブで表示するタグ ⑤header:ヘッダー（ページの先頭部分） ⑥footer：フッター（ページの末尾部分) [CSS] セレクタ { プロパティ: 値;} ⇨ 適用する場所{ 適用する効果: どのくらい;} *基本的にはclassセレクタを使用。全体の中で複数ある要素に対して一括でCSSを当てたいときはclass,全体の中で１つしか適用箇所がない場合にはidを使う（classのほうが使い易い) colorプロパティ・・・color: rgba(x, x, x, x);で表すことが多い。最後のaは透明度を表す。xは（０〜２５５） CSSでの余白の指定・・・ある要素がborderで囲まれているとき、 ①borderより外側⇨margin ②borderより内側⇨padding。 単位は共にpx。 パラメータの個数によりサイズ設定される部位が決まり、 １つ⇨（上下左右） ２つ⇨（上下）（左右） ３つ⇨（上）（左右）（下） ４つ⇨（上）（右）（下）（左）。 box-sizing・・・ボックスサイズの算出方法を指定するためのプロパティ。 ある要素の内側に余白をとりたいとする。paddingを使用すると、paddingの数値分だけ要素全体が大きくなった上で余白が作られてしまうため、ボックス全体の大きさを変えたくない場合は boxsizing:border-box; と指定する。 text-align・・・テキストの横方向での位置を指定するためのプロパティ。centerを指定した場合は左右の中央に配置される。 font-size・・・文字の大きさを調節する。単位はpx。remは標準のフォントサイズを基準とした指定の仕方。 letter-spacing・・・文字同士の横間隔を指定した値分広げる。pxでいいと思う。 display:inline-block; ・・・要素を横並びにした上で、横幅と高さを指定できる。 aタグが用いられ、そのままでは大きさの指定が出来ない時に使われたりする。
＊TECH::EXPERT でインプットした知識を自分なりの理解でアウトプットしています。何も参考にならないので悪しからず。
今日のインプット [HTML] <a要素・・・URLをもつ属性が必要である。その要素の表示するURLをリンクづけする。 ex) <a href="リンク先"
<img要素・・・画像をもつ属性が必要である。その要素がもつ画像を表示する。 ex) <img src(画像の所在）="image.jpg" alt(代替文字列)="hanage"
<!-- -->・・・コメントアウト。<!--〇〇-->で囲まれた部分を隠す。バグ等が怪しい位置にコメントアウトを適用して追跡をすることもできる。
<p要素・・・paragraph。ブロック要素にあたり、CSSをあて、この文章に背景色をつけたり別の要素から幅をとったりすることができる
*HTML5においての構造化タグ ①article:独立したコンテンツであることを示すタグ ②section:コンテンツの中の1つの区切りであることを示すタグ ③nav:ページのナビゲーションを示すタグ ④aside：メインコンテンツとは別にサブで表示するタグ ⑤header:ヘッダー（ページの先頭部分） ⑥footer：フッター（ページの末尾部分)
[CSS] セレクタ { プロパティ: 値;} ⇨ 適用する場所{ 適用する効果: どのくらい;}
*基本的にはclassセレクタを使用。全体の中で複数ある要素に対して一括でCSSを当てたいときはclass,全体の中で１つしか適用箇所がない場合にはidを使う（classのほうが使い易い)
colorプロパティ・・・color: rgba(x, x, x, x);で表すことが多い。最後のaは透明度を表す。xは（０〜２５５）
CSSでの余白の指定・・・ある要素がborderで囲まれているとき、 ①borderより外側⇨margin ②borderより内側⇨padding。 単位は共にpx。 パラメータの個数によりサイズ設定される部位が決まり、 １つ⇨（上下左右） ２つ⇨（上下）（左右） ３つ⇨（上）（左右）（下） ４つ⇨（上）（右）（下）（左）。
box-sizing・・・ボックスサイズの算出方法を指定するためのプロパティ。 ある要素の内側に余白をとりたいとする。paddingを使用すると、paddingの数値分だけ要素全体が大きくなった上で余白が作られてしまうため、ボックス全体の大きさを変えたくない場合は boxsizing:border-box; と指定する。
text-align・・・テキストの横方向での位置を指定するためのプロパティ。centerを指定した場合は左右の中央に配置される。 font-size・・・文字の大きさを調節する。単位はpx。remは標準のフォントサイズを基準とした指定の仕方。 letter-spacing・・・文字同士の横間隔を指定した値分広げる。pxでいいと思う。 display:inline-block; ・・・要素を横並びにした上で、横幅と高さを指定できる。 aタグが用いられ、そのままでは大きさの指定が出来ない時に使われたりする。
