カテゴリーアーカイブ CSS

著者:杉浦

flexbox学習用のフリーゲームの紹介

　CSSのflexboxは便利ですがプロパティはあまりに多彩であり、覚えきるのは手間です。また、flexboxの理解が程ほどでも力業で望んだデザインに近いものを作ることは可能です。flexboxの内容は覚えずに適宜調べることが解決法のひとつですが、その場合flexboxでは何ができるかを知っておくことが重要です。ここで紹介するflexbox学習ゲームはflexboxの各プロパティを用いて工夫することを強いてくれます。学習ゲームを通すことでflexboxのできることを一通り知ることができます。
　Flexbox Froggy – CSS flexbox学習ゲーム
　Flexbox Defense
　Flexbox Froggyはflexboxに従って動く蛙を同じ色の蓮の葉に配置するゲーム、Flexbox Defenseはflexboxに従って配置されるタワーを用いたタワーディフェンスゲームです。どちらも高難易度になってくるとプロパティの豊富な組み合わせが必要になりなかなか一筋縄ではいきません。

著者:杉浦

GUIによるCSS作成webサービスLayoutIt!の紹介

　CSSはウェブページのスタイルを指定するための言語です。スタイルを指定ということもありCSSとグラフィカルな画面は密接に関係しています。CSSを作るときは画面とCSSを行き来することが増えがちです。自分はブラウザの開発者ツールで仮のコーディングを行い出来上がったものをファイルへコピペする、というやり方で多少軽減していますがそれでも面倒です。
　LayoutIt! – Interface Builder for CSS Grid and Bootstrapは画面を作り、画面に沿ったCSSやHTMLのコードを出力してくれます。
　LayoutIt!はBootstrapのひな型構築とGridのひな型構築の二つの機能を持っています。Bootstrapはデザインテンプレートであり、classにBootstrapの用意した名を割り当てることで様々なデザイン、機能を実現します。下画像はLayoutIt!のBootstrap Builderの使用画面です。
　
　左のサイドバーから右にパーツをドラッグして様々なレイアウトを作成できます。当然、既に配置したパーツもドラッグで再配置できます。納得いくレイアウトが出来上がったら赤丸のダウンロードからHTMLコードをダウンロード。残りの作業は手元で細かい部分を肉付けすることだけです。
　Gridはその名の通り格子状のデザインのことです。LayoutIt!のCSS Grid GeneratorではBootstrap Builder同様に画面上でGridを作り、そのコードをダウンロードできます。下画像はCSS Grid Generatorの使用画面です。

　例によって左のサイドバーと表のドラッグで画面をコントロールします。異なるのはGridをクリックした際の動作です。GridのAreaに名前をつけ、その中にまたGridを作ることが出来ます。完成したら赤丸のget the codeからコードをダウンロード。Gridの中身の肉付けは手元の作業です。

著者:村上

【CSS】要素内のテキストの改行や空白を操作するプロパティ「white-space」

久しぶりに感じるCSSについての記事です。
今回紹介するのは、テキストの改行や空白を操作できる「white-space」というプロパティについて。
新しく使用したプラグインのせいか、テキストが改行されなくなったので、その対処法です。

まず、プロパティの値と、その説明については下記をご覧ください。
なお、参考にさせていただいたサイトはこちらから。

white-spaceとは｜コーディングのプロが作るCSS辞典
https://html-coding.co.jp/annex/dictionary/css/white-space/

以前は normal のままだったのですが、プラグインの影響なのか、改行コードが無効になっていたため、pre-wrap に変更しました。
すると、問題なく改行されました。
改行やスペースをそのまま表示するのなら、pre でもいいのですが、これだと文字の折り返しが行われないため、pre-wrap がおすすめです。

以上、改行コードが向こうになってしまった場合の対処法でした。
皆様も、もし何らかのライブラリやプラグインの影響で、テキストが改行されなくなったり、スペースがおかしいと思った時は、こちらのプロパティを調整してみてください。

ちなみに、使用したプラグインは「react-string-replace」です。
リッチテキストを使用するために導入しました。

著者:村上

【CSS】「text-decoration:none;」が効かない時の対処法

今日、会社の後輩に「text-decoration:none; が効かないんです…！」と助けを求められたので、その対処法を主に自分用にまとめました。
なお、修正前のコードは下記のとおりです。

<div id="main">
    <a href="[リンク先]">
        <font class="text">リンク先の名称</font>
    </a>
</div>

.text {
    display: teble-cell;
    text-decoration: none;
}

細部に違いがあるかもしれませんが…大体このような感じでした。
で、リンクの下線を消したいけれど、textクラスに指定した「text-decoration: none;」が効いていないとのこと。

では、さくっと解決策ですが、まず参考にしたサイトはこちら。

Google Chromeでtext-decorationのnoneが効かない件。|Webディレクションやって ます blog
https://web-directions.com/director/diary/googlechrome_textdecaration_underline.html

上記のサイトによると、
1. 下方向のパディング(padding-bottom)を1px以上取る
2. displayプロパティをblockまたはinline-blockにする
3. 10.5px以上のサイズにする。(10pxよりも大きなサイズでレンダリングされる指定を行う)
上記の方法で解決できるとのことでした。
が、試してみたのですが、1 は効果なし、2 に関してはレイアウトが崩れてしまうのでNGでした。

どうしたものか…。
…と思っていたのですが、そもそも、aタグのリンクの下線を消したいんだから、aタグに対して「text-decoration: none;」を指定すればよいのでは？
と、いうことで試してみたところ、予感的中！
無事、下線を消すことができました！

変更後のコードはこちら。

<div id="main">
    <a href="[リンク先]">
        <font class="text">リンク先の名称</font>
    </a>
</div>

.text {
    display: teble-cell;
}
#main a {
    text-decoration: none;
}

これで解決です。

一度思い込んでしまうと、なかなか違う方法に気付けなかったりするので、後輩にとっては盲点だったんでしょうね。

著者:村上

【CSS】CSSで計算式を扱うためのcalc()関数が使えない時の対処法

以前に紹介した、CSSで計算式を使うための関数「calc」について、指定したはずなのに何故かブラウザに反映されない！という現象に遭遇したので、それの回避方法についてです。

なお、前回のcalc()についてまとめた記事はこちらから。

【CSS】スタイルシート内で計算式が使えるcalc()が便利
https://cpoint-lab.co.jp/article/201801/【css】スタイルシート内で計算式が使えるcalcが便利

で、本題ですが、その時指定したCSSがこちら。

div {
    width: calc(50vw-20px);
}

ちなみに、値には特に意味はありません。
一見、何の問題もないように思えますが、このCSSを指定しても横幅は変化しませんでした。

問題は、なんと半角スペース。
なんでも、計算式で使われている + や – などの符号の前後に、半角でスペースを空けないと構文エラーになるとのことでした。

なお、今回参考にしたサイトはこちら。

css3-CSS calc() not working-Stack Overflow
https://stackoverflow.com/questions/14967421/css-calc-not-working

同じように、calc()が動かない、という質問に対しての解決策がまとめられています。
やはり、同じように間違ってしまう人がいるようですね。

と、いうことで、先程のCSSを下記のように修正すれば、万事解決です。

div {
    width: calc(50vw - 20px);
}

以上、calc()が使えない時の対処法でした。
まさかスペースが関係しているとは思わず…少し悩んでしまいました。
皆様も、CSS で calc() を使うときはお気を付けください。