カテゴリーアーカイブ CSS

著者:杉浦

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

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

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

様々なHTMLショートコードを公開しているdCodesの紹介

dCodes is a comprehensive HTML framework with over 1500+ template shortcodes.
Build next generation, feature rich websites rapidly! Just copy ‘n’ paste hosted codes!

引用元:Template Shortcodes – dCodes Framework v2
 dCodesは様々なテンプレートショートコードを含むHTMLフレームワークです。Template Shortcodes – dCodes Framework v2には1500以上のコード例が載っており、これらの例をコピペしていい感じに配置するだけで、豊富な機能を持ったwebページを簡単に早く作れます。

 上の画像はショートコードが載っているページの一つです。赤丸の部分からコードを持ってきてコピペでページに用いるパーツを増やします。CSS、JS部は主にCDNを用います。このCDNは月間トラフィック1000万まで無料で使えます。個人で使う分にはよっぽどな使い方をしない限り無料枠に収まるでしょう。dCodesは単にデザインや機能の参考としても十分有用です。

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

Vue.jsの単一ファイルコンポーネント

 Vueはwebページを部分部分に分け、管理することができるJavaScriptフレームワークです。Vueはコンポーネントという単位で、下の画像の四角に当てはまる部分それぞれのHTML、JS、CSSを管理します。小さな四角を集めて大きな四角を作る形です。この手法は関数を小さく分割し、繋げて、積み重ねる、という手法に似ており私は大変好みです。

 単一ファイルコンポーネントはこのコンポーネントを一ファイル一コンポーネントで扱う仕組みです。大本のbodyからtemplateがtemplateを呼び、大きなwebページを管理しやすく作ります。具体的な1コンポーネントコードは例えば次の画像です。

 template内にHTML、script内にJS、style内にCSSときれいにわかれて一つのパーツを作れます。この分割によって改良されたことがシンタックスハイライト、文字の色分けです。HTML中にJS、CSSを直書きしようとした場合、3言語の文法が入り乱れて実に読みにくいです。ここからここまでJS、ここからここまでCSS、という区分で背景色を色分けするエディタはありましたが、余分に色を使う、短文が入ると斑模様になって結局分かりにくい、ということになりました。また、細かい単位、パーツ単位での単体テストが容易になりました。Vueは管理しやすく、記述しやすい便利なフレームワークです。

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

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の中身の肉付けは手元の作業です。

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

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

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

 

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

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

プロパティの値 説明
normal(初期値) テキスト内の連続する半角スペース、タブ、改行を一つの半角スペースにまとめ、自動的に折り返しをして表示
nowrap テキスト内の連続する半角スペース、タブ、改行を一つの半角スペースにまとめて表示。なお自動的な折り返しは行わない
pre テキスト内の連続する半角スペース、タブ、改行をそのまま表示。なお自動的な折り返しは行わない
pre-wrap テキスト内の連続する半角スペース、タブ、改行をそのまま表示し、それに加えて自動的な折り返しも行う
pre-line ソース中の連続する半角スペース、タブを一つの半角スペースにまとめて表示する。しかし、改行している箇所は改行して表示し、それに加えて自動的な折り返しも行う

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

 

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

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

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

多くのcdnリンクを持つcdnjsの紹介

 cdn(contents download link)はjs,cssのライブラリを簡単に読み込む手法です。オープンソース配信サービス、Google Hosted Librariesの紹介で紹介したGoogle Hosted Librariesの様にcdnは多くの場所で配信されています。cdnjsはそのようなcdnの配信リンクをまとめて検索できるサイトです。
 下の画像の様に検索してリンクをコピーするだけでとりあえず使えます。特定のフォーマットで単一のデータを返してくれるAPIも備わっています。
 

 また、cdnjs上でリンクがコピーされた回数をランキングしています。人気が高く、汎用性の高いライブラリが上位に連なっています。jqueryは格別ですね。

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

mapboxのポップアップについて

今回は、mapbox上でピンをタッチすると、画像がポップアップとして出てくるコードを紹介します。

 

ポップアップを付けるときに、画像を撮影した場所にピンを付与して、それをクリックすると

画像がポップアップとして出てくる機能を追加する作業をしていたので備忘録として載せておきます。

 

ざっくりですが説明します。

ポップアップを表示するメソッドを作ったあとに


var el = document.createElement('div');

でピンのオブジェクトを生成します。

 

その後に

 
popup = new mapboxgl.Popup({offset: [16, 0]})

で、ポップアップオブジェクトを生成して使用可能にします。

 

次に、画像をポップアップとして扱うコードなのですが

.setHTMLメソッドを使って表示します。

本来は、htmlの文字列を表示する役割ですが、ここでは

 

 
src = '+image+'

引数のimageを取って中の画像のurlを渡すことができます。

 

ピンが複数立っている時は、そのピンをクリックするときに引数に画像のurlを持たせて

そのurlに合わせて表示するポップアップを変えていると考えるとわかりやすいかもしれません。

 

後は

setLngLat([lmg,lat])

 

 

で、引数のlatとlngを渡せば撮影した場所にピンが立ちま

す。

以上ですが、ここでは肝だけ説明させていただきました。

 

mapboxは柔軟性が高く、細かい箇所まで地図をカスタマイズできるので

慣れてきたらシムシティ感覚で楽しくなってくると思います!

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

CSSの適用優先度

 CSSはHTMLに装飾を付ける仕組みで、主にその詳細度から適用の優先順位が決まります。要素名、クラス、ID、HTML中の直書きと適用される範囲が狭く詳細になるほど優先されます。定義はSelectors Level 3でされていますが、ご存知、ないのですか?CSSの優先順位の説明が大変分かりやすかったです。
 次の図は”ご存知、ないのですか?CSSの優先順位”からの引用です。


 図の様に指定方法の種類別総和が優先度になっています。この優先度の特徴として、IDの様なより詳細な種類の指定方法が用いられていた場合、どれだけクラスの様なより詳細でない種類の指定方法を重ね掛けても優先度で上回れないという点があります。優先度が同値の場合、後から読み込まれた方が優先されます。
 生のCSSではこの優先度を表記してくれません。人間がこの優先度を理解しながらCSSを読み解くのは難しいです。Specificity Calculatorは優先度計算ページです。下図の様に、CSSコードを書きこめば優先度を出力してくれます。計算機を増やしたいならば、Duplicateボタンで複製しましょう。

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

【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;
}

これで解決です。

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

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

【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() を使うときはお気を付けください。

  • この記事いいね! (0)