カテゴリーアーカイブ CSS

村上 著者:村上

【CSS】チェックボックス・ラジオボタンのカスタマイズについてのおすすめサイト

ほぼメモというか備忘録ですが、とても良いサイトを見つけたのでご紹介。
HTML のラジオボタンやチェックボックスをカスタマイズする方法について紹介したサイトです。

サイトはこちら。

CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた|カルチャーアカデミア広島
https://cultureacademia.jp/webcreate/303/

チェックボックスをカスタマイズしたいけど、フレームワークを使うほどではない…というときにおすすめです。
実際、現在開発中のページでも活用させていただきました。

 

今回、私が使用させていただいたコードはこちら。
まず、CSS です。

.checkbox01-input{
  display: none;
}
.checkbox01-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox01-input:checked + .checkbox01-parts{
  color: #009a9a;
}
.checkbox01-input:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

HTML は、下記のとおりです。

<label>
  <input type="checkbox" name="checkbox01" class="checkbox01-input">
  <span class="checkbox01-parts">チェックボックス01</span>
</label>

こちらを実装すると、下のようなデザインになります。

デフォルトのチェックボックスよりはるかにお洒落!
チェックボックスのサイズも大きいので、スマートフォンでも押しやすいサイズ感です。
また、ラベルのテキストをクリックしても、ボックスにチェックが入れられるようになっているので、使い勝手も良いです(こちらについては、デザイン関係なく実装しますが)。

ほかにも、チェックした時にふわんと波のように広がるラジオボタンや、アニメーション付きのチェックボックスも紹介されていました。
ボックスの色も簡単に変えられたので、かなり使いやすいですね。

 

以上、チェックボックスやラジオボタンのカスタマイズについてのおすすめサイトのご紹介でした。

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

【css】ボックスを使ってコンテンツを見やすくする

今回は、cssを使ってボックスのようなコンテンツを作り、他のコンテンツと組み合わせて表示してみようと思います。

ボックスというプロパティがあるわけではなく、ボックスのような形に仕上げることでユーザーが見やすい・とっつきやすい

コンテンツを作ることを目的としております。

例として、ラジオボタンやチェックボタンをそのまま配置すると、機能としては問題ないものの押しにくかったり

見落としてしまったりとユーザー目線で見てみると意外と綻びがちらほら見受けられます。

造作もないことですが、やってみたいけど方法が分からないという方の参考になればいいなと思っています。

それでは本コードを紹介していきます。※reactベースで書いています。

</pre>
<pre><div className="box" >
  <label>
    <p id="agreeText">
      利用規約に同意する
    </p>
      <input type="checkbox" value="1" onChange={this.onPermission}></input>
      <span className="checkbox01-parts"></span>
  </label>
</div>

一番上の行のdivですが、ここでクラス名boxを定義します。このdivが、先述したボックスの役割をするコンテンツになります。

一番下にこのコンテンツを敷きたいので、このdivで全体を囲んでください。次に、囲みたいテキストとコンテンツ

(ここではチェックボックス)を書いていきます。labelは長さなどの設定をしているでだけなのでここでは無視して

ください。続いてcssの記述になります。

p#agreeText {
  position: absolute;
  margin-top: -20px;
  margin-left: 80px;
  padding: 20px;
  color: #000000;
}
div.box {
  width:300px; height:15px;
  position: relative;
  margin: auto;
  padding:10px; border:1px solid #fff;
  background-color:#fff;
}

あまり説明する必要がないと思いますが、中央揃いで表示したいためrelativeにしております。

大分端折ってしまいましたが完成物はこんな感じになります。↓

ものすごーくシンプルですが、装飾さえしてしまえば今風のデザインに近いものが作れるんじゃないかと感じています。

他のcssフレームワークならもっと簡単にできてしまうかもですが、何も施していないノーマルのcssでもこんな感じで

仕上げられるので、もしこんなものでよければ参考にしてみてください。

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

【chrome】Developer Toolsでcssの詳細を見てみた

去年上半期ころから、html5やcssを会社で使い始めたのですが、当時はまだ人のcssをコピーしてそこから分解して

オブジェクトを作ったりと足元がおぼつかないど素人でした。

今でこそ要領も理解して形になるものを作れるようになったのですが、たまに「このタグの位置設定したのに動かないなぁ」とか

しょうもないことでハマってしまうときがあります。

そこで、今までjavaScriptでしか見ていなかったDeveloper ToolsことDevToolsで今度はhtmlとcssを解剖して綺麗なデザインに

修正してみようと考えました。

DevToolsとは、Google Chrome に組み込まれたweb開発向けのデバッグツールです。自分も去年からこれを使って

いたのですが、ほとんどjavascriptのコードエラーのチェックのために使っており、cssはほぼ使わなかったのでDevToolsの

旨味を知らずにここまできてしまいました。

当時はまだcssの操作に慣れておらず、なんとなく複雑そうだなとか考えてしまいcssの中身を見ることに抵抗があったのですが、

視覚的にhtml・cssの作りを見ることができることを知ったのをきっかけに、臆さず使ってみようと決めました。

では簡単に見かたを説明していきます。

まず、chromeを開いてその他のツール→デベロップツールを開きます。

左端のelementタグを開くと、今表示しているhtmlが表示されます。各々のタグの上にマウスを重ねると下の画像の

ように青く表示されます。これがcssが効いている領域になります。

 

 

次に、画面左下にあるStylesタグを開きます。すると、右下に下記のような画像が表示されます。

 

赤い部分が効いているcssを示しており、ここで視覚的にmarginがどうなっているか見ることができます。

この二つを見比べることで、どこのオブジェクトが無効になっているのか、どこのオブジェクトがコンテンツ表示の邪魔を

しているかを即座に見分けて修正することもできます。

初心者ならば、あぁマージンてこういう意味かじゃあここを狭めて・・・など、オブジェクトの使い方も覚えられ、開発の幅も

広がるので、お世話になることをおすすめします。

 

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

長方形の画像をCSSだけで真円に表示

 画像を円形にして出力するためにはborder-radius:50%のようにborder-radiusが指定されがちです。画像が正方形の場合はこれだけでもきれいな円形になります(サンプル1)。しかし画像が長方形の場合、角が丸くなりますが画像サイズに合わせた楕円になります(サンプル2)。どのような画像であっても真円にしたい、という時は背景画像の仕組みを用いることで実現できます(サンプル3)。
 このサンプル3は次のCSSコードで実現できます。

.img-box {
  background-image:url(https://lorempixel.com/400/300/animals/1/est);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center,center;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
}

 width,height,padding-bottomの部分で親要素と同じ横幅、親要素の横幅と同じ高さの空白で埋め尽くされた(paddingのパーセントは親要素の”横幅”基準)divを作ります。このdivをborder-radius:50%をかけることで親要素の横幅と同じ長さの直径を持つ円形のdivにします。

 backgroundが接頭辞のコードで背景画像として、縦横比が崩れず端が切り取られる1枚の画像を上下左右中央に配置します。
background-size | MDN

cover
画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。

background-repeat | MDN

no-repeat 画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は background-position CSS プロパティで定義されます。

background-positiont | MDN

center のキーワード値の場合は、画像を中央揃えにします。


 この二つを組み合わせて真円の形の画像を表示できます。

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

【html-css-javascript】PureCSSで無骨なページをそれっぽくする

前回は、PureCSSで色々いじくり倒していましたが、今回はちゃんとしたアプリっぽい見た目で作ってみました。

今回は、imgタグとinput fileを使った画像を表示するページを作りました。備忘録ぽいですがご容赦ください。

input fileといえばボタンを押すと画像ギャラリーに飛ぶあのコンテンツです。

メジャーなので知らない人はいないと思いますが、そのままこいつを使うとどうも雰囲気が堅いというかなにも

手を付けていないようで野暮ったいです。

せっかくなので前回でも使ったこのPureCSSで今風のボタンにかえてあげましょう。

html↓

    <div class="thumb-wrapper">
      <img id='myImage'>
    </div>
    <div class="button-wrapper">
      <span class="label">
        画像アップロード
      </span>
        <input type="file" name="upload" id='upload' class="upload-box" placeholder="Upload File">
    </div>

CSS↓


/*画像が表示されるコンテンツの位置調整*/
    .thumb-wrapper {
      position: relative;
      height: 50px;
      text-align: center;
      margin: 20% auto;
    }
/*ボタンの幅と位置の調整*/
    .button-wrapper {
      position: relative;
      width: 150px;
      text-align: center;
      margin: 20% auto;
    }
/*ラベルの設定*/
    .button-wrapper span.label {
      position: relative;
      z-index: 0;
      display: inline-block;
      width: 100%;
      background: #00bfff;
      cursor: pointer;
      color: #fff;
      padding: 10px 0;
      text-transform:uppercase;
      font-size:12px;
    }
/*実際に働くボタン*/
    #upload {
        display: inline-block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 50px;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }

JavaScript。↓

    <script>
      const target = document.getElementById('upload');
      const img = document.getElementById('myImage');
      target.addEventListener('change', function (e) {
        const file = e.target.files[0]
        const reader = new FileReader();
        reader.onload = function (e) {
          img.height = 200;
          img.src = e.target.result;
          console.log(img);
        }
        reader.readAsDataURL(file);
      }, false);
    </script>

script側は従来の画像を表示させる機能だけなので割愛させていただきます。

今回使うオブジェクトは4つ。一つ目は画像が表示された時の場所を調整するCSSです。画面中央にくるように

してありますが、このコンテンツは特にPureCSSの恩恵を受けていないのでそこまで語るまでもないです。

二つ目のCSSははボタンの幅を調整しています。これもアップロードするボタンの位置を決めているだけで

こちらも特にPureCSSの影響は受けません。

三つ目のCSSですが、ここでボタンの基本的な部分を生成しています。

button-wrapper span.labelを指していますが、これはbutton-wrapperタグの中のspan.labelを操作しますよという意味合いに

なります。divの中にspanで定義されているので、それが操作の対象になります。

ここでbackgroundやwidthで調整するとこんな感じに仕上がります。

角があった従来のフォームよりクリーンな出来になりました。

 

最後の#uploadオブジェクトですが、こちらは本来あったあのフォームをposition: absoluteを使い

上のボタンで被せるような役割をもっています。

htmlのinput fileのIDにも書いてあるとおりこちらが本体となっており、前のフォームがラベルに隠れて作業をしていたと考えると

分かりやすいです。

最後にここで実装したフォームの全体画像を載せて終了になります。

 

今回も公式を参考にしたコードです。PureCSSに慣れるまでまだかかりそうなのでご容赦くださいまし。

 

 

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

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)