» METALLIC RATIO で美しいwebサイト|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

METALLIC RATIO で美しいwebサイト

スタッフブログ

  • 2017.03.15

    METALLIC RATIO で美しいwebサイト

    顔アイコン
    web設計 イメージ写真

    ども、最近?おデブ化が止まらない・・・
    中原です・・・orz

     

    今回は、METALLIC RATIO(黄金比等)でのホームページ制作についての記事になります。

     

    METALLIC RATIOマスターすれば、美しい比率で、お客様からのWOW!を頂けること請け合いですよ~

     

    ——————————–

     

    まずは、便利サイトの紹介から

    METALLIC RATIO / 貴金属比 [黄金比・白銀比などを計算]

    http://voidism.net/metallicratio/

    これは便利なので、お気に入り登録、推奨です( ..)φメモメモ

     

    ・・・詳しく調べてみると、自分より詳しく書いている記事があったので
    説明は割愛です(-ω-)/ <セツメイ キジノランリツハ ヨクナイ

     ざっくり書くと、貴金属比を選んで、縦か横に数字をいれたら、その貴金属比が表示されます。

    ——————————–

     

     

    ここからは、コーダー向けの記事になります

     

    自分がコーダーになってから、印象に残っている言葉があるのですが

     

    コーディングする時、意識して欲しい点が3

     

    まず迷ったとき、最初にそれは、美しいスマートかで判断すること

     

    美しいかスマートで迷ったときは、面白い面白くないかで、判断し、

     

    最後に正しい正しくないかだ

     

     

    ———————————————

     

    意味は、正しいか正しくないは、時代の流れで、間違いになり、面白いものは、半永久的に残り、人々に印象を与える、
    美しいものは、後世に伝わっていくだそうです。

     

    自分はこの壮大な言葉が好きで、このことを実践して、日々を生きています。

     

    なので、空間や貴金属比関係の記事は大好きなのです!!
    ホームページがドンドン美しくなっていくのが好き!

     

    (^^)/< イイキジガ アレバ オシエテクダサイ

     

    ———————————————

     

    そして、突然のQAタイム|д゚) wow!!

     

    Q. アババイさんも METALLIC RATIO で美しいホームページを作っているの?

    A. もちろんです!

     

    もしかしたら、気づいている人もいるかもしれませんが|д゚)< ホントニ キズイテル?
    中原がコーディングしている、システム吐き出しの画像は、黄金比、白銀比、3:4で出来ています。

     

    Q. スマホ等のときはどうしてるの?

    A. imgLiquidsass(mixin使用)google chrome 検証を使い揃えています!

     

    知っている方も多いと思われますが、

     

    jQuery 【imgLiquid
    http://kwski.net/jquery/1077/

     

    を使用して画像のアスペクト比を保ち、iphone 6 plus , iphone 6 , iphone 5 の高さをsassに計算してもらい貴金属比をだす方法をとっています。

     

    METALLIC RATIOの便利サイトを参考に、作成したスマホのコード(白銀比が多いので白銀比)を掲載します。(sassのmixinです)

     

     

    mixin

    @mixin fit-set-s($fit, $fit02, $fit03) {
     $fit-pic: ceil($fit / 1.414);
     $fit-pic02: ceil($fit02 / 1.414);
     $fit-pic03: ceil($fit03 / 1.414);
     height: #{$fit-pic}px;
     @media screen and (max-width: 380px) {
     height: #{$fit-pic02}px;
     }
     @media screen and (max-width: 330px) {
     height: #{$fit-pic03}px;
     }
     }
    

    sass mixinの呼び出しコード(機種ごとの白銀比したい横幅を入れる)

    @include fit-set-s(375, 316, 270);
    

    imgLiquidの読み込みコード(jsとjQueryは読み込んでね)

    <script type="text/javascript">
    $(document).ready(function() {
        $(".fit").imgLiquid();
    });
    </script>
    

    imgLiquidで指定したcss(ここでは.fit)にsassのmixinを呼び出します。

    #hogehoge .fit{
     @include fit-set-s(375, 316, 270);
    }
    

     

    右から iphone 6 plus , iphone 6 , iphone 5の高さになります。
    横幅がパーセント表示などで固定できてない場合は、アナログですが
    google chrome の検証(F12)でiphone 6 plus , iphone 6 , iphone 5モード
    で画像の横幅の値を取得し、横幅をいれると

    しくなりますぞ(/・ω・)/

     

    でわでわ 美しいデザインライフを~(-ω-)/

     

    こんな読みづらい記事を読んでくれてありがとうございますm(__)m

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

カレンダー

2017年11月
« 10月    
 12345
6789101112
13141516171819
20212223242526
27282930  

アーカイブ

MENU

求人情報本社・広島オフィス

お問い合わせ

ページの先頭へ

お問い合わせ

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス