【5段階評価】評価グラフの作り方【HTML・CSS】
正式名称が分からないのですが5段階の評価グラフをHTMLとCSSで作りました。 WordPressユーザー向けの記事ですが、どんな環境でも使えます。 こちらがサンプルです。 コスパ 悪い 1 2 3 4 5 良い 入力・変更できる要素は以下の通り。 要素 左上のタイトル 左右のテキスト 下のテキスト 任意のテキストを非表示にすることも。 男性的 女性的 該当項目を増やすこともできます。 年齢層 20代 30代 40代 50代 60代 アイコン（fontawesome）も設定可能。 シンプル 機能的 画像も設定できます。 静か 賑やか もちろん全て一つにまとめることも！ コスパ 悪い 1 2 3 4 5 良い 年齢層 20代 30代 40代 50代 60代 シンプル 機能的 静か 賑やか 仕様はこんな感じですがカスタマイズ難易度はちょっと高めです。 HTMLが特に複雑になってしまったので、慣
マテリアルデザインについて少し調べる - Qiita
はじめに マテリアルデザインという言葉は知っていましたが、それが一体なんなのかを正しく理解しないまま、 「これからは、マテリアルデザインだぜ」のような顔して、生活していましたが、 知ったかぶりしているのがバレる前に、少し学んでおこうと思いました。 マテリアルデザインとは 2014年にGoogleが発表した「デザインのガイドライン」。 直訳すると「物質デザイン」。 マテリアルデザインの目的 スマートフォン、タブレット、テレビ、メガネ、腕時計などのデバイスで、 統一されたデザインを取り入れることにより、操作性も統一され デバイスが変わっても使いやすいUIを実現できるとか。 現実世界のルール(奥行きや、影など、質量)を取り入れることで、直感的な操作を実現します。 マテリアルデザイン誕生までの歴史 1.スキューモフィズムでのデザイン スキューモフィズムとは スキューモーフィズム（skeuomorp
パララックス効果を再現するjQueryプラグイン「jquery.parallax」 - Qiita
新しく使いやすく作り直しました。 スクロールによってCSSを変更し、パララックス効果を実現するjQueryプラグイン この記事のものとは使い方が少し異なりますが、同じ機能をもっています。 site: http://develo.org/2014/04/21/0227.html GitHub: https://github.com/kamem/jquery.parallax 仕事でパララックス効果を使ったサイト作る機会があり、 使い勝手のいいプラグインないかなぁーと思って探していたのですが。 なかなか見つかりませんでした・・。 パララックスの仕組みってそれほど難しくないんだねぇーと思いながら作り始めたのですが・・。 なかなかいろいろな機能を組み込みだすとなかなか大変な感じで； 結構前に作った奴は自分だけ使えればいいやーと思い、プラグイン化していなかったのですが、最近ようやくプラグイン化しまし
WOW.jsで動きのあるページを作ってみる | flog
WOW.js って？ Animate.css という画面に動きを付ける CSS ライブラリをラップした JavaScript ライブラリです。 Animate.css に以下の2点が加わったものと考えれば良いと思います。 スクロールして見えたタイミングでアニメーションを開始する（ページ読み込み直後じゃない） 動くタイミングやスピードを HTML の data 属性で簡単に設定できる 特に、縦に長いページに有効です。下の方にあるアニメーションがスクロールして見てもらう前に動き終わっている、といったことを避ける事ができます。 覚えることも少なく、シンプルで扱いやすいライブラリです。 Animate.css について ページ中のHTML要素に対してアニメーションを設定できるCSSライブラリで、 Animate.css というものがあります。 公式サイトはこちら。色々遊べるのでチラ見してみてくださ
Sassで使えるIE向けCSSハックまとめ - Qiita
Sassで使えるIE hack 皆さんはSassでIE hackを使ったことありますでしょうか？ 恐らくコンパイル時のエラーで使用できるCSSハック（以降、面倒なのでhack）が限定され、融通が効かないという理由で、以下のような条件付きコメント（conditional comments）に切り替えた方も多いんじゃないかと思います。 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js
[CSS] display:tableを学ぶ - YoheiM .NET
こんにちは、@yoheiMuneです。 CSSのdisplayはマークアップするには絶対に必要なスタイルの1つですよね。その中でtableやtable-cellは業務でなんとなく使っていますが断片的にしか理解していなかったので、今日はそれらのまとめブログを書いてみたいと思います。 Special Thanks to https://flic.kr/p/iNeYy7 目次 display:tableとは display:tableはテーブル要素のように表示するためのCSSです。このスタイルを用いることでtableタグを使わずに、同様のスタイルを利用することができます。 <!-- tableタグを利用した例 --> <table> <tr> <td>名前</td> <td>メールアドレス</td> </tr> <tr> <td>よーへい</td> <td>aaaa@bbb.ccc</td> <
![[CSS] display:tableを学ぶ - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/a5856b44026f95acd294eaf42931b30572f43c16/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F355.jpg)
WebStormを使う：Sassの利用編 | Agnist.code
さて前回の記事でWebStormのインストールを終えましたが、やはりSassコンパイルもWebStormでまとめてしまいたいなーと思ったので、Sassを扱えるようにしました。 PreprosなどPCにRuby、Sassを意識的にインストールする必要のないコンパイラも存在しますが、Sassはインストールされている前提でWebStormの設定のみを記します。 File Watcherの設定scssファイルを開くと、エディタ上部に「File watcher～」と表示されるので「Add watcher」をクリック。 すると「Edit Watcher」の画面が開きます。 ちなみに最初の画面で上記画面で「Dismiss」を選択したことがあると開かないようです。 「Ctrl + Alt + s」で設定を開いて左上の検索バーで「watcher」と探せば「File Watchers」が出るので、そこに登録さ
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
Twitter Bootstrapで固定ナビゲーションを使う - CMS専門 Web開発者ブログ
Twitter謹製CSSフレームワーク『Bootstrap』を使って固定ナビゲーションを作ってみます。 簡単なカスタマイズのメモです。 Bootstrap, from Twitterとは？ Twitter（ツイッター）社が提供しているBootstrap（ブートストラップ）はCSSのフレームワークです。 CSSを読み込むだけで簡単に使えます。 使い方はdiv要素などにclassを指定するだけです。 Bootstrap, from Twitter グローバルナビゲーションを固定にする ページの上部にあるナビゲーションを固定ナビゲーションにします。 スクロールしても同じ場所にあり続けます。 常にページ内の同じ位置にあり続けますのですぐにアクセスできます。 １．基本 body 要素のすぐ下に次のようにコードを書きます。 <body> <div class="navber navbar-fixed-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bs3 Document