What's New Qiita

20200604のCSSに関する記事は7件です。

  • 投稿日：2020-06-04T23:56:36+09:00

ローカルの画像をCSSで適用する方法

プログラミングの勉強日記

2020年6月4日　Progate Lv.83
ウェブページ制作中
CSS(back-ground-image)で背景画像が表示されなかった。

background-imageの使い方

　background-image: url( 画像ファイルのURL );
　background-image: url("画像ファイルへのパス");

urlと半角括弧の間にはスペースを入れない

index.html
<style>
  body{
    background-image:url(photo/S__520912916.jpg);
  } 
</style>

0602.PNG

このようにindex.htmlファイルと同じフォルダ内にphotoフォルダがあり、その中の画像ファイルS_520912916.jpgを背景として設定する場合、url()のファイルパス「photo/S_520912916.jpg」となる。

stylesheet.css
/* スタイルシートと同じディレクトリ */
background-image: url("image.png");  

/* スタイルシートから１つ上の階層 */
background-image: url("../image.png"); 

/* スタイルシートから１つ下の階層（今回の場合） */
background-image: url("./photo/S__520912907.jpg");
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-04T20:03:09+09:00

CSSでR2-D2を描く

この内容について

CSSを使ってR2-D2を描けるかをやってみました。
なお、本内容で作るR2-D2は、立体的なものではなく、平面的なデザインのものです。ご了承ください。
今回はあえて、CSSを省略した書き方をしていないです。

見本

今回作成するのは、このようなR2-D2です。


See the Pen
R2-D2 by engineerhikaru (@engineerhikaru)
on CodePen.


R2-D2を描く

リセットCSS

リセットCSSを全部書いときたいところですが、今回はmarginとpaddingだけなくします。

CSS
*{
  margin: 0;
  padding: 0;
}

台紙となるコンテナを用意

今回描くR2-D2の台紙となるコンテナ要素を用意します。
要素を中央に配置して、高さと横幅を300pxにして、背景色を変えています。

HTML
<div class="container">
  <!-- ここにR2-D2を描く -->
</div>
CSS
/* 外枠 */
.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 300px;
  width: 300px;
  background: #222;
}

R2-D2の土台

R2-D2の土台となる骨格を描きます
要素を中央に配置して、高さを120px、横幅を200pxにして、上左と上左を丸く変え、背景色を変えています。

HTML
<div class="r2d2-container">
  <!-- ここにR2-D2の目 -->
  <!-- ここにR2-D2の色々なパーツ -->
  <!-- ここにR2-D2の下の青い帯のような部分 -->
</div>
CSS
/* R2-D2の外枠(骨格) */
.r2d2-container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 120px;
  width: 200px;
  border-radius: 120px 120px 0 0;
  background: #E1E4E8;
}

R2-D2の目

R2-D2の目を描きます
まず外枠は、要素を中央少し上に配置して、高さを40px、横幅を40pxにして、角を少し丸く変え、背景色を変えています。
中身の目玉は、要素を中央に配置して、高さを30px、横幅を30pxにして、角を丸くし円に変え、背景色を変えています。

HTML
<div class="r2d2-eye-container">
  <div class="r2d2-eye"></div>
</div>
CSS
/* R2-D2の目の外枠 */
.r2d2-eye-container{
  position: absolute;
  top: calc(50% - 10px);
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
  width: 40px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の目玉 */
.r2d2-eye{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #000;
}

R2-D2の色々なパーツたち

R2-D2の色々なパーツたちを描きます
まず外枠は、要素を中央少し下に配置して、高さを20px、横幅を100%より少し小さくして、外側に余白を少し出し、子要素を横並びに配置させます。
中身の1番左のパーツは、高さを20px、横幅を15pxにして、角を少し変え、背景色を変えています。
中身の2番目の左のパーツは、左側に少し余白を出し、高さを20px、横幅を10pxにして、角を少し変え、背景色を変えています。
中身の3番目の左のパーツは、左側に少し余白を出し、高さを20px、横幅を15pxにして、角を少し変え、背景色を変えています。
中身の4番目の左のパーツは、左側に少し余白を出し、高さを18px、横幅を18pxにして、角を少し変え、背景色を変えています。
中身の5番目の左のパーツは、左側に少し余白を出し、高さを18px、横幅を30pxにして、角を少し変え、背景色を変えています。
中身の5番目の左のパーツの中身は、要素を中央少し右に配置して、高さを14px、横幅を14pxにして、角を丸くし円に変え、背景色を変えています。
中身の6番目の左のパーツは、左側に少し余白を出し、高さを18px、横幅を18pxにして、角を丸くし円に変え、背景色を変えています。
中身の6番目の左のパーツの中身は、要素を中央少し右に配置して、高さを14px、横幅を14pxにして、角を丸くし円に変え、背景色を変えています。
中身の7番目の左のパーツは、左側に少し余白を出し、高さを18px、横幅を18pxにして、角を少し変え、背景色を変えています。
中身の7番目の左のパーツは、左側に少し余白を出し、高さを20px、横幅を15pxにして、角を少し変え、背景色を変えています。

HTML
<div class="r2d2-parts">
  <div class="r2d2-parts-left1"></div>
  <div class="r2d2-parts-left2"></div>
  <div class="r2d2-parts-left3"></div>
  <div class="r2d2-parts-left4"></div>
  <div class="r2d2-parts-center">
     <div class="r2d2-parts-center-eye"></div>
  </div>
  <div class="r2d2-parts-right1">
    <div class="r2d2-parts-right1-eye"></div>
  </div>
  <div class="r2d2-parts-right2"></div>
  <div class="r2d2-parts-right3"></div>
</div>
CSS
/* R2-D2の目の下のパーツ */
.r2d2-parts{
  position: absolute;
  top: calc(50% + 15px);
  height: 20px;
  width: calc(100% - 20px);
  padding: 0 10px;
  display: flex;
}
/* R2-D2の左のパーツ1 */
.r2d2-parts-left1{
  height: 20px;
  width: 15px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の左のパーツ2 */
.r2d2-parts-left2{
  margin-left: 2px;
  height: 20px;
  width: 10px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の左のパーツ3 */
.r2d2-parts-left3{
  margin-left: 5px;
  height: 20px;
  width: 15px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の左のパーツ4 */
.r2d2-parts-left4{
  margin-left: 5px;
  margin-top: 2px;
  height: 18px;
  width: 18px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の中央のパーツ */
.r2d2-parts-center{
  margin-left: 5px;
  margin-top: 2px;
  height: 18px;
  width: 30px;
  border-radius: 3px;
  background: #0685B7;
  position: relative;
}
/* R2-D2の中央のパーツの中身 */
.r2d2-parts-center-eye{
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #FF5657;
}

/* R2-D2の右のパーツ1 */
.r2d2-parts-right1{
  margin-left: 5px;
  margin-top: 2px;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #A6A6A6;
  position: relative;
}
/* R2-D2の右のパーツ1の中身 */
.r2d2-parts-right1-eye{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #535353;
}
/* R2-D2の右のパーツ2 */
.r2d2-parts-right2{
  margin-left: 5px;
  margin-top: 2px;
  height: 18px;
  width: 18px;
  border-radius: 3px;
  background: #0685B7;
}
/* R2-D2の右のパーツ3 */
.r2d2-parts-right3{
  margin-left: 5px;
  height: 20px;
  width: 15px;
  border-radius: 3px;
  background: #0685B7;
}

R2-D2の下の青い帯のような部分

R2-D2の下の青い帯のような部分を描きます
要素を中央下の方に配置して、高さを10px、横幅を100%にして、背景色を変えています。

HTML
<div class="r2d2-band"></div>
CSS
/* R2-D2の下の青い帯のような部分 */
.r2d2-band{
  position: absolute;
  bottom: 10px;
  height: 10px;
  width: 100%;
  background: #0685B7;
}

まとめ

今回使ったCSSは、基本的なものばかりで、これらを駆使すればどんなものでも描けます。(平面的なものであれば)
CSSを使って絵を書いたりと、ゲーム感覚で学んでいくと学習効率が上がりますね(^^)

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-04T13:36:28+09:00

APIで取ってきた画像をVueでbackground-imageを指定する

Vue.jsでbackground-imageを指定する

APIで取得してきたものをhtml内でなんとか指定したいっていう感じ

諦めてimgタグでレイアウト整えようとしたところで解決したので、感動した。

vueなどで普段から書いているフロントエンドエンジニアたちにとってこの書き方ができるかできないかで生涯年収が2倍違うと言っても過言。

index.vue
<template>
  <div :style="{backgroundImage: 'url(' + img[img.length-1].img_url + ')'}">
    HelloWorld!
  </div>
</template>

<script>
export default {
  async asyncData() {
    return await axios
      .get('/api/img/get_img')
      .then(res => {
        return {
         img: res.data.details.img
        }
      })
      .catch(error => {
        // throw error;
      });
  },
}
</script>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-04T10:15:07+09:00

子要素にopacityを継承させたくないとき

背景にopacityをかけて透過させたいけどその上に配置する要素は透過させたくない、こんなシーン結構あるはず。

See the Pen opacity-sample by ririli (@ririli) on CodePen.

サンプルのid=background1は失敗して上に配置する子要素まで透過してしまってます。
opacity-cancelというidでpタグだけなんとかopacityをなかったことにしようとしていますがうまくいっていませんね。

なんでうまくいかんの？

実はopacityプロパティは該当の要素の子要素全てにopacityを適用させてしまいます。
これだけならcolorなんかと同じですが、決定的な違いがあります。
実は子要素にとってのopacity1=親要素のopacity設定値になってしまうのです。

そのため、子要素側でopacityをunsetにしてもopacity1の状態がそもそも薄くなってしまっているので効果がないわけです。

どうすればいいわけ？

opacityの代わりにrgbaで透明度を操作します。
これがサンプルのid=background2のパターンです。
元のbackground-corolo:#aaaaaaを変換して全て170に、opacityに設定していた0.3をAlphaにします。

これによって透明度の情報はこの要素のみに適用され、子要素は何も影響を受けません。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-04T05:27:55+09:00

初心者によるプログラミング学習ログ 334日目

100日チャレンジの334日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
334日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-04T03:58:08+09:00

再度プログラミングの復習

作りたい物のラフ画を箇条書きで表してみました。箇条書きなので見にくかったらすみませんf(^ー^;　

ラフ画を元に表のページを
htmlとcssで書いてみようかと思います。

つまずきそうな点
・padding　
・divで書いてる時のコードの配置等度々間違えそうです…

Screenshot_20200604-035908_Gallery.jpg

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-04T00:46:47+09:00

【A-Frame】WebVRを自分のサイトに組み込んでみる

A-Frameを使用してWebVRを自分のサイトに組み込んでみました。短いコードでWebVRが作成できるのがすごいです。

実際の画面がこちらです。
gazo1.png

公開サイト

https://3dblock.jp

以下の「ブロックを作成」メニューから飛べます。
here.png

今回追加した機能

  • 視点を合わせてクリックをするとブロックを配置
  • 置いたブロックをクリックするとランダムで色変更
  • 十字キーで左右上下の移動
  • テキスト表示(英語)

今回追加しなかった機能

  • 今後は置いたブロックをクリックしたら色を指定できるようにしたい
  • テキスト表示(日本語)　ここで出来そうです
  • 空間(sky)と地面(ground)は最初はテクスチャを張っていたが、雰囲気に合わず一旦削除

コード

<!DOCTYPE html>
<html>

<head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-teleport-controls@0.2.x/dist/aframe-teleport-controls.min.js"></script>
    <script src="https://unpkg.com/aframe-controller-cursor-component@0.2.x/dist/aframe-controller-cursor-component.min.js"></script>
    <script src="https://rawgit.com/ngokevin/kframe/csstricks/scenes/aincraft/components/random-color.js"></script>
    <script src="https://rawgit.com/ngokevin/kframe/csstricks/scenes/aincraft/components/snap.js"></script>
    <script src="https://rawgit.com/ngokevin/kframe/csstricks/scenes/aincraft/components/intersection-spawn.js"></script>

    <body>
        <a-scene>
            <a-assets>
                <a-mixin id="voxel" geometry="primitive: box; height: 0.3; width: 0.3; depth: 0.3" material="shader: standard" random-color snap="offset: 0.25 0.25 0.25; snap: 0.3 0.3 0.3 " img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"></a-mixin>
            </a-assets>

            <a-cylinder id="ground" collar="white" radius="30" height="0.1"></a-cylinder>
            <a-sky color="#CCFFFF" radius="900"></a-sky>

            <!-- Hands. -->
            <a-entity id="teleHand" hand-controls="left" teleport-controls="type: parabolic; collisionEntities: [mixin='voxel'], #ground"></a-entity>
            <a-entity id="blockHand" hand-controls="right" controller-cursor intersection-spawn="event: click; mixin: voxel"></a-entity>

            <!-- Camera. -->
            <a-camera>
                <a-cursor intersection-spawn="event: click; mixin: voxel"></a-cursor>
            </a-camera>

            <a-text position="-3.5 1.25 -3" value="welcome to my website!&#13;&#10;(Move or Click!)" color="#222222" scale="3"></a-text>
        </a-scene>

    </body>

</html>

本当に短いです。。笑

解説

以下の部分でクリックしたらブロックが表示されるようにしています。
ブロックの大きさは、height・width・depthで定義しています。

<a-assets>
<a-mixin id="voxel" geometry="primitive: box; height: 0.3; width: 0.3; depth: 0.3" material="shader: standard" random-color snap="offset: 0.25 0.25 0.25; snap: 0.3 0.3 0.3 ></a-mixin>
</a-assets>

<a-scene>
<a-text position="-3 2.25 -3" value="welcome to my website!&#13;&#10;(Move or Click!)" color="#222222" scale="3"></a-text>
</a-scene>

positionでx軸、y軸、z軸の順で座標を定義しており、半角スペースで区切ります。忘れた時には以下のイラストが役立ちます。

zahyo.png

参考にしたサイト

公式ページ
- https://aframe.io/docs/1.0.0

今後の改善点

  • この状態でデザインがしやすいとは決して言えないため、改良していきたい
  • objファイルの取込も活用して、もう少し世界観を表現したい
  • 他の技術ももう少し組み合わせたかった
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧