What's New Qiita

20190830のCSSに関する記事は5件です。

  • 投稿日：2019-08-30T16:09:34+09:00

Photoshopで背景画像を切り抜く

問題点：PSDのデザインは最大の画面サイズではありません。 したがって、PSDからバックグラウンド全体をカットすると、バックグラウンドは繰り返されますが、破損します。

ベストプラクティス：元の画像パターンのみをカットします（利点：小さな画像サイズの結果、ページの読み込み時間が短くなります）

①背景画像カッティングプロセス

STEP 1. PhotoshopでオリジナルのPSDを開く (例：元の背景画像のサイズ→ 1000 x 700 px)

image-1-1.png

背景画像のパターンコピーする手順

STEP 1. クリックPattern Overlay(2) > クリックPattern Overlay > (3) クリックcopy pattern (4)

image-2-2.png

STEP 2. コピーしたパターンにマウスを合わせて元のパターンサイズ（283 × 283 px）を確認し、サイズを覚えておいてください。

image-3.png

STEP 3. 背景レイヤーを新しいページに複製します。

image-4.png

STEP 4. 背景の矩形形状（1000 x 700 px → 283 x 283 px）のサイズを変更し、Radius（半径）を15px → 0）を削除します。 背景（bg-charm.png）イメージをトリムして保存します。

image-5.png
元と背景画像：(1000 x 700px)
image-7.png
repeat外した背景画像：(283 x 283px)

②PC / SP用のビューポート互換コーディング(CSS):

PCの場合:

.charm-bg {
    background: url('img/charm/bg-charm.png') repeat top left;
}

SPの場合:

.charm-bg {
    background: url('img/charm/bg-charm.png') repeat top left;
    background-size: 50%;
}

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-30T16:00:46+09:00

ドットインストールさんの動画をいくつか視聴して、オリジナルで作ってみた「ラストババ抜き」

はじめに

こんにちは。私は今夏休みなので、たくさん時間を確保できる状況にあります。
そこで、HTML、CSS、JavaScriptをしっかり勉強しようと考えました。
私が勉強する教材として利用したのがドットインストールです。

そして今回、ある程度、理解することができ、オリジナルでゲームを作ることができたので、記事にしました。

久しぶりの投稿になりますが、よろしくお願いします。

視聴したレッスン

  • 【旧版】はじめてのHTML
  • 【旧版】はじめてのCSS
  • 【旧版】JavaScript基礎文法徹底マスター
  • 【旧版】JavaScriptでおみくじを作ろう
  • 実践！ウェブサイトを作ろう
  • 実践！スマートフォンサイトを作ろう
  • 詳解HTML 基礎文法編
  • 詳解CSS 基礎文法編
  • はじめてのJavaScript
  • 詳解JavaScript DOM編
  • JavaScriptでスライドショーを作ろう
  • JavaScriptでスロットマシンを作ろう
  • JavaScriptでハイアンドローゲームを作ろう
  • JavaScriptでカウントダウンタイマーを作ろう
  • JavaScriptで5秒当てゲームを作ろう
  • JavaScriptで作る誕生日診断
  • JavaScriptで作る王様ゲーム

上記に書いてあるレッスンを視聴しました。
それぞれの文法については、2~3周ほどしました。
JavaScriptに関しては、私は他の言語も触っていましたので、スムーズに理解することができました。

環境

  • Windows 10 home
  • Google Chrome

「ラストババ抜き」の制作

このゲームはトランプの「ババ抜き」の最後の部分を少し改良して再現したゲームになります。相手のカード枚数が残り2枚で、そこから「JOKER」のカードではなく、「あたり」のカードを選ぶものです。

こちらから遊ぶことができます。→ ラストババ抜き

ソースコード

Githubにもあげてありますが、こちらにもそれぞれ載せておきます。

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ラストババ抜き</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>dealer</h1>
        <div class="dealer">
            <ul>
                <li>?</li>
                <li>?</li>
            </ul>
        </div>

        <div id="resetButton">もう一度！</div>
        <div id="result"></div>

        <h1>player</h1>
        <div class="player">あたりを引け！</div>
    </div>

    <script src="main.js"></script>

</body>
</html>
styles.css
body{
    background-color:#088A4B;
}

.container{
    width:500px;
    margin:100px auto;
    font-weight:bold;
    font-size: 24px;
    text-align:center;
}

h1{
    border:5px solid #fff;
    margin:0 0 30px;
}

ul{
    display:flex;
    justify-content:space-between;
    list-style:none;
    padding:0;
    margin:0;
}

li,.player{
    background-color:skyblue;
    width:100px;
    height:160px;
    border:5px solid #fff;
    border-radius:5px;
    line-height:160px;
    user-select:none;
}

li:hover{
    opacity:0.8;
    cursor:pointer;
    user-select:none;
}

.player{
    margin:0 auto;
    font-size: 12px;
}

#result{
    margin:50px 0;
    height:70px;
    font-size: 48px;
    line-height:70px;
}

#resetButton{
    width:100px;
    height:100px;
    line-height:100px;
    font-size:18px;
    border-radius:50%;
    background-color:purple;
    border:3px solid #fff;
    float:right;
    position:relative;
    top:30px;
    right:60px;
}

#resetButton:hover{
    opacity:0.8;
    cursor:pointer;
    user-select:none;
}

.hidden{
    display:none;
}
main.js
"use strict";

{
    const d_li=document.querySelectorAll(".dealer li");
    const resetButton=document.getElementById("resetButton");
    const result=document.getElementById("result");

    window.onload=function(){
        init();
    }

    for(let i=0;i<d_li.length;i++){
        d_li[i].addEventListener("click",()=>{
            if(!resetButton.classList.contains("hidden")){
                return;
            }

            let rdNum=Math.floor(Math.random()*d_li.length)
            if(i === rdNum){
                gameClear(i);//あたり
            }else{
                gameOver(i);//はずれ
            }

            resetButton.classList.remove("hidden");
        });
    }

    resetButton.addEventListener("click",()=>{
        init();
    });

    function init(){ //初期化
        for(let i=0;i<d_li.length;i++){
            d_li[i].textContent="?";
        }
        resetButton.classList.add("hidden");
        result.textContent="";
    }

    function gameClear(i){ //ゲームクリア
        d_li[i%2].textContent="あたり";
        d_li[(i+1)%2].textContent="JOKER";
        result.textContent="あたり！"
    }

    function gameOver(i){ //ゲームオーバ―
        d_li[i%2].textContent="JOKER";
        d_li[(i+1)%2].textContent="あたり";
        result.textContent="ざんねん！"
    }

}

以上がソースコードになります。
もしなにかあればコメントをください。できる限り対応します。

終わりに

以上で「ラストババ抜き」の制作は終了です。
時間はかかりましたが、やっとオリジナルで作れたので、嬉しいです。

知識を入れていく際なのですが、ドットインストールでは手を動かしながらできるので、効率よく勉強できると思います。
個人的に、CSSの学習は大変でした。次々に新しいことが出てくるので驚きの連続です。

今後も、HTML、CSS、JavaScriptを使ってオリジナルのものを作っていく予定なので、よろしくお願いします。

ここまで読んでいただき、ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-30T15:42:50+09:00

IOSでいい感じにサイドメニューをスムーズスクロールさせる。

IOSでサイドメニューを開くとスクロールがなんかスムーズじゃない

こういうメニュー、全然スムーズに動いてくれない。
カクカク動く感じ。

image.png

これでスムーズになる。

css style
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;

参考

iOS Safari でスムーススクロールにするやつ
https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-overflow-scrolling
スクロールチェインを制御するやつ
https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-30T13:53:59+09:00

[Chrome] フリップボードでfilterを使うと1度目の裏面の表示が遅くなる

CSSでフリップボードを作成した際に発見したので、記事にしておきます。

確認できたChromeのバージョン: 76.0.3809.100
※FireFox, Safariでは確認できませんでした。

Chromeで以下HTMLのback, frontに対してfilterを使うと、flipBoardを

transform: rotateY(180deg);

で回転させた際に、1度目の回転中、裏面は表示されず回転が終わってからの表示になります。
drop-shadow以外でもバグります。

flipBoard.html
<div id="flipBoard">
  <div id="back">
    <img src="back.png">
  </div>
  <div id="front">
    <img src="front.png">
  </div>
</div>
style.css
div#flipBoard {
  width: 100px;
  height: 100px;
  position: relative;
  transition: all 1s;
  transform-style: preserve-3d;
}

div#back {
  transform: rotateY(180deg);
}

div#back, div#front {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  filter: drop-shadow(0px -5px 8px rgba(0, 0, 0, 0.4)); /* <= バグの原因 */
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-30T11:43:27+09:00

【Adobe Photoshop CC】ドロップシャドウの詳細を確認する方法とそれをtext-shadowで表現する方法

はじめに

わたしは新米コーダーなのですが、デザイン関連のツール使いこなせないので、今日学んだことを忘れないように書いておきます。

フォトショのバージョン

Adobe Photoshop CC 2019

①ドロップシャドウの詳細を見る

画面右側にあるレイヤーの領域から該当のレイヤーを選んで、いっちゃん下のfxを選択。
image.png

ポップアップが出るので、ドロップシャドウを選択。
image.png

ドロップシャドウの距離や不当明度が分かる。
image.png

描画モードのプルダウンの横のカラーをクリックするとカラーの詳細が見れる。
image.png

②text-shadowで表現

角度135°でサイズ8だからイメージこんな感じ？
image.png

右に4、下に4、ぼかしが0、でどうかなーと思ったら影が離れすぎて違和感。

text-shadow: 4px 4px 0 rgba(04, 00, 00, 0.4);

これでいい感じでした。

text-shadow: 1px 1px 3px rgba(04, 00, 00, 0.4);

終わりに

以上、ペーペーの実験結果でした。
実際の表示載せてなくてすみませんがご容赦ください。

参考

Photoshopで画像に影をつける2つの方法【初心者向け】
css – テキスト影の不透明度
Photoshopのドロップシャドウの使い方をマスターするチュートリアル

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧