ボックスシャドウジェネレーター | CSS3

CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generato

CSS3でボックスシャドウがうまくつけれなくて今日はここに頼ってしまいました。

自分での記述はなかなかうまくいきませんね＞＜

アニメーションのプロパティも作れるそうです。

PHOTOSHOP VIPさんで紹介されていた2013年秋のUIエレメント

美しいUIエレメント素材まとめ 2013年秋

流行トレンドデザインを、気軽に取り入れることができ、配色の見本にしたり、Photoshopデザインテクニックの参考にしたりと、すぐれたアイテムばかりとなっています。

サイト：http://photoshopvip.net/archives/56123

補足：ユーザーインターフェース（UI）デザインとは

利用者の行動、意図を参考しインターフェースをより使いやすいようにデザインすること

一言で表すとこの一行くらいでしか説明できない私です。

wikiもIT用語辞典も、ぐだぐだ書かれてるだけでわかりやすく説明してくれるとこが少ない。

フラットデザインが流行りだからUIデザイン～みたいなのばっかでるので、気になる方は検索で色々見てみてください。（なげっぱですが、検索習慣は大事ですよ！！）

私もこの紹介された素材を使ってみようと思います。

Googleお問い合わせフォーム | send-mail裏技やり方

Googleドライブでフォーム作成

PHPでメールフォームを作るのが難しい私的に先生からsendメールも送れる様の作り方を教えて頂きました。

Googleドライブでフォーム作成

• Googleドライブを選択

• フォームを選択

入力フィールド（テキスト）を作成

• テキストを選択、「質問のタイトル」を「お名前」にする

アイテムを追加

• テキストを選択、「質問のタイトル」を「メールアドレス」にする
• エラーチェック：@が記入されない場合は、エラーを返す

アイテムを追加

• テキストを選択、「質問のタイトル」を「件名」にする

アイテムを追加

• 段落テキストを選択、「質問のタイトル」を「お問い合わせ内容」にする

「回答先を選択する」をクリック

「新規スプレッドシート」を選択し、任意のシート名を入力

• 作成

確認ページに表示する内容を記述

「回答を表示」をクリックする

「ツール」→「スクリプトエディタ」を選択

「スプレッドシート」を選択

• 以下のスクリプトを「コピー&ペースト」

function sendMailFromForm() {
    Logger.log('sendMailFromForm() debug start');

    //------------------------------------------------------------
    // 設定エリアここから
    //------------------------------------------------------------

    // 件名、本文、フッター
    var subject = "[お問い合わせ]"; 
    var body
        = "お問い合わせありがとうございます。\n\n"
        + "------------------------------------------------------------\n";
    var footer
        = "------------------------------------------------------------\n\n"
        + "後ほど担当者よりご連絡させていただきます。";

    // 入力カラム名の指定
    var NAME_COL_NAME = 'お名前';
    var MAIL_COL_NAME = 'メールアドレス';
    var SUBJ_COL_NAME = '件名';

    // メール送信先
    var admin = "admin@example.com"; // 管理者（必須）
    var cc    = "";    // Cc:
    var bcc   = admin; // Bcc:
    var reply = admin; // Reply-To:
    var to    = "";    // To: （入力者のアドレスが自動で入ります）

    //------------------------------------------------------------
    // 設定エリアここまで
    //------------------------------------------------------------

    try{
        // スプレッドシートの操作
        var sh   = SpreadsheetApp.getActiveSheet();
        var rows = sh.getLastRow();
        var cols = sh.getLastColumn();
        var rg   = sh.getDataRange();
        Logger.log("rows="+rows+" cols="+cols);

        // メール件名・本文作成と送信先メールアドレス取得
        for (var j = 1; j <= cols; j++ ) {
            var col_name  = rg.getCell(1, j).getValue();    // カラム名
            var col_value = rg.getCell(rows, j).getValue(); // 入力値
            body += "【"+col_name+"】\n";
            body += col_value + "\n\n";
            if ( col_name === NAME_COL_NAME ) {
                body = col_value+" 様\n\n"+body;
            }
            if ( col_name === MAIL_COL_NAME ) {
                to = col_value;
            }
            if ( col_name === SUBJ_COL_NAME ) {
                subject += col_value;
            }
        }
        body += footer;

        // 送信先オプション
        var options = {};
        if ( cc )    options.cc      = cc;
        if ( bcc )   options.bcc     = bcc;
        if ( reply ) options.replyTo = reply;

        // メール送信
        if ( to ) {
            MailApp.sendEmail(to, subject, body, options);
        }else{
            MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body);
        }
    }catch(e){
        MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message);
    } 
}

• 23行目の発信者のメールアドレスを変更する

「リソース」→「現在のプロジェクトのトリガー」をクリック

「プロジェクト名」を記述して「OK」

「トリガー設定されていません。」をクリック

最後のプルダウンを「フォーム送信時」に変更し、保存する

• [sendMailFromForm][スプレッドシートから][フォーム送信時]の順

承認を聞かれるので「続行」

• 「承認する」をクリックする

フォームを送信

• 「共有するリンク - 埋め込む」で、iframeソースコードを取得
• HTMLドキュメントにiframeソースコードを貼り付ける
• サーバーにアップロードして完了

3Dトランスフォームのジェネレーター｜Transforms

Transforms

文字にシャドウを簡単につけてくれたー

http://westciv.com/tools/text-properties/index.html

使いこなすのが少し難しいけど、UIデザインに便利なBootstrap

「Twitter Bootstrap」とは

本家からのDLをすれば、何か色々できます。

ほんのりしか勉強してなくて探ってないので使いこなせませんが、PC,スマホ用どちらでも大体対応でき、初心者でもいい感じのサイトを作れるって感じです。

ただ英語なので色々いじって探らないとですが・・

カスタマイズも簡単である

　カスタマイズも比較的簡単にできます。HTML5とCSSの基礎的な知識は必要ですが、その学習コストを割いてでも、いちからデザインするのに比べれば、利用するメリットは十分あるでしょう。

「コンポーネント」でリッチなUIも実装できる

　Twitter Bootstrapは一般的にCSSフレームワークとして認知されていますが、CSSフレームワークにはない「コンポーネント」の概念があります。コンポーネントの実体はjQueryのプラグインで、JavaScriptのコードを一切書かなくてもリッチなUIを作れるのが特徴です。

　HTML/CSSの初心者や、デザインが苦手なエンジニア、JavaScriptがあまり得意でないWebデザイナーにも手軽に使えますし、JavaScriptを書かずに済むので開発工数を削減できるメリットがあります。

レスポンシブWebデザインにも対応

　Twitter BootstrapではレスポンシブWebデザインもカバーされています。レスポンシブWebデザインは、スマートフォンなどでPCとは別のレイアウトを提供する手法で、デバイスの画面サイズに併せてCSSが自動的にデザインを変更します。

　レスポンシブWebデザインは、「モバイルファースト」と言われる時代では必要不可欠な手法であると筆者は考えています。Twitter Bootstrapでは基本的なレスポンシブWebデザインのテンプレートが用意されていますので、それに倣って作っていけばよいでしょう。

　このように、Webアプリケーション開発のフロントエンド全般を網羅し、CSSフレームワークの枠を超えた「フロントエンドツール」がTwitter Bootstrapなのです。

こんなに使われているTwitter Bootstrap

　すでにTwitter Bootstrapを利用して作られたWebサービスはたくさんあり、利用範囲は多岐に渡ります。

　いくつか代表的な例を紹介しますので、実際に確認してみましょう。

ドットインストール

「ドットインストール」は「3分動画でマスターする初心者向けプログラミング学習サイト」です。ドットインストール内でもTwitter Bootstrapの基本的な使い方が解説されています。

引用元：http://ascii.jp/elem/000/000/795/795948/

 本家サイト：http://getbootstrap.com/

追記参考：bootstrapに読み込むcssは自由にカスタマイズすることができる。
http://getbootstrap.com/customize/
上記にいって好きなように変更し、一番したのボタンを押すとcssが吐き出される。