crossline

6 Trend Design -2015

皆様わかっているように、別にデザインするときにトレンドに従えなんてだれも言わない! でも、トレンドを知っておいて損はないしデザインの引き出しが増えますよね☆ 以下、2015年のトップ6のトレンドです。 http://www.creativebloq.com/6-image-trends-de…

Mac OS X 最新版”EI Captain”

Macからまた新しいOSが出たとのこと... この前Yosemiteにしたばっかだったはずなのになあw 早いなー。 新しいやつは「EI Captain」っていうらしい。 【新機能】 ・Spotlightの検索機能が改良 ・アプリ内の検索機能の強化 ・Split Viewという画面上でアプリを…

UI/UXデザイン

※UIデザインとは- User Interface(ユーザーインターフェイス)はインターフェイスを通じて目に見えない機能を視覚的にみて操作してコミュニケーションする。ユーザとデジタル機器とのコミュニケーションがうまくできるように手伝ってくれるOS/アプリ画面な…

Vim

※Vimとは --プログラマに人気の高いエディタの1つ。 UNIX系オペレーティングシステムで長らくデフォルトインストールされてきたエディタで、システム管理や設定ファイルの編集などに使われることが多かったらしい。 ワープロとは操作方法が全く違くて、基本…

Node.js ~Git インストール~

まずこちらから「Homebrew」をインストール Homebrew — OS X用パッケージマネージャー 黒い枠の中身をコピペ。 $ brew doctorを実行し、結果が、Your system is ready to brew.であれば 成功! ===========================================================…

npm

======================================================= ・npmとは Node.jsのモジュールを管理するためのツール。 (これは、Node.jsをインストールした直後から、必ず使う事になるもの!) Node.jsには様々なモジュールが公開されており、npmを使う事で…

Sass ~Grunt~

Sassをコンパイルしてくれるものが「Grunt」 あれ?そしたら「Koala」ってどうなの?って思うけど、これもコンパイルするためのもの。なにが違うか、と言えば、 「imgも加工できるか。」的なとこです。 だから、「Koala」はコンパイルだけするならOK。だって…

Git 〜コミット〜

=================コミット================= リポジトリ(通称リポジトリ:わたし命名) コミットとは、ファイルやディレクトリの追加・変更を、リポジトリくん(ファイルやディレクトリ・履歴を記憶する場所)に記録するための操作です。 コミットは、時系…

Git

git

===========Gitとは============= Gitとは、バージョン管理システムの一つです。 Gitでは、ファイルの状態を好きなときに更新履歴として保存しておくことができます。 一度編集したファイルを過去の状態に戻したり編集箇所の差分を表示したりすることができ…

Sass Koalaインストール

--Sassインストール-- ・「sudo gem install sass」と入力してreturn ・管理者パスワード入力してreturn 完了!いーじーぴーじー --GUIソフトをインストール-- ※ウェブブラウザでは、CSSはそのままでも分かってくれるけど、 Sassはそのままの状態で表示でき…

Sass メモ

======================================================== 〜Sassとは〜 http://sass-lang.com/ サス・Syntactically Awesome Stylesheets(←直訳:構文的にめっちゃすごいスタイルシート) ざっとまとめると、「CSSのコーディングをより便利にするモノ」…

アイディアマン

最近公開された映画で「脳内ポイズンベリー」っていうのあるんですが。 https://www.toho.co.jp/movie/lineup/poisonberry.html 〈ポジティブ〉〈ネガティブ〉〈衝動〉〈記憶〉〈理性〉 脳内で感情を現すものを5人の擬人化に例えて、主人公の脳内を「脳内会…

2015 trend for Web design

やっぱり外人さんの書いたブログなんかを見ているとやっぱり感覚も感じ方もまったくちがってユニークだなあ感じますー。 なんか常に最新のものができて流行りが変わって、日本エレキテル連合とかもういないのかな・・・とかてかすぎちゃんは?って悲しくなる…

jQuery -noConflict()-

かなり嬉しい瞬間ナンバーワンとも言える... 自分でバッティングを解決できたときのあのテンションでの投稿です。 でもよくバッティングとか多いんですよね...ほんとに気持ちいいくらいバッティングすることありますよね... そのときなぜか意地を張ってでも…

text-transform

CSS

海外のかっちょいいサイト見てる時に、このcssどうなってるんだろうーと思ってcssでふと見かけた、 「text-transform」 ごめんなさい、今まで見たことあるけど無視してました。 コーディングぺーぺーなのに無視してすみませんでした・・・ ってことで調べて…

黄金比/白銀比

最近 知人から「黄金費/白銀比」の存在を教えてもらいました。 今まで目分量で作業してきましたが、バナーや、デザインを決めるときにすごく便利な事に気付きましたw (きれいで見やすいデザインを作る上で、根拠的な方法を、「黄金比」というのだそう。) …

▼CSS3 #title

CSS

▼ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; テキストが自動的に多く表示されないようにする。 例えばHTML側でpに あああああああああああああ と書いたとしても、 「あああ・・・」と省略して表示してくれる!! ※3つで1セット!…

▼inlineとblock

CSS

display: inline; 横に並ぶ、縦横の幅指定がきかない。 display: block; たてに並ぶ display: inline-block; 横に並びながらブロック要素になる ※他にもいろいろあるが、この3つしか基本使わない! 例) CSS <style> .box { width: 200px; height: 200px; backgrou</style>…

▼Photoshop〜写真をイラスト風にアレンジ〜

写真をイラスト風にアレンジする方法 まず写真を用意しましょう。 今回はこちらを使用します。 同じレイヤーを4つ用意します。 一つ目のレイヤーをフィルタ/アーティスティック/カットアウト 数値的には、髪の毛の部分だけはカンジが出るように設定。 描…

Formをデータベースに格納する

データベースへ格納 - Webデザイン初心者の勉強 | 求職者支援訓練 4月11日開講クラス これをフォルダに作る。 ロリーホップで MySQLにログイン後、新しいデータベースを作る。 inquiry;4カラム code 11 aiにチェック name vachar 20 int utf8_general_ci p…

▼HTML5

本当の見栄えが[div] アウトライン構造が[section] 意味づけのために使われるコンテンツ ”セクショニングコンテンツ” <article>関係のない記事 ※これは危険 あまり使わないように!! <nav>グローバルナビゲーション <section>本文 <aside>補足説明 sidebarはsectionがいいから、実質asideで</aside></section></nav></article>…

▼photoshopでアメコミ風画像に加工

今日は前からやってみたかったホップでかわいく仕上がるアメコミ風のやり方をメモメモ。 ▼まず始めにイラストを用意 色が鮮やかだとさらにいいかも。 (※レイヤーはCnt+Eで結合しておく。その他にバックアップとしてレイヤー結合前のものをグループ化しても…

▼photoshopでvintage風な写真

vintageだとかレトロだとか、そういう雰囲気が大好きなあたしがphotoshopでなにかできないかなって白田らいっぱい出てきたので! めもめもします。 まず写真を用意↓ ①0をクリックしてから、トーンカーブ:グリーン/37, ブルー/131を入力 ②レベル補正:RGB …

▼positionを使って真ん中にする

CSS

以外とわからなくなるpositionを使った真ん中にする方法。 シンプルです!! 例)div class がboxの長方形、 縦100px 横200pxの場合。 .box { position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; } ポイントとしては、「真ん中…

▼CSS3でアニメーション

CSS

CSS3を使ったアニメーションのバナーを作成。 まず、Photoshopで素材を作ります。 わたしはこんな感じのを作りました。 ※文字をくりぬき、または画像の一部を切り抜いてすけるようにします。このとき、pngで保存を忘れずに!! これは文字と香水の液の部分を…

▼CSS3で縦書きをする

CSS

CSS3で縦がきに出来る!実践してみます。 ですが、これはなぜかChromeとIEには対応していて、Firefoxには対応していません。 なので、なんとか見栄えが良くなるよう、振り仮名を振って横書きでも見やすいようにします。 まずHTMLで <ruby></ruby> <rt></rt> <rp></rp> を使って以下のように…

▼Steve Jobs 「 stay hungry stay foolish 」

やるか、やらないか。 やった人がSteve Jobs。 ただそれだけ。 Steve Jobs&#39; 2005 Stanford Commencement ... Apple CM &quot;ThinkDifferent&quot; in Japan - YouTube

▼gifアニメーション 編集・プリセットマネージャーで一括管理できるので、 ブラシもグラデーションも気軽に使えちゃいます!! 500×200で、好きな文字、またはシェイプツールを使って何かかく。 全て結合したら、 ウィンドウ、アニメーションを選択。 文字レ…

▼gifアニメでバナー作成

200×200で作成します。 保存版!Photoshop用無料グラデーション750個+まとめ - Photoshop VIP ここからグラデーションをダウンロード デスクトップに展開してから、ダブルクリックすると、そのままphotoshopのグラデーションプリセットに追加されます。 ▼今…

▼シークレットモード

最近Google Chromeに「シークレットモード」という機能があることをはじめて知ったので調べてみました★ シークレットモードとは、 閲覧履歴を残したくないとき PC画面を人に見せなくてはいけないとき、友達をPCを共有しているときなど、パスワードや個人情報…