ミニものブログ(旧)

ミニチュアを作っています!

ミニチュア入門者向けの本

Twitterで、ミニチュア入門者向けの書籍紹介のタイムラインが流れていたので、私もオススメの1冊を…。

 

 

ノモ研という本です。

 

プラモデル工作向けの材料や工具のカタログ的な書籍で、樹脂粘土などの手芸系な材料は登場しませんが、模型工作に必要な知識が網羅されているので、きっと役に立つと思います。

 

3年振りにインスタグラムを再開しました

Instagramを再開しました。

 

www.instagram.com

最初の投稿は、2014年1月16日。以来、休眠状態だったのですが、ミニチュアのポートフォリオ(作品集)的な使い方で活用しようかな…と思いまして。

 

Twitterよりも更新頻度は低いと思いますが、よろしくお願いします!

 

 

刃先が360度回転するフレキシブルカッター

少し特殊な工具を紹介します。

 

フレキシブルカッターです。

 

f:id:mini-mono:20170316213223p:plain

 

刃先が360度回転するので、テンプレート定規などと組み合わせると威力を発揮します。

 

フレキシブルカッターの使い方は、公式ページが最も詳しいです。

 

フレキシブルカッターの「使い方」 | ハセガワ トライツール情報「模型用工具・マテリアル」

 

一時期はプレミアム価格になっていましたが、再販されてAmazonなどでは安く販売されていますね。

 

 

…と言えども、3千円を超える高価な工具ですけど…。(私が買ったときの価格は5千円弱。)

ミニチュアの刺身パック(あじ)

ミニチュアの刺身パックシリーズの第2弾です。

 

f:id:mini-mono:20170314221550j:plain

 

アジ盛り。

 

f:id:mini-mono:20170314221636j:plain

 

大きさは、1/6スケールです。

 

f:id:mini-mono:20170314221701j:plain

 

レモンでなく菊を…、とTwitterでリクエストがあったので、食用菊を作りました。

 

f:id:mini-mono:20170314221924j:plain

 

現在、ヤフオク出品しています。

 

page16.auctions.yahoo.co.jp

【ミニチュア素材】防犯ステッカー

防犯ステッカーのミニチュア素材を作りました。ドールハウスのセキュリティ強化にお役立てください。

 

通常バージョン。

f:id:mini-mono:20170314055803p:plain

 

防犯カメラ設置版。

f:id:mini-mono:20170314055840p:plain

 

画像をパソコンに保存してから、プリンターで印刷頂けると幸いです。

 

ミニチュア配布素材カテゴリでは、ミニチュアで使える各種素材を配布しております。

ミニチュアのハイカットスニーカー(ユニオンジャック)

ユニオンフラッグデザインのミニチュアスニーカーを作りました。

 

f:id:mini-mono:20170313214706j:plain

 

前回、パステルカラーのハイカット2種を出品したのですが、『偽ブランド品』という名目で、違反通告が複数件あったので、タグや意匠と思われそうなものは排除しています。

 

f:id:mini-mono:20170313214929j:plain

 

英国旗デザインも通報のリスクがあるかもしれませんが、ファッションのモチーフとして、ユニオンフラッグ(ユニオンジャック)は、わりと定番だと思いますので…。

 

f:id:mini-mono:20170313215118j:plain

 

今まで画像を載せてませんでしたが、ソールの部分もディテールをいれています。

 

現在、ヤフオク出品中です。

 

page16.auctions.yahoo.co.jp

【初心者向け】コピペで使える囲み枠いろいろ

CSSの詳しい解説を書こうかと思ったのですが、なかなか面倒な作業なので、パソコンで表示する前提なんですが、基本的な囲み枠の作り方を…。

 

紹介しているCSSのコードは、はてなブログの場合、ブログ管理画面のダッシュボードから『デザイン』→『カスタマイズ』→『デザインCSS』の項目にコピペしてください。

 

WordPressの場合は、テーマファイル内のstyle.cssというファイルに、使いたいCSSを追記すると使えるようになると思います。

 

はてなブログの例。

f:id:mini-mono:20170313014634j:plain

 

CSSを適用させる場合は、変更を保存するボタンを忘れずに…。

 

あと、念のため、元から記述してあるデザインCSSのコードは、メモ帳などにコピペして保存しておきましょう。

 

目次

1.背景を薄い青色にする

 

HTMLは以下のように書いてください。

<div class="kakomi_waku">
<p>囲みたい範囲</p>
<p>囲みたい範囲</p>
</div>

 

 CSSは、以下の通り。

.kakomi_waku {
background: #d1e8ff;/*背景色*/
}

 

このCSSを、はてなブログのデザインCSSに追加してください。

 

このCSSを指定すると、以下のようになります。

 

囲みたい範囲
囲みたい範囲

 

2.上部に30ピクセルの余白を設けた薄い青の場合

 

1で紹介した囲みに、上部の余白を30ピクセルとりましょうか。その場合のCSSは、以下の通り。

.kakomi_waku {
background: #d1e8ff;/*背景色*/
padding: 30px 0px 0px 0px;/*余白 数字左から上・右・下・左*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

3.上部に30ピクセル・下部に15ピクセルの余白を設けた薄い青の場合

 

2で紹介した囲み枠は、下の部分に余裕がないので、15ピクセル分の余白をとりましょうか。

CSSは、以下の通り。

.kakomi_waku {
background: #d1e8ff;/*背景色*/
padding: 30px 0px 15px 0px;/*余白 数字左から上・右・下・左*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

4.左側に10ピクセル余白をあけた薄い青枠

 

3の枠は、文字の左側に余白がありませんので、10ピクセル分、余白をとりましょうか。

CSSは、以下の通り。

.kakomi_waku {
background: #d1e8ff;/*背景色*/
padding: 30px 0px 15px 10px;/*余白 数字左から上・右・下・左*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

5.背景色が薄いピンクの枠

 

4の枠をベースに、背景色を薄いピンク色に染めましょう。これは簡単ですね。

.kakomi_waku {
background: #ffd1ff;/*背景色*/
padding: 30px 0px 15px 10px;/*余白 数字左から上・右・下・左*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

 ここまでくると、背景色(background)と内側の余白(padding)は、だいたいマスターできたのではないでしょうか?

 

padding(やmargin)の設定は、他のタグにもすでに指定されていることが多いので、干渉することが多く、イメージ通りの余白にならないケースが多いかもしれませんが…。

 

6.上下左右の余白が全部20ピクセルの枠

 

余白が全部、同じ数字の長さの場合、以下のようにCSSコードの短縮が可能です。

.kakomi_waku {
background: #ffd1ff;/*背景色*/
padding: 20px;/*全部の余白が同じなら数値は1つでOK*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

7.背景は薄い灰色で枠線が点線

 

6をベースに、以下のように変更します。

.kakomi_waku {
background: #efefef;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: dotted;/*線の種類*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

8.背景は薄い灰色で枠線が破線

.kakomi_waku {
background: #efefef;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: dashed;/*線の種類*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

9.背景は薄い灰色で枠線が二重線

.kakomi_waku {
background: #efefef;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: double;/*線の種類*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

10.実線で囲む

.kakomi_waku {
background: #efefef;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: solid;/*線の種類*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

11.実線の色が赤い枠

.kakomi_waku {
background: #efefef;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: solid;/*線の種類*/
border-color: red;/*線の色*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

12.背景が白く実線の色が青で10ピクセルの太さの枠

.kakomi_waku {
background: #ffffff;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: solid;/*線の種類*/
border-color: blue;/*線の色*/
border-width: 10px;/*線の太さ*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

 後日、追加するかもしれませんが、今回はここまで。順を追うと、囲み枠の『背景色』『余白』『枠線』が、なんとなくマスターできるかと思います。

 

今回紹介したコードは、もっと簡略化できる書き方(ショートハンド)がありますが、あえて簡略化していない部分がありますので、『もっと簡素化できるだろ!』というツッコミは、心の中だけの限定でお願いします!

 

ちなみに、長さの単位は、px(ピクセル)を使いましたが、以下のような単位も使う方が多いでしょうか。

 

  1. pt(ポイント)
  2. em(font-sizeプロパティの値を1とする単位)
  3. ex(小文字「x」の高さを1とする単位)

 

pt(ポイント)は、1/72インチのことです。emとexは、以下に図を描きましたので、ご参考に…。

 

f:id:mini-mono:20170313034109j:plain

 

ミニチュアのハイカットスニーカー(ギンガムチェック)

久々の1/12スケールです。

 

f:id:mini-mono:20170312203731j:plain

 

ギンガムチェック。

 

f:id:mini-mono:20170312203755j:plain

 

大きさは10円玉くらいです。

 

f:id:mini-mono:20170312203826j:plain

 

親指と人差し指で、10円玉ほどの大きさの輪を作って頂けると、サイズ感がわかりやすいかもしれません。

 

f:id:mini-mono:20170312204033j:plain

 

現在、ヤフオク出品中です。

 

page13.auctions.yahoo.co.jp

 

 

【初心者向け】HTMLとは?CSSとは?

ミニチュアとは関係ない話題です。

 

私がHTMLを学んだのは、20年ほど前なので、古い知識がベースなのですが、たぶん基本的な仕組みは変わらないと思いますので、ざっくりと初心者向けのHTMLとCSSの解説をしたいと思います。(まぁ、20年前にCSSを使っていた人は、ごく少数でしょうけど。私がCSSを使い始めたのは2004年あたり…。)

 

きっかけは、以下の記事を読んで…。

 

www.otonan.com

力作な記事だと思いますが、視覚表現として、使ってほしくない要素もあったりしますね。

 

まずはWeb(ウェブ)の基本構造から

 

Webの基本構造をざっくりと解説すると、文書形式のHTML(エイチティーエムエル、HyperText Markup Language)と、文書転送のルール・約束ごとのHTTP(エイチティーティーピー、HyperText Transfer Protocol)と、文書のありかを示すURL(ユーアールエル、Uniform Resource Locator)の3つから構成されています。

 

f:id:mini-mono:20170311203706j:plain

 

HTMLは、Webページの構造・骨格をつくる言葉です。そのHTMLが正しい構造でないと、いろいろとマズいことになるかもしれません。

 

CSSは、『Cascading Style Sheets(カスケーディング・スタイル・シート)』の略称で、呼称は「シーエスエス」。一般的に、『スタイルシート』といえば、CSSを指します。(JavaScriptもスタイルシートがありますけどね。略してJSS。)

 

HTMLとCSSの関係

 

HTMLは、Webページの構造をつくる言葉ですが、文書の論理構造が主な役割なので、外観・見た目的には、とっても地味…。CSSは、そのHTMLを装飾して、見栄えをよくする役割の言葉です。

 

このブログを、CSSなしのHTMLだけで表示すると以下のようになります。

f:id:mini-mono:20170311204728j:plain

 

…すごい…地味です。

 

まぁ、大事なのは中身で、見た目はどうでも…と言いたいところですが、最近の世の中の風潮として、やっぱり見た目も重要視されますよね。

 

装飾表現が豊かなCSSを使うと、味気ないHTMLは見栄え良くなります。

f:id:mini-mono:20170311205100j:plain

 

うーん、全然ちがいますね。中身の論理構造は同じなんですけども…。HTMLは「すっぴん」で、CSSは「化粧・メイク」といった感じでしょうか。

 

CSSを使うと、さりげないナチュラルメイクから、ド派手な厚化粧まで、Webページを装飾できます。

 

CSSの加え方は3つ

 

ざっくりと、HTMLにCSSを加味する方法としては、以下の3つ。

 

1. style属性で要素ごとに適用する

 

個別にCSSを適用させる方法です。たとえば、HTMLの段落(p)タグに、以下のように書きます。

 

<p style="color: red">

 

【注意】<>の部分は全角ですが、本来は半角です。

 

f:id:mini-mono:20170311210306j:plain

 

この方法はメンテナンス性が悪いので、個人的には、あまり推奨はしません。

 

2. head要素内にstyle要素を加えて、1つのページ内に適用させる

 

ページごとにCSSを適用させる方法です。

 

<p style="text/css">

p {color:red}

</style>

 

【注意】<>の部分は全角ですが、本来は半角です。

 

f:id:mini-mono:20170311210533j:plain

 

こう書いておくと、そのページ内のp要素すべてに、指定したCSSが適用されます。

 

 3. 外部にCSSファイルを置いてサイトまるごと適用させる

 

この方法が1番メジャーなCSSの利用法でしょうか。CSSを別ファイルとして置いて、各ページから呼び出す方法です。

 

実装の方法はいくつかあるみたいですが、一般的に外部CSSを参照させる方法は、HTMLのhead要素内に、link要素を追加して、外部CSSファイルを呼び出すやり方がメジャーかもしれません。

 

<link rel="stylesheet" type="text/css" href="gaibu.css">

 

【注意】<>の部分は全角ですが、本来は半角です。

 

f:id:mini-mono:20170311211119j:plain

 

HTMLファイルとCSSファイルを分離させるメリットは、メンテナンスが簡単なことでしょうか。

 

たとえば、サイトやブログの全てのページの(段落の)文字色を黒から赤に変更したい場合、元となるCSSファイルの一文を変更させるだけでOKです。

 

f:id:mini-mono:20170311211342j:plain

 

個別のHTMLタグに、CSSを指定することが推奨されない理由はこれだと思われます。

 

サイトやブログの記事数・文章量が少なければ、あまり手間がかからないかもしれませんが、記事数が100や200といった数になると、個別にCSSを適用させたHTMLタグの変更は、めちゃくちゃ手間がかかるでしょう(もはや苦行)。

 

独立させたCSSファイルにて、サイトやブログのHTMLを一括管理させると、装飾の変更は簡単になります。たとえば、ブログの文字色を青に変更させたい場合は、以下のようにすればOKです。

 

f:id:mini-mono:20170311211932j:plain

 

 CSSの書き方によっては、もっと細かなコントロールができるようになります。今回は、ざっくりとHTMLとCSSをイメージして頂ければ幸いです。

 

基本的に視覚的な装飾は、CSSを使うことが推奨されています。無理にHTML(論理構造言語)で装飾しようとすると、いろいろと問題が発生するかもしれません。

 

ブログやサイトに訪れるのは、目の見える方だけではなく、目の不自由な方も訪れます。HTMLを視覚的な表現で優先させると、論理的な構造がおかしくなって、こういった方々への負担になりますので…。

 

(趣旨とは全く関係ない愚痴ですけど、はてなブログは、シンタックスハイライトを使おうとすると、手順が面倒すぎる…。)