カテゴリーアーカイブ CSS

村上 著者:村上

【CSS】画像を正方形にトリミングする方法

以前にもエリアを正方形に描画する方法について紹介しましたが、今回は画像を正方形にトリミングする方法について。
レスポンシブ対応なので、横幅はパーセントで指定できます。

なお、前回の記事はこちらから。

【CSS】パーセントで指定した横幅に応じた正方形のエリアを描画する

Div 要素を正方形にしたい場合はこちらの方法で問題なく実装できます。

 

今回参考にさせていただいた記事はこちら。

レスポンシブ対応 画像を正方形にトリミングするCSS « グリニッジ株式会社
https://www.greenwich.co.jp/blog-archives/p/7086

HTML のコードはこちら。

<div class="thumbs">
  <img src="[画像のパス]" />
</div>

CSS はこちら。

.thumbs {
  width: 100%;
  max-width: 150px;
  position: relative;
}
.thumbs::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.thumbs img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}

なお、サンプルコードから a タグを削除しているので、それに合わせて CSS を一部修正してあります。
コードは以上です!

前回ご紹介した正方形の描画方法では、画像を追加したときにデザインが崩れたので、画像を表示させたい場合はこちらの方法をご利用ください。

 

以上、画像を正方形にトリミングする方法でした。
是非ご活用ください。

  • この記事いいね! (1)
asaba 著者:asaba

【CSS】CSSMiniferでCSSを圧縮してアプリの負荷を軽減してみる

一つのファイルにCSSを大量に書くと、当然そのページは読み込みが遅くなり、UIとかも不安定な状態で表示されます。

自分の今修正しているアプリも、漏れなくその多量のCSSの影響を受けております。今更外部ファイルに書くわけにはいかないし

どうしましょうかと模索していた時にこのCSSMiniferを見つけました。

CSSMiniferって何ですかというと、CSSを圧縮して数行にまとめてくれる便利ツールです。CSSを圧縮することで、ページの読み込み

速度を改善させることができます。数百行にわたるCSSでも、このツールにかかれば5~6行で完結させることができます。

使い方はシンプルで、圧縮したいコードを左側のテキスト欄にコピペした後にminifyをするボタンを押すだけ。こんな感じに

仕上がります。(といっても詰め込みすぎて一見すると何書いてあるかわからない。)

 

後はこれをファイルにコピペするだけ。他にも色々なCSSコンプレッサーがありますが、CSSMinifyが一番ごちゃごちゃしていなくて

使いやすかったです。

というか他のツールだと微妙に記述が改変されていたりする(ダブルクォーテーションが消されていたりする)ので、最初からこいつ選んでおけばよかったんじゃないか・・・?と思いました。

webアプリの速度改善の場合大抵はJQueryやスクリプト読み込みの順番を修正するのが王道なのですが、CSSをたくさん書いた場合は

こっちに目を付けてみるのも正解ですね。正しく使えばアプリのリファクタリングに貢献してくれるのではと思います。

 

  • この記事いいね! (0)
asaba 著者:asaba

【react-CSS】keyframesを使ったスライド動作

ページの読み込みの際にスライドしたら体感速度ってどのくらい減るだろうと思い試しにreactでkeyframesを使ったページスライド

機能を作ってみました。なぜ作ったかというと、某ブログとかをスマホで見ていてボタンを押した後何も起こらない間が数秒続くときがあ

り、開発者としてどうしてもそこの動作が見逃せなかったのがきっかけです。もしうまいこと動作出来たら今開発しているアプリにも

導入して少しでも速度改善のピースとして役に立てたいと思っています。

keyframesとは、特定のページがアニメーション開始から終了するまでの動作を細かく指定できるCSSプロパティです。このプロパティは

まず始まりを0%、終わりを100%で定義し、その間の%ならば自在に動きをつけることができます。

通常のstyle定義のcssでは手が届かないようなところの処理もこのプロパティでこと細かく設定できるので、滑らかなwebアプリを作りたい

と思ったらこれからはこいつに頼ればいいんですね!

reactのパッケージであるCSSTransationでも細かい動作が期待できますが、こっちはよりreact色が強い書き方をしてるのでどっちを選ぶか

は経験とお好みで決めることになりそうです。

javascript↓


import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route, Redirect, Link, NavLink, withRouter} from 'react-router-dom'
import ReactDOM from 'react-dom'

class Login extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);

this.state = {
//何か書く
}
}

handleClick(e) {
e.preventDefault();
try {
this.props.history.push({
pathname: "/Signup",
})
} catch (err) {
}
}

render() {
return (
<div>
<div>
<button onClick={this.handleClick}>新規登録</button>
</div>
</div>
);
}
}

export default Login;

css↓


@keyframes SignUp {
0% {
opacity: 0;/* 透明 */
transform: translateX(1500px);/* X軸方向に1500px */最大限
}
100% {
opacity: 30;/* 不透明 */
transform: translateX(0);
}
}

.SignUp {
animation-duration: 0.5s;/* アニメーション時間 */
animation-name: SignUp;/* アニメーション名 */
animation-iteration-count: 1;/* アニメーションを一回だけ動かす

reactで実現させたいのでこんな感じに書いてみました。keyframesの後ろに名前SignUp(なんでもいい)を定義して、そのすぐ下で

今定義したSignUpに関するアニメーションを設定しています。コードの整理が少しめんどくさいですが、keyframesと組み合わせることで

簡単に独自のアニメーションを作ることができます。

今は別々のファイルですが、同じファイル内に書くにはどうしたらいいんだろうと模索中です。(cssは可読性を重視したいため)

今回は簡単なシンプルなサンプルを作っただけでしたが、こだわり次第でいくらでも発展させられるのでこれからも注目していきたい

と思います。

 

 

  • この記事いいね! (0)
村上 著者:村上

【CSS】パーセントで指定した横幅に応じた正方形のエリアを描画する

今日、後輩の作業のお手伝いをしているときに見つけた方法です。
個人的にはかなり驚きというか、こんなことできるの!?という指定方法だったので、備忘録としてまとめ。
というか、今後絶対使うときが来る気がする。

参考にさせていただいたサイトはこちらから。

横幅にあわせて正方形のエリアを作って画像を当てはめたいときの簡単なCSS – NaLabo Blog
https://www.nalabo.net/blog/2017/05/04/1009

 

実装方法ですが、まず HTML を下記のように記述します。

<div class="frame">
    <div class="content">
        <!-- 表示したい要素 -->
    </div>
</div>

で、CSS は下記のように指定します。

.content {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

上記のように記述すると、content クラスの要素が、横幅 100% の正方形で描画されます。
ポイントは、height: 0;padding-bottom: 100%; です。
パーセント指定なので、親要素のサイズが変わっても対応できます。

正直、こんな方法があるのか…とかなり驚きでした。
なお、width: 80%; にするときは、padding-bottom: 80%; としておくと、これでも正方形になります。

 

以上、パーセントで指定された要素の横幅に応じた正方形を描画する方法でした。
かなり便利だったので、同じことでお困りの方は是非ご参考にしていただければと思います。

  • この記事いいね! (0)
村上 著者:村上

【CSS】Android、iOSでリンクをタップしたときのハイライトを無効にする方法

上司に教えてもらった方法なので、忘れないように、参考リンクもあわせてまとめ。
Android や iOS でページのリンクをタップした際に表示される、グレーのハイライトを無効にする方法です。
私の場合、react-tabs をアプリに導入したところ、iOS でページ遷移時に画面のほぼ全面が一瞬グレーがかったようになり、非常に見辛い状況でした。
それの対処法として、タブパネルにかかっていたリンクのハイライトを無効にしました。

教えてもらったリンクがこちら。

iOS や Android でリンクをタップした時に灰色の背景色が付くのをなくす CSS – Corredor
http://neos21.hatenablog.com/entry/2017/10/18/080000

 

実装方法ですが、まったく複雑なことはなく、ハイライト無効にしたい項目に下記のプロパティを追加するだけです。

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

上記を追加すると、原則全てのテキストリンクのハイライトが無効になります。

なお、iOS のみの機能ですが、ハイライトの色や透明度を指定することができるようです。
Android は無効化することしかできません。

a {
  /* 透明度50%の緑 */
  -webkit-tap-highlight-color: rgba(0, 255, 0, 0.5);
  /* 紫色 */
  -webkit-tap-highlight-color: #ff00ff;
}

指定するときは、上記のように指定します。

 

以上、リンクをタップしたときのハイライトを無効にする方法でした。
ただ、ハイライトがないと、リンクを押せたかどうかがわからないため、個人的にはあったほうがいいのでは…とも思います。
実際に使用してみて、導入するかを決めることをお勧めします。
私のように、変な場所にハイライトがかかっており、使っている時にストレスを感じる!使用感が悪い!という時には非常に有効だと思います。

  • この記事いいね! (0)
村上 著者:村上

【CSS】「word-break」を使った文字列の改行ができない時の対処法

ちょこっとだけハマったので備忘録としてまとめ。
word-break プロパティを使った文字列の改行ができなかった時の確認事項です。

今回参考にさせていただいた記事はこちら。

CSS tips – 文字列を確実に改行させる方法|phiary
http://phiary.me/css-tips-certainly-line-break/

 

まず、基本的には下記を指定します。

p {
    word-break: break-all;
}

break-all という値の場合、英単語の途中だろうが問答無用で改行されます。
それが嫌な場合は、normal もしくは keep-all を指定してください。

また、white-space プロパティに nowrap が指定されている場合、改行されなくなるとのことですので、下記のように指定します。
p {
word-break: break-all;
white-space: normal;
}
[/css]
ちなみに、white-space: nowrap; とは、文字列内のホワイトスペースを無視し、改行を1つの半角スペースとして表示します。
また、ボックスサイズが指定されている場合にも自動改行しないため、こちらを無効にする必要があります。

あとは、width が効かない inline 要素では、word-break による改行が行われないので、デザインに影響がなければ、display:block; を指定しましょう。

ちなみに、私の環境で文字列の改行が行われなかったのも、こちらが問題でした。
width が定義されておらず、横幅が想定以上に伸びてしまい、表示されない変な位置で改行をしていたようです。
そのため、width: 100%; を指定したところ、理想通りの表示になりました。

 

以上、word-break を使った文字列の改行ができなかった時の対処法でした。
正しくは、要素のサイズが正しくなかったのが原因ですが…とりあえず、レイアウトは調整できました。

  • この記事いいね! (0)
村上 著者:村上

【CSS】iOSでiframe要素が縦に伸びてしまうときの対処法

本日遭遇した現象で、iPhone で見たときに、iframe 要素が縦にびよーんと伸びてしまい、スクロールできませんでした。
ちなみに、Android では問題ありませんでした。
…この端末に依存するタイプの CSS のずれが本当に苦手…。

 

さて、こちらの対処法については、下記の Qiita の記事を参考にさせていただきました。

スマホサイトなどでiframe要素をスクロールさせる方法 – Qiita
https://qiita.com/ta__ho/items/904290fa0c8c60b25af1

まず、HTML要素は下記のようになっているものとします。


<div id='content'>
    <iframe src='[表示したいURL]' />
</div>

で、この時、CSS は下記の指定をしていました。

#content {
    width: 100%;
    height: 100%;
}
#content iframe {
    width: 100%;
    height: 100%;
}

Android であれば、上記のコードで問題ないのですが、iOS だと iframe 内の縦長のページが下に伸びてはみ出してしまい、スクロールすらできない状態でした。
そのため、#content に下記を追加します。

#content {
    width: 100%;
    height: 100%;
    /* 下記を追加 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

iframe には追加するプロパティはありません。
ここ重要なのは、overflow プロパティです。
overflow の初期値は visible で、要素に収まらない分ははみ出して表示するので、当然といえば当然ですね。
逆に、変更前のコードで動いてしまう Android が凄い…。
なお、横に伸びてしまう場合は、overflow-x プロパティを使用してください。

-webkit-overflow-scrolling プロパティでは慣性スクロールを有効にしています。
これを追加することで、滑らかなスクロールが実現できます。
これがないと、スクロール途中で突っかかって、スムーズにスクロールできず、かなりストレスになる場合があるので、iOS で利用される場合には、追加することをおすすめします。

 

以上、iOS で iframa 要素が縦に伸びてしまい、スクロールできない時の対処法でした。
どなたかの参考になれば幸いです。

  • この記事いいね! (1)
村上 著者:村上

【JavaScript】scrollTopが効かない時の対処法

先日遭遇したJavaScriptでの現象について。
タイトルにある通り、scrollTop プロパティに値を指定しても、その位置にスクロールしない現象が発生しました。
何故か scrollTop から返ってくる値が常に 0 になっており、それが原因のようです。

 

で、こちらの問題の解決にあたって、下記の記事が参考になりました。

document.body.scrollTopが常に0を返す謎を調べてみた – Qiita
https://qiita.com/tkengo/items/ee758c75ba874757b7fd

この記事によると、原因は scrollTop プロパティでスクロール位置を取得したい要素に下記の CSS を指定するとのことでした。

#sample {
    overflow-y: auto;
    width : 300px;
    height: 200px;
}

widthheight の値は任意です。
現状にあった値に適宜変更してください。

上記を指定することで、id='sample' の要素がスクロール可能な範囲となり、無事 scrollTop の値を取得することができるようになりました。

なお、HTML と JavaScript のサンプルコードは下記のとおりです。
JavaScript はボタン押下時など、任意のタイミングで実行してください。

<body>
    <div id='sample'>
        <!-- 要素の中身を記入 -->
    </div>
</body>
var element = document.getElementById('sample');
var scroll-top = element.scrollTop;

 

以上、JavaScript の scrollTop が効かない時の対処法でした。
JavaScript というよりも、CSS の修正でしたが、ご参考になれば幸いです。

  • この記事いいね! (0)
村上 著者:村上

【CSS】背景色の指定を解除する方法

何回か調べたので、今後も必要かもしれないと思い、備忘録としてまとめ。
CSS で 背景色を無効化する方法についてです。

 

と言っても、特に難しいことはなく、下記のように background-color プロパティに transparent を指定するだけです。

background-color: transparent;

なお、この値は background-color の初期値です。

こちらの指定方法は、teble の th に背景色を #FFF で指定したところ、別で指定していた罫線が消えてしまい、その対策のためです。
ちなみに、ブラウザは IE でした。
Google Chrome だと、罫線が消えることはなかったので、IE のみの挙動のようです。

 

以上、CSS で背景色の指定を解除する方法でした。
背景色の指定方法はよく使いますが、無効にすることは滅多にしないので、transparent という値については知りませんでした。
無効だから、と、うっかり none とか指定しそうです。
十分に気を付けます。

  • この記事いいね! (0)
著者:杉浦

scssの変数、制御構文とhsl表記色

Sass: Syntactically Awesome Style Sheets
 scssはCSSのメタ言語Sassの記法一つです。どのあたりが上位言語かというと、CSSをより便利に記述できるような記法と組み込み関数を増やして、scssファイルをコンパイルすることでcssファイルを作成するあたりが、上位言語です。
 CSSは元から大して変数、制御構文などがなくとも十分使えるものでscssならではのコードはなかなか思いつきません(色を変数化してパレット風にするのは便利なくらい)。この記事ではhsl表記の色と組み合わせることによってscssならではのコードを紹介します。

 上のJSFiddleのCSSを構成しているscssコードが次です。16行目からが特にscssです。変数としての色$baseの色相を組み込み関数adjust-hue()でイテレータに合わせて動かし、イテレータの番号を名前に含むクラス名のdivの高さを変更しています。10行少々のコードで生のCSSでは長大になりそうな離散的グラデーションを実現できました。また、変数$base, $diffの変更だけで色相の起点、刻み幅を変更可能で多少のデザイン変更ならすぐに対応できます。

.flex-row {
  display: flex;
  height: 8em;
  width: 30em;
}

.col-box {
  display: flex;
  flex-direction: column;
}

.box {
  width: 2.25em;
  border: solid darken(#fff, 20%);
}

$base: hsl(0, 100%, 50%);
$diff: 30;
@for $i from 1 through 7 {
  .box-l-#{$i} {
    @extend .box;
    background: adjust-hue($base, ($i - 1) * $diff);
    height: #{$i}em;
  }
  .box-r-#{$i} {
    @extend .box;
    background: adjust-hue($base, -($i - 1) * $diff);
    height: calc(100% - #{$i}em);
  }
}
  • この記事いいね! (0)