HTML_CSS_11 CSSで処理するかHTMLに設定するか

第10回でcss側でページ毎に色を変更する設定を説明しました。力技ですが、CSS側ではなくてHTML側でイレギュラー設定することも可能です。ただし、修正の場合は複数のファイルを編集することにナメので、あまりお薦めはしませんが、作例程度であれば許容範囲かと思い整理しました。

まず何をしたいのかを整理します。ここで変更したいのは［ID="content"］の背景色の変更だけなので、［rule.css］の以下の部分を削除あるいは［/*〜*/］で囲んでしまいます。

/* rule.css */

div#content_01 {

float: right;

height: 520px;

width: 75%;

background: #fc7ca9;

}

div#content_02 {

float: right;

height: 520px;

width: 75%;

background: #80acf2;

}

div#content_03 {

float: right;

height: 520px;

width: 75%;

background: #9acd32;

}

/* rule.css */

あとはそれぞれのファイル［menu01.html］〜［menu01.html］を修正します。修正部分は青字の部分です。

<!-- menu01.html>

<div id="content_01">

<!-- menu01.html>

　　　　↓

<!-- menu01.html>

<div id="content" style="background:#fc7ca9;">

<!-- menu01.html>

<!-- menu02.html>

<div id="content_02">

<!-- menu02.html>

　　　　↓

<!-- menu02.html>

<div id="content" style="background:#80acf2;">

<!-- menu02.html>

<!-- menu03.html>

<div id="content_03">

<!-- menu03.html>

　　　　↓

<!-- menu03.html>

<div id="content" style="background:#9acd32;">

<!-- menu03.html>

CSSスタイルの設定には、以下の様に優先順位があります。

1. HTMLタグ内にstyle属性を設定

2. ID

3. class

つまり、CSSで設定してもHTML側で今回の様にゴリ押しすれば、そちらが優先されると言うことになります。

TCDW6715 かなりパニックで私の脳内は祭り状態

春学期にガンガン使い回していたオンライン授業用の環境を、秋も使う事になったわけですが、いつの間にかアップデートでインターフェースが変わっていたり、私自身が操作忘れたりと、かなりパニックin私の脳内祭り・・・笑えない。やっぱり授業は対面が良いですね〜。

modoの基本30 MeshFusionの使い方

形状同士を加算したり削ったりするためのブーリアン処理については以前整理しましたが、本格的に処理したい場合はMeshFusionを使うと便利です。手順が少し難解なので、備忘録を込めて整理してみました。

通常の形状同士でも処理は可能ですが、ここでは専用モードでの処理で説明します。まずモデルツールパレットから［Fusion］を選択します。続けて［Fusionジオメトリー］の［Qbcジオメトリー］をクリックします。

クリックすると専用のシェイプの一覧が表示されます。今回は赤い枠で囲んだシェイプを利用します。

※上は1列を2列にして表示しています。

基本形状として、シェイプ一覧から滴のようなシェイプをダブルクリックすると3D空間のセンターに自動配置されます。

そのまま続けて［Fusion］の［新規Fusion...］を選択すると上の様なパレットが表示されるので［選択メッシュに新規Fusion...］をクリックします。

クリックするとシェイプとアイテムリストの表示が変わります。

次に［Qbcジオメトリー］から円柱形状ダブルクリックして配置し角度とサイズを適宜調整して上の様に配置します。

ここでアイテムリストにて全てを選択します。

全てを選択したら、モデルツールパレットの［Fusion］＞［メッシュロール設定 ＆ 適応］にて左端の［プライマリー適応］を実行すると2つの形状は1つの形状として結合します。

モデルツールパレットの［Fusion］＞［メッシュロール設定 ＆ 適応］にて左から2つ目の［差トリムを適応］を実行すると2つの目の形状で穴が開きます。

モデルツールパレットの［Fusion］＞［メッシュロール設定 ＆ 適応］にて左から3つ目の［交差トリムを適応］を実行すると2つのオブジェクトが交差した部分だけが抽出されます。

処理後はどちらかのオブジェクトを移動・回転・拡大することでライブに処理結果を変更する事が出来ます。最終的に通常のオブジェクトに変換する前であればいくらでも修正することが出来ます。

ここでは［差トリムを適応］を実行して2つの目の形状で穴を開けました。ただし、ここまでの詩寄りであればブーリアンとの差はありません。よりリアル名形状を求めたい場合、エッジの丸め込みが必要になりますが、MeshFusonの場合はそりがとても簡単に調整できます。ここでは更に半ドーナツ形状を元のオブシェクトに［プライマリー適応］で結合させています。両方の接合（穴あき）部分のエッジ調整します。

アイテムリストから［Fusion Item］の中にある［Strip］を選択します。

そのまま［Fusion］＞［Fusionストリップ］にて［全ストリップを選択］を選ぶと、関係する部分のエッジがオレンジ色になります。

そのまま［Fusionストリップ］のプロパティーにて［ストリップ数］を適宜大きく設定します。デフォルトでは1mmとなっています。

これで結合部分などが自然な状態になりました。

もし生成した形状を通常の状態に変換したい場合は、アイテムリストから［Fusion Item］を選択し［Fusion］プロパティーより［複製＆メッシュに変換］または［メッシュアイテムへ変換］を実行します。

これで通常のデータになります。元の状態を保つためにも［複製＆メッシュに変換］で複製を自動生成した方が良いでしょう。

処理結果はこんな感じです。

上はレンダリング結果です。ブーリアンではあまり複雑な処理は出来ないので、こちらに慣れておくとよいでしょう。

modo 14.0v1

TCDW6714 ハードウェアのご機嫌が斜め過ぎて

怪しい笑みのエイリアン。地球ではマスクしていないと怪しまれますよ〜。それにしても最近は林檎族のハードウェアのご機嫌が斜め過ぎて笑うしかないです。

HTML_CSS_10 類似ページはコピペで対処

前回まででひとまずindex.htmlとrule.cssは完成しました。あとは残りのmenu01.html〜menu03.htmlのファイルです。

なお、menu01.html〜menu03.htmlとindex.htmlの違いは上の様にメイン画像と文言だけです。該当部分はindex.htmlの以下の青字の部分です。

<!-- index.html -->

<div id="content">

<div id="message">

<h2 class="main_text">大自然に囲まれた素敵なお店です</h2>

<p class ="sub_text">素材を吟味した自然の味わいを大切にした<br>

マスター自慢のパンとお菓子をお楽しみ下さい。</p>

</div>

<div id="main_picture">

<img src="links/home.jpg"

alt="象のイメージキャラクター画像">

</div>

</div>

<!-- index.html -->

そこで、

index.htmlのコピーを3つ作成し、それぞれのファイル名をmenu01.html〜menu03.htmlとし、以下の部分を変更します。

<!-- menu01.html>

<div id="content">

<div id="message">

<h2 class="main_text">季節の果物をふんだんに使ったタルト</h2>

<p class="sub_text">自家農園で育った季節の果物をふんだんに取り入れた<br>

フルーツタルトケーキは当店自慢の品です。</p>

</div>

    <div id="main_picture">

    <img src="links/cake_01.jpg"

    alt="フルーツタルトケーキの画像">

    </div>

</div>

<!-- menu01.html>

<!-- menu02.html>

<div id="content">

<div id="message">

<h2 class="main_text">大人気のドロップクッキー</h2>

<p class="sub_text">絶妙の焼き加減で大人気のドロップクッキー<br>

8種類の紅茶と組み合わせてお楽しみ下さい。</p>

</div>

<div id="main_picture">

<img src="links/cake_02.jpg"

alt="ドロップクッキーの画像">

</div>

</div>

<!-- menu02.html>

<!-- menu03.html>

<div id="content">

<div id="message">

<h2 class="main_text">マスターの気まぐれお菓子</h2>

<p class="sub_text">自家農園で育くみ厳選された小麦粉と米粉を使い<br>

丁寧に焼き上げたこだわりクッキーをお楽しみ下さい。</p>

</div>

<div id="main_picture">

<img src="links/cake_03.jpg"

alt="こだわりクッキーの画像">

</div>

</div>

<!-- menu03.html>

これで完成しました。ただし、色味が全く同じなので面白みがありません。最低限の初手メイン画像の背景（div#content）を変更する事にしました。まず下準備としてrule.cssのdiv#contentの複製を3つ作成しdiv#content_01~03とします。

<!-- rule.css -->
div#content {
float: right;
height: 520px;
width: 75%;
background: #4ff1ae;
}

<!-- rule.css -->

あとは色を変更するだけです。

<!-- rule.css -->

div#content_01 {

float: right;

height: 520px;
width: 75%;
background: #fc7ca9;
}

div#content_02 {
float: right;
height: 520px;
width: 75%;
background: #80acf2;
}

div#content_03 {
float: right;
height: 520px;
width: 75%;
background: #9acd32;
}
 <!-- rule.css -->

もう少しスマートに処理する経方法もありますが、複雑になるのでこの方法で感性としました。

TCDW6713 修理に1時間ほど掛かってしまった

うっかり、CDも処理出来るシュレッダー1号と勘違いして紙専用のシュレッダー2号にCD突っ込んで詰まらせてしまいました。修理に1時間ほど掛かってしまったのは内緒です。

 

オンライン・ドラムマシン_PatternSketch

無料のオンライン・ドラムマシンPatternSketchが意外と面白いです。無料のブラウザ上で使うツールなので機種に依存しません。sign upでメールアドレスとパスワードで登録をします。登録方式ですが無料の環境です。以降はLoginで入ります。ブラウザに登録しておけばそのまま作業に入れます。

PatternSketch

https://patternsketch.com/

起動直後の画面です。操作はとってもシンプルです。

①楽器の音色を確認。アルファベットごとに音色が違います。

②ミュート。その楽器の音を再生中にオフにします。

③ソロ。その楽器の音だけを再生します。

④ボリューム調整

⑤音を入れたい四角形をクリック

⑥再生or停止ボタン

［Save］ボタンをクリックで楽曲をサーバーに保存

［Pattern］をクリックで登録した楽曲を選択

［Kit］をクリックで曲風を選択。

［Export Audio］ボタンをクリックで楽曲をPCに保存。作成したトラックデータはWAV、OGG、MP3で書き出せます。

［Clear］で楽曲を消去。

［Share］で楽曲を友達と共有。複数のメールアドレスはカンマで区切って入力。

といった感じデス。

2021/10/22

以下は続編です・・・。

PatternSketchはKitの曲風変更でイメージが激変 2023/11/12

オンライン・ドラムマシン_PatternSketch その2 2021/10/22

PatternSketch

https://patternsketch.com/

TCDW6712 放熱地獄は洒落にならないです

 

そろそろTシャツ一枚では寒いかも・・・という状況でも綿の部屋ではエアコン全開。やっと室温が28度になりました。放熱地獄は洒落にならないです。

HTML_CSS_09 画像配置とリンクにalt設定

画像配置とリンク、そしてalt設定にロールオーバー設定を行います。

上が、前回までの状態です。<div>設定が完了し、配置が決定したので画像を配置していきます。修正箇所は2つ。<div id="side_menu">と<div id="main_picture">です。

■画像追加前のside_menu

----------------

<div id="side_menu">

<div class="menu_button">

</div>

<div class="menu_button">

</div>

<div class="menu_button">

</div>

<div class="menu_button">

</div>

</div>

----------------

追加箇所はブルーで表示

■画像追加後のside_menu

----------------

<div id="side_menu">

<div class="menu_button">

<img src="links/home.gif"

alt="トップぺージへのリンクボタン">

                         <!-- <img src ="画像ファイル">で配置画像を指定

                         <alt = "説明文">で画像の説明 -->

</div>

<div class="menu_button">

<img src="links/cake_01.gif"

alt="cake01へのリンクボタン">

                         <!-- <img src ="画像ファイル">で配置画像を指定

                         <alt = "説明文">で画像の説明 -->

</div>

<div class="menu_button">

<img src="links/cake_02.gif"

alt="cake02へのリンクボタン">

                        <!-- <img src ="画像ファイル">で配置画像を指定

                        <alt = "説明文">で画像の説明 -->

</div>

<div class="menu_button">

<img src="links/cake_03.gif"

alt="cake03へのリンクボタン">

                        <!-- <img src ="画像ファイル">で配置画像を指定

                        <alt = "説明文">で画像の説明 -->

</div>

----------------

設定後のindex.htmlは以下の様になります。

続けてメイン画像を配置します。

■画像追加前のmain_picture

----------------

<div id="main_picture">

</div>

----------------

追加箇所はブルーで表示

■画像追加後のmain_picture

----------------

<div id="main_picture">

<img src="links/home.jpg">

    alt="象のイメージキャラクター画像">

                           <!-- <img src ="画像ファイル">で配置画像を指定

                           <alt = "説明文">で画像の説明 -->

</div>

----------------

追加箇所はブルーで表示

■リンクとロールオーバー設定後のside_menu

----------------

<div id="side_menu">

<div class="menu_button">

<a href="index.html">    <!-- リンクを設定する<a>タグの開始 -->

<img src="links/home.gif"

onmouseover="this.src='links/home_over.gif'"

onmouseout="this.src='links/home.gif'"

                <!-- onmouseover="マウスが近づいたときに表示する画像を指定"

                onmouseout="マウスが放れたときに元の画像に戻す" -->

alt="トップぺージへのリンクボタン">

</a>    <!-- <a>タグの終了 -->

</div>

<div class="menu_button">

<a href="menu01.html">    <!-- リンクを設定する<a>タグの開始 -->

<img src="links/cake_01.gif"

onmouseover="this.src='links/cake_01_over.gif'"

         onmouseout="this.src='links/cake_01.gif'"

                 <!-- onmouseover="マウスが近づいたときに表示する画像を指定"

                onmouseout="マウスが放れたときに元の画像に戻す" -->

alt="cake01へのリンクボタン">

</a>    <!-- <a>タグの終了 -->

</div>

<div class="menu_button">

<a href="menu02.html">    <!-- リンクを設定する<a>タグの開始 -->

<img src="links/cake_02.gif"

onmouseover="this.src='links/cake_02_over.gif'"

onmouseout="this.src='links/cake_02.gif'"

                <!-- onmouseover="マウスが近づいたときに表示する画像を指定"

                onmouseout="マウスが放れたときに元の画像に戻す" -->    

                          alt="cake02へのリンクボタン">

</a>    <!-- <a>タグの終了 -->

</div>

<div class="menu_button">

<a href="menu03.html">    <!-- リンクを設定する<a>タグの開始 -->

<img src="links/cake_03.gif"

onmouseover="this.src='links/cake_03_over.gif'"

onmouseout="this.src='links/cake_03.gif'"

alt="cake03へのリンクボタン">

</a>    <!-- <a>タグの終了 -->

</div>

----------------

これでマウスカーソルを近づけるとが゛卯が変わり、話すと元の画像に戻ります。まそれぞれのボタン画像にはそれぞれのページのhtmlファイルへのリンクが設定されました。またこれでindex.htmlファイル派感性となります。ただし、リンク先のページはまだ作成していないので、続きは次回に行います。

以下はindex.htmlファイルの最終状況です。

<!-- index.html -->

<html lang="ja">

<head>

<title>森のお菓子屋さん</title>

<meta charset="utf-8">

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

</head>

<body>

<div id="main_box">

<div id="header">

<img src="links/title.png"

alt="森のお菓子屋さんのタイトルロゴ">

</div>

<div id="side_menu">

<div class="menu_button">

<a href="index.html">

<img src="links/home.gif"

onmouseover="this.src='links/home_over.gif'"

onmouseout="this.src='links/home.gif'"

alt="トップぺージへのリンクボタン">

</a>

</div>

<div class="menu_button">

<a href="menu01.html">

<img src="links/cake_01.gif"

onmouseover="this.src='links/cake_01_over.gif'"

onmouseout="this.src='links/cake_01.gif'"

alt="cake01へのリンクボタン">

</a>

</div>

<div class="menu_button">

<a href="menu02.html">

<img src="links/cake_02.gif"

onmouseover="this.src='links/cake_02_over.gif'"

onmouseout="this.src='links/cake_02.gif'"

alt="cake02へのリンクボタン">

</a>

</div>

<div class="menu_button">

<a href="menu03.html">

<img src="links/cake_03.gif"

onmouseover="this.src='links/cake_03_over.gif'"

onmouseout="this.src='links/cake_03.gif'"

alt="cake03へのリンクボタン">

</a>

</div>

</div>

<div id="content">

<div id="message">

<h2 class="main_text">大自然に囲まれた素敵なお店です</h2>

<p class ="sub_text">素材を吟味した自然の味わいを大切にした<br>

マスター自慢のパンとお菓子をお楽しみ下さい。</p>

</div>

<div id="main_picture">

<img src="links/home.jpg"

alt="象のイメージキャラクター画像">

</div>

</div>

</div>

</body>

</html>

<!-- index.html -->