2018年8月29日水曜日

Materialize CSS : アイコンの表示

Materialize CSSの公式ページからテンプレートをダウンロードして開いてみると、アイコンがいくつか表示されているのが分かる。下記の赤枠部分。


この部分のコードを見てみる。

<div class="col s12 m4">
  <div class="icon-block">
    <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
    <h5 class="center">Speeds up development</h5>

    <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
  </div>
</div>

これは一番左側のアイコンを表示している部分なのだけれど、iタグがアイコン表示の役割をはたしている。class="material-icons" としてアイコンの名称 flash_on を指定することでアイコン表示が行えるのだ。

指定可能なアイコンは結構な数があるので、公式サイトを確認してもらいたい。

例えば上記のコードを以下のように書き換えてみる。

<div class="col s12 m4">
  <div class="icon-block">
    <h2 class="center brown-text"><i class="material-icons">android</i></h2>
    <h5 class="center">Speeds up development</h5>

    <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
  </div>
</div>

そしてページを読み込みなおすとアイコンが変わっていることが分かる。自分で画像を探したり、作ったりしなくてもいいのでお手軽だ。


アイコンのサイズを変えることもできる。

<i class="tiny material-icons">android</i>
<i class="small material-icons">android</i>
<i class="medium material-icons">android</i>
<i class="large material-icons">android</i>

tinyが一番小さくて、small、medium、largeと大きくなっていく。



■参考サイト
https://materializecss.com/icons.html

2018年8月28日火曜日

Materialize CSS でモーダルの表示

Materialize CSSを使ったモーダルの表示を行ってみる。Bootstrapに似たような感じで記述することができるのでとっつきやすかった。

■ツリー
css -+- materialize.min.css
js  -+- index.js
     +- jquery-3.3.1.min.js
     +- materialize.min.js
index.html

materialize.min.cssとmaterialize.min.jsはMaterialize CSSの公式サイトからダウンロードができる。また、今回はjQueryも使うのでjquery-3.3.1.min.jsをダウンロードした。index.jsとindex.htmlがモーダル表示のサンプル。

■コード

index.html
<html>
  <head>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/materialize.min.js"></script>
    <script src="./js/index.js"></script>
    <link rel="stylesheet" href="./css/materialize.min.css" />
  </head>
  <body>
    <!-- モーダルを表示するボタン -->
    <button data-target="modalview" class="btn modal-trigger">モーダル表示</button>
    <!-- モーダル画面の定義 -->
    <div id="modalview" class="modal">  <!-- idの値をボタンで設定したdata-targetの値と一致させる -->
      <div class="modal-content">
        <h4>モーダルヘッダ</h4>
        <p>あいうえおかきくけこさしすせそ</p>
      </div>
      <div class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn-flat">閉じる</a>
      </div>
    </div>
  </body>
</html>

index.js
$(document).ready(function(){
  $('.modal').modal();
});

■参照
https://materializecss.com/modals.html

2018年8月22日水曜日

マテリアルデザインを実現するMaterialize CSS

CSSフレームワークはBootstrapしか使ったことがない。Bootstrapはいいものだけれど、こればかり使っていて少し飽きてしまった。

ということで、Bootstrapに変わるCSSフレームワークは何かないかなと思って探して見つけたのが「Materialize CSS」だ。

Googleが提唱しているマテリアルデザインを比較的簡単に実現できるらしい。

公式サイト:https://materializecss.com/


公式サイトを開いて「Get Started」ボタンをクリックすればダウンロードページに飛ぶ。あとはダウンロードすれば「Materialize CSS」を使うことができる。

少し見たところ、Bootstrapを使ったことがあれば、違和感なく使うことができそうだ。

一から勉強するのはちょっと面倒だと思えば、ダウンロードページをスクロールしていくと、テンプレートが2つほど提供されている。テンプレートをダウンロードして、基本的な使いかたと動きを確認すれば、ある程度までは事足りるんじゃないだろうか。


テンプレートも良く出来ていて、画像と文章だけ差し替えてしまえば、ほとんどそのまま利用できそうな感じだった。




しばらくは、これを使ってみようと思う。

2018年8月6日月曜日

Java コンパイラー・レベルが、インストールされている Java プロジェクト・ファセットのバージョンと一致しません。

Eclipseでコンパイラー準拠レベルを変更したら、「Java コンパイラー・レベルが、インストールされている Java プロジェクト・ファセットのバージョンと一致しません。」というエラーが発生した。



この場合、「ウィンドウ > 設定 > プロジェクト・ファセット」に設定してあるJavaのバージョンをコンパイラー準拠レベルと一致させてやると解決する。