What's New Qiita

20200818のCSSに関する記事は6件です。

  • 投稿日：2020-08-18T23:43:04+09:00

【初心者でもわかる】スマホの画像は、倍のサイズじゃないとボケる。

どうも7noteです。レスポンシブサイトを作成する時の画像サイズに注意！

レスポンシブのサイトを作成する時、
スマートフォンで表示される際は200pxの画像は400pxの画像を用意しなければならない！

倍のサイズの画像を用意する理由

スマートフォンの表示画角はpxでいうと、横幅が約320px～420pxくらいのものが一般的です。

機種 大きさ（横幅）
iphone5,SE 320px
Galaxy S5 360px
iphone6,7,8,X 375px
iphone8+ 414px

つまり、iphone8+に幅いっぱいの画像を表示させようと思うと、画像は828px以上の画像を用意するべきです。

なぜ倍ものサイズがいるのか。それは
スマートフォンはRetinaディスプレイだからです。

つまり、
Retinaディスプレイでは高画質に見せるため、2倍のpx数を扱うことができるようになっている

スマートフォンに対応させるためにはこのRetinaディスプレイに対応させないといけないということになります。なので本来は300pxあれば済む画像でも、綺麗にキメ細やかに再現させるために倍の600pxの画像が必要になります。

デザイン会社からデータなどをもらうと、スマホサイズのデータが倍の750～850pxくらいで作られているのを見ることができます。

CSSの書き方

スマートフォン側

スマホ側はpxで指定してしまうと、違うデバイスで見たときにはみ出るなどのイレギュラーが出てしまうので、%で指定することが一般的だと思います。

img {
  width: 100%;
}

これで、読み込む画像のサイズを倍のサイズで作成しておけば、自動的に倍サイズの画像を幅いっぱいに綺麗に見せることができます。

パソコン側

逆にパソコン側の方が画像サイズが少し小さい場合が多いです。そのため、スマホ用に書き出した画像と画角（縦横比）が同じであれば、本来の画像サイズより少し小さいpxを指定して配置します。

img {
  width: 550px; /*画像はもともと828pxの大きさがある*/
}

この時に注意していただきたいのは、

元の画像サイズよりおおきい数字を指定してはいけない事。

画像よりおおきいサイズをCSSで指定してしまうと、無理やり引き伸ばした画像になってしまいます。
画像がぼやけてしまう原因になるのでやらないように注意してください！

まとめ

画像の書き出しはWEBサイトを制作する上で必須スキルになります。
1枚の画像を上手く使いまわすことで、余計な画像の読み込みが不要になりますし、修正・管理も行いやすくなります。

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

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

Traditional WebのWidgetに動的にクラスを適用する

Version 11環境のTraditional Webでの実現方法を検討。

確認環境

Personal Environment(Version 11.9.0 (Build 16900))
Service Studio(Version 11.8.4)

以下で示す実装例では、特定の条件を満たすときだけ、以下のクラスを適用してみます。

.Button-on {
    font-weight: bold;
    font-size: 24px;
    background-color: #f00;
}

If Widgetを利用する方法

分岐がシンプルな場合に使うパターンです。

実装方法

If WidgetのConditionに分岐条件を設定し、True側に「あるクラスを設定したWidget」、False側には、「また違うクラスを設定したWidget」を配置しておきます。

式を使わないので、切り替えを行っていることが保守担当者にも比較的わかりやすいので、可能な場合はこの方法が良いと思います。

実装例

If WidgetのConditionにToggleButtonに紐付けたローカル変数を設定。
image.png

Toggle ButtonがONのときに表示するButton (クラス名は、Style Classesプロパティに半角スペース区切りで複数設定できる）
image.png

OFFのときに表示するButton
image.png

実行例（表示するのはIfのTrue/Falseの一方のみ）
image.png

Extended Propertiesを使う方法

クラス名を式で書ける方法です。
柔軟な記述ができますが、式の記述は保守担当者に見落とされがちなので気を付ける必要があります。

実装方法

WidgetのExtended Properties (プロパティエディタの一番下）に記述します。
Widgetがブラウザに表示されるときにはHTMLのタグに変換されますが、そのタグの属性を任意に指定できるプロパティです。

Propertyにclass、Valueに特定の条件式で出力を変更するIf文を記述。
OutSystemsの式としてclass属性に指定する値を書けるため、だいたいどんな条件でも書けます。

実装例

IsOnというBoolean型変数の値がTrueのときに、classに「Button」「Button-on」クラスを付与し、Falseのときに「Button」のみを付与する例。

If(IsOn, "Button Button-on", "Button")

image.png

実行例（HTMLタグ）
image.png

JavaScriptを利用する方法

好きなロジックを書けますが、Low-Codeらしさが活かせないのと、保守担当者にJavaScriptの知識も要求してしまうので避けたい方法。
Traditional Webであれば、jQueryが組み込まれているため、これを使うのが簡単ですね。
image.png

この例では、ButtonのJavaScriptのクリックイベントをExtended Properties「onclick」で拾って、クリックしたButton自身にclassを追加しています。
最後の「return false;」は本来のイベント処理を中止（PreparationやScreen Actionが動かないように）しています。

もし、他のWidgetを操作したいときは、WidgetのIdプロパティでHTML上でのid属性が取得できるのでこれを利用してください（Nameプロパティを設定する必要あり）。

また、Server ActionからJavaScriptを動かしたいときは、RunJavaScript Action (HTTPRequestHandler) が使えます。

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

Yet Another elm-css作った

elm-origamiリリースしました?

elm-origamiってなに

CSS in Elmを実現するためのパッケージです
こんな感じに書けます

import Origami exposing (..)
import Origami.Html exposing (..)
import Origami.Html.Attributes exposing (css)
import Origami.Html.Events exposing (onClick)

view : Model -> Html Msg
view model =
    div
        [ css
            [ property "width" "100vw"
            , property "height" "100vh"
            , property "display" "flex"
            , property "justify-content" "center"
            , property "align-items" "center"
            ]
        ]
        [ button
            [ css
                [ property "display" "flex"
                , property "justify-content" "center"
                , property "align-items" "center"
                , property "position" "relative"
                , property "height" "50px"
                , property "width" "200px"
                , property "outline" "none"
                , property "border-width" "0"
                , property "background-color" "#f58c64"
                , property "color" "white"
                , property "font-size" "20px"
                , property "letter-spacing" "2px"
                , property "cursor" "pointer"
                , property "transition" "all 0.3s cubic-bezier(0.13, 0.99, 0.39, 1.01)"
                , property "box-shadow" "0 3px 5px rgba(0, 0, 0, 0.3)"
                , withPseudoClass "hover" [ property "background-color" "#ef794c" ]
                , case model of
                    Initial ->
                        noStyle

                    Loading ->
                        batch
                            [ property "border-radius" "50px"
                            , property "width" "50px"
                            , -- [Copyright (c) 2019 Epicmax LLC](https://epic-spinners.epicmax.co/)
                              withEach [ pseudoElement [] "after", pseudoElement [] "before" ]
                                [ property "content" <| qt ""
                                , property "position" "absolute"
                                , property "width" "60%"
                                , property "height" "60%"
                                , property "border-radius" "100%"
                                , property "border" "calc(30px / 10) solid transparent"
                                , animation
                                    [ ( ( from, [] ), [ propertyA "transform" "rotate(0deg)" ] )
                                    , ( ( to, [] ), [ propertyA "transform" "rotate(360deg)" ] )
                                    ]
                                , property "animation-duration" "1s"
                                , property "animation-iteration-count" "infinite"
                                ]
                            , withPseudoElement "after" [ property "border-top-color" "#ffe9ef" ]
                            , withPseudoElement "before"
                                [ property "border-bottom-color" "#ffe9ef"
                                , property "animation-direction" "alternate"
                                ]
                            ]

                    Completed ->
                        batch
                            [ property "border-radius" "50px"
                            , property "width" "50px"
                            , withPseudoElement "after"
                                [ property "content" <| qt ""
                                , property "position" "absolute"
                                , property "width" "60%"
                                , property "height" "30%"
                                , property "border-left" "3px solid #fff"
                                , property "border-bottom" "3px solid #fff"
                                , property "transform" "rotate(-45deg)"
                                ]
                            ]
                ]
            ]
            [ if model == Initial then
                span
                    [ css
                        [ animation
                            [ ( ( from, [] ), [ propertyA "opacity" "0" ] )
                            , ( ( to, [] ), [ propertyA "opacity" "1" ] )
                            ]
                        , property "animation-duration" "1s"
                        ]
                    ]
                    [ text "Click Me!" ]

              else
                text ""
            ]
        ]

rtfeldman/elm-cssをフォークしていて使い方はほぼ一緒です

なぜ作ったのか

elm-cssには型のついたプロパティ関数が多く用意されています
しかもCSSの柔軟性を表現するためによくわからない感じの型がついてます

CSSの書き方は結構ひとによって違うと思いますが、それらすべてを表現できるように設計するのは無理があるのではないでしょうか？
CSS in Elm的に使える部分だけでいいんじゃないだろうかと思いました

ということで作りました

なにがうれしいの？

新規性はほぼないです
型のついたプロパティ関数がないことが新規性みたいなもんです

一応Sassとかみたいにセレクターをネストさせていくのをelm-cssより柔軟に書けたりします

作ってみてなにがよかったの？

使う人には関係ない話ですが内部構造がむっちゃきれいになりました
すごい！よくなった！

elm-cssは結構古くて、当初はElmでCSSを書いてそこからcssファイルを生成する感じのライブラリでした
本当のところは知りませんがあんまりElmで書いても嬉しくないねって感じになったみたいです

今はstyled-componentsとかみたいにCSS in Elmな感じのことができるようになっています
同じようなアプローチとしてmdgriffith/elm-uiというパッケージがあってこちらがとてもいいよってreadmeにも書いてあります

そんな感じでelm-cssは内部の改善とかは全然されていません。Elmのversion up対応とPRのmergeだけって感じです

内部の型も昔のCSSを生成していたときの設計にCSS in Elmができるようにする機能を載せていてあんまり整理できていないなという感じです
elm-origamiでは参考にしつつほぼ1から作り直していてすごくきれいになったと思います
使う人には関係のない話ですが

使って欲しいというか

elm-origamiは任意のCSSを適用できますが、elm-uiのようなopinionatedなパッケージのほうがいいと思います
もしなにかしらの方法論でCSSを組んでいるのならそれを表現するパッケージを作って欲しいです。elm-uiみたいな
elm-origamiを作って思いましたがHtml型とは違うalt Html型をexposeするパッケージを作るのは結構できます
やって

おわり

よかったら使ってみてくださいね

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

【PHP】業務で使ってきたPHP関数メモ

最初に

仕事で学習してきた内容を書き出していきます。
基本的には自分自身でわかるような内容になりますので、ご容赦ください。

※「覚えてない」で検索すると未調査の内容が出るよ
※「要勉強」で検索すると/未勉強の内容が出るよ

試験系

str_split

文字列解体やデータ整形に使った
https://www.php.net/manual/ja/function.preg-split.php

↓配列の文字列を１文字ずつ分解して、再度配列に入れ直す手段
hoge.php
// hogeという文字列があるとする
$array = array('hoge')

foreach ($array as $k => $v) {
    // 配列内の文字列を１文字ずつに分解し再格納
    $array = str_split($v);

print_r($array);
exit;
// 0=>h ,1=>o, 2=>g, 3=>e　みたいになるはず
↓配列の文字列の中に、空白などが含まれている場合
hoge.php
// ho ge ho geという文字列があるとする
$array = array('ho ge ho ge')

foreach ($array as $k => $v) {

    // カンマまたは " ", \r, \t, \n , \f などの空白文字で句を分割する。
    $array = preg_split("/[\s,]+/", $v);

print_r($array);
exit;
// 0=>ho, 1=>ge, 2=>ho, 3=>ge　みたいになるはず

$lines = preg_split("/\s/",$value);
// とかで処理したこともあるが、何が違うのか覚えてない

 strcmp

文字列の順番を入れ替えるバブルソートの時に使おうと思ったやつ
https://www.php.net/manual/ja/function.strcmp.php

↓１つ前の文字列を比較して、入れ替えたい処理

⚠️正しくない処理なので注意⚠️
この場合、大なり小なりの判定結果が-1,0,1で返ってくるらしい

hoge.php
// そえぞれの配列にh o g eという文字列があるとする
$array = array('h' , 'o' , 'g' , 'e');

// 初期化
$count = 1;

foreach($array as $k => $v){
    // 1つ隣なので、keyが[1]以降から処理
    if($k >= $count){
        // 文字列の比較判定
        $array = strcmp($array[$k-1] , $v);
        // 1つ後ろの配列と比較 1個前のデータの方が大きかったら
        if($check > 0){
            $tmp = $v;
            print_r($tmp);
            $v = $array[$k-1];
            print_r($v);
            $array[$k-1] = $tmp;
            $i++;
        }
    }
    if($sort_count > 0){
        return ex_bubble_sort($array);
    }
    else{
        return $array;
    }
}

print_r($array);
exit;

// ehgoとかにしたかったんや・・・要勉強

実務系

in_array()

配列に値があるかチェックするやつ
https://www.php.net/manual/ja/function.in-array.php

throw new HttpNotFoundException;

http://fuelphp.jp/docs/1.6/general/error.html
404をスローしている

Response::redirect($hoge[$hoge], 'hoge', 301);

http://fuelphp.jp/docs/1.7/classes/response.html
新しいURLにリダイレクトする方法を提供

Uri クラス

http://fuelphp.jp/docs/1.6/classes/uri.html
└URIとURLの違い
　https://webtan.impress.co.jp/e/2010/03/09/7539

hoge.php
Uri::String() // 現在のURIを取得することができる

DELETE

SQLでデリートするときはIDなどをWHEREで絞ろう

jQueryで子要素を取得する方法：children(), find()

https://uxmilk.jp/10873

childNodes
https://www.javadrive.jp/javascript/dom/index4.html

JavaScriptでiframeを操作する方法
https://techacademy.jp/magazine/23192

str_replace('\', '\\', $hoge['hoge']);

フォーム内の文字列に「\」がある状態で、DBにPOSTすると文字化ける
なので、\にさせることで\を表現する処理

関数

public static functionにすると簡単にインスタンス化できるようになる
というより呼び出せる範囲とかが増える感じっぽい

悩んだら

hoge.php
print_r('<pre>');
print_r($provision_list);
print_r('</pre>');

var_dump($変数名など);
exit;

✨整理前の吐き出しだけだよ✨

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

学習用　HTMLとCSSの関係性

学習で学んだ内容のアウトプットとして作成しました。

HHTMLとCSSの関係性

○HTML:ウェブサイトに表示される情報を記載する言語です。〇〇.htmlという名前のファイルに記述します（例：test.html）
○CSS：HTMLに装飾を加えるための言語です。〇〇.cssという名前のファイルに記述します（例：style.css）
○拡張子：拡張子は、ファイルに書かれる言語の種類を識別するためにファイル末尾につける文字列です。例えばhtmlのファイルを作成する場合は〇〇.htmlとなり、CSSの場合は〇〇.cssとなります。このように、言語ごとに拡張子が異なります。

198CAFC6-3B0E-491C-A5F9-33869F6382D7.png

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

ITCSSまとめ

ITCSSは、OOCSSやBEM、SMACSSのようなCSS methodology(方法論)の１つでInverted Triangle CSS(逆三角形CSS)の略称。
提唱したのは、csswizardryのHarry Roberts氏。
ITCSSに関するドキュメントはあまり多くない。
セルビアでITCSSについて紹介している動画がYoutubeにあがってる。そのときのスライドがManaging CSS Projects with ITCSS // Speaker Deck。

ITCSSは、プロジェクトのCSSをより良く管理していくのに、以下のことが必要としていて、

  • A sane environment that is accessible to lots of people.
  • To tame and manage source order and the cascade.
  • To create a place for everything to live (new and old).
  • To reduce waste and redundancy.
  • To end the Specificity Wars.

https://speakerdeck.com/dafed/managing-css-projects-with-itcss

内容としては大体こういうことだと思われる。

  • 多くの人にとって理解しやすい健全な環境
  • 記述順とカスケードを管理すること
  • 新旧問わず全てのルールセットが生きられる場所をつくること
  • 無駄と重複を減らすこと
  • 詳細度の戦いを終わらせること

その上でITCSSは、

Manages source order.
Filters explicitness.
Tames the cascade.
Sanitises inheritance.

https://speakerdeck.com/dafed/managing-css-projects-with-itcss

  • 記述順を管理する
  • 明示性をフィルター？
  • カスケードを飼いならす
  • 継承を安全にする

大体こんな感じの方向性になる。

Specificity Graph

CSSを記述する上で重要になる詳細度。
CSSを詳細度を考えずに書いていけば、そのうち!importantで上書きするなど、既存のルールセットに苦しむことになりやすい。

Specificity GraphはCSSの詳細度と記述場所をグラフ化してくれるツール。
右肩上がりのグラフになることが望ましいとされていて、ジグザグのグラフになれば詳細度の問題が起きやすいということがわかる。

ITCSSの場合、この詳細度順に記述することになるので、右肩上がりのグラフになりやすい。
このグラフを右肩上がりに保ち続けることが、CSSを健全な状態に保っていることの指標になるということ。

レイヤー

ITCSSでは以下のレイヤーに分けてCSSを構成する。

Layer 役割
Settings プリプロセッサで利用するグローバル変数や全体の設定
Tools プリプロセッサで利用するmixinやfunctionなど
Generic normalize.css、reset
Base 要素型セレクタ
Objects 装飾を持たないデザインパターン
Components コンポーネント
Trumps ヘルパー。!importantを利用していい

itcss.png

  • レイヤーが下に行くほど詳細度が徐々に高くなっていく。
  • レイヤーが下に行くほど汎用的ではなく明示的になる。
  • レイヤーが下に行くほど局地的になる。

ITCSSはこのレイヤーを増減してスケールできるとしていて、

Add or remove layers if, as, and when you need to.
Not using a preprocessor? Remove the Settings and Tools layers.
Don’t use OOCSS? Remove the Objects layer.
Need theming? Add a Theme layer.

Booking.com run a lot of A/B tests.
How do we isolate temporary styles?
Create a Test layer (before the Trumps layer).

https://speakerdeck.com/dafed/managing-css-projects-with-itcss

  • OOCSSじゃない
    • Objectsレイヤーを削除すればいい
  • プリプロセッサを使わない
    • ToolsとSettingsを削除すればいい
  • テーマが必要
    • ThemesレイヤーをComponentsレイヤーの下に追加すればいい
  • A/Bテスト用のクラスが必要
    • TestレイヤーをTrumpsレイヤーの上に追加すればいい

としている。

ITCSSの具体例はgithubで探せば数は多くないけど、見つかることは見つかる。

各レイヤーの内容

Settings

プリプロセッサの設定、グローバル変数。
プロジェクト全体で利用するようなものをsettingsレイヤーにまとめる。

$color-primary: #333;
$color-secondary: #666;

Tools

Settingsレイヤーと同じようにプリプロセッサ用のレイヤー。
プリプロセッサ用のmixinやfunctionをこのレイヤーで管理する。

@mixin some-mixin () {
  ...
}

ここまでのレイヤーは、CSSに直接出力されることのないもので記述されてる。

Generic

このレイヤーからプリプロセッサ用ではなくCSS用のレイヤーになる。
reset、normalizeなど。全ての出発点となるスタイルを持つレイヤー。

* {
  box-sizing: border-box;

  &:before,
  &:after {
    box-sizing: border-box;
  }
}

Base

要素型セレクタのルールセットをまとめるレイヤー。

p {
  margin: 0;
}

このレイヤー以降、要素型セレクタは記述しない。

Objects

OOCSSのレイヤー。装飾のスタイルを持たないデザインパターンをこのレイヤーにまとめる。
レイアウト目的のスタイルをこのレイヤーに持たせるのが正しいのかもしれない。
次に来るComponentsレイヤーとの境界線の判断が難しそう。

クラスセレクタはこのレイヤーから使う。明示的なクラス名は避ける。

.o-card {
  display: table;
  table-layout: fixed;
  width: 100%;

  &__head {
     ..
  }
}

Components

装飾のスタイルを持つUIパーツ。
このレイヤーでもクラスセレクタを使う。Objectsレイヤーよりも明示的なクラス名をつける。

.c-button {
  display: block;
  background-color: #333;
  color: #fff;
  ...
}

.c-profile-title {
  display: block;
  background-color: rgba(0, 0, 0, 0.7);
  ...
}

Trumps

ヘルパー、ユーティリティ。
上位レイヤーのスタイルを上書きすることが目的になって、!important;を記述していいレイヤー。
１つのHTML要素だけに影響するルールセットを記述する。

.u-hidden {
  display: hidden !important;
}

ディレクトリ構成

ITCSSでは全てのパーシャルファイルを１つのディレクトリにフラットに配置するのが推奨されているっぽい。

https://github.com/itcss/itcss-netmag/tree/master/css

各パーシャルファイルの先頭に、属するレイヤー名をつける形をとる。
これをレイヤー順にimportすることで、ITCSSの方法論に従ったCSSということになる。

@import "settings.global";
...

@import "tools.mixins";
...

@import "generic.normalize";
@import "generic.reset";
...

@import "base.body";
@import "base.list";
@import "base.headings";
...

@import "objects.wrapper";
@import "objects.sidebar";
@import "objects.header";
@import "objects.footer";
...

@import "components.badge";
@import "components.button";
@import "components.carousel";
@import "components.thumbnail";
...

@import "trumps.width";
@import "trumps.display";
...

Links

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

日付別

タグ一覧