読者です 読者をやめる 読者になる 読者になる

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を共有しているときなど、パスワードや個人情報…

▼trackback

トラックバックとは、ブログの機能の一つで、別にブログへリンクを張った際に、リンク先の相手に対して「リンクを張った事をはりましたよーーー」と、お知らせする機能のことです。 ブログを書いた人が別のブログの記事を参照して自分のサイトにコメントを載…

▼RSS

RSS:ニュースやブログなどウェブサイトの更新情報を簡単にまとめて データを配信する機能。 ▼下記のように、RSSには名前が同じでも複数の名称があるんです RDF site summary(RSS 0.9、RSS 1.0) rich Site summary(RSS 0.91) really simple syndication…

▼WEBカラー

今までサイトを作る上で、あまり気にしていなかった『Webカラー』ですが、 最近重要な事に気づきました!w ユーザーの多いWindowsとMacintoshの両方で、ほぼ同じように表示される可能性の高い216色を選んだものを『 Webセーフカラー 』と言います。 Webセー…

▼CSS -section-

CSS

■section■ <body> <header> <h1>私のブログ</h1> </header> <article> <h1>私のブログの投稿</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <aside> </aside></article></body>

▼display:inline▼

CSS

liは、floatでなくても横並びに出来ます★ 『 inline 』を使います!! ▼やり方 div#footer(BOX)にulでli書き出す ■HTML■ <div id="footer"> <p><small>Copyright © Sample Stylesheet Company All Rights Reserved.</small></p> <ul class="nav"> <li><a href="#">トップページ</a></li> <li><a href="#">ソリューション</a></li> <li><a href="#">実績紹介</a></li> <li></li></ul></div>

▼Photoshop ~イタリア国旗切抜き~

イタリアの国旗を用意(イタリア、白地図で検索) インデックスになっている場合、RGBモードに戻す。 消しゴムツールで余計な島を消す。 レイヤーをコピーし、目ん玉を消し、コピーしたレイヤーを自動選択ツールで余白をクリックしてBACKSPACEキーで消す。 …

▼Photoshop ~湯気~

今日は湯気作り★!! 写真を用意します。 ※このとき、開いた画像がインデックスになっているときは、モード/RGBカラーに変更します。 何もない新規レイヤーを用意、 描画色をスクリーンに。 描画色を初期設定にし、フィルター/雲模様1を適用。 ぼかし(移…

▼phpの「echo」

PHP

参考: http://wpdocs.sourceforge.jp/ よくワードプレスを作る上で少し疑問に思う事の一つ。 今日解決したので記述。 phpをうっていくとき、「echo」がつくものとつかないものがありますよね!! ▼なぜかといいますと、、、 『echo』がついているもの。 こ…

▼wordpress~次のページ、前のページ~

※リンクのデザイン 記事を新しいものから順に時系列に従ってリンクを作る場合、 webページでは「古い記事のリンクを左向き」「新しい記事のリンクを右向き」に設定するのが一般的。 古い記事へのページリンクを追加 <p class="pagelink"> </p> ※新しい記事から表示されているので、…

▼wordpress~次のページ、前のページ~

※リンクのデザイン 記事を新しいものから順に時系列に従ってリンクを作る場合、 webページでは「古い記事のリンクを左向き」「新しい記事のリンクを右向き」に設定するのが一般的。 古い記事へのページリンクを追加 <p class="pagelink"> </p> ※新しい記事から表示されているので、…

▼関数 〜WordPress〜記事の投稿日時とカテゴリを表示

関数 記事の投稿日を出力 記事の投稿時間を出力 記事が属するカテゴリを出力 記事の投稿日を表示 <p class="postinfo"> </p> 記事が属するカテゴリを表示 <p class="postinfo"> カテゴリ:</p>

PHP ブラウザに出力

PHP

▼php

PHP

PHPとは。 データを加工したり、ユーザーの入力を受け付けたりする 実行環境 Webサーバー(Apache HTTP Server) PHP(PHP:Hypertext Preprocessor) MySQL(データベース) 上記のように、HTMLの中に書くものである場合は、『?>』で閉じなければならなり…

▼favicon

今日は、よくウェブサイトでみかける、「ファビコン」の作り方についてかいていきたいとおもいます。 ↓こういうやつです まず、photoshopで16×16で基本的には四角でfaviconをつくります。 これを、pngまたはgifで保存し、 アイコン(icon)変換ツール - Favi…

〜サイト制作〜 デザインって何?

今回サイトを作っていく上で、 自分では今のデザイン、またMTGでクライアントの要望にきちんと自分が納得のいく出来になっていないため、はじめからで直す事にしました。 まず、私に今足りなくいものは”USER”のことを考える力。 プラスに考えれば、今この早…

▼opacity

CSS

今日は、バイト休み!!やった!! とりあえずちゃんとサイトを仕上げる事を目標にがんばります 今回は サイト制作をしていく中でわからない事がありすぎて調べまくったことをかいていきたいと思います ▼opacity / RGBa 要素に透過度をしていするプロパティ …

▼background-attachment/background-size

CSS

こんばんわ! 今日、授業中に進めたCSSやHTMLをですね、上書きして消してしまうという、泣きたくなるような大失態をおかしました。笑 笑い事ではない。笑 はあ、泣きたい。消したものはしょうがない。。。引きずってもしょうがないので、いや、引きずるけど…

▼text-transform

CSS

text-transform : 英語も大文字、小文字表示 を指定する際に使用。 ※単語の先頭文字だけを大文字表示することも可能。 値 ) : none 初期値!記述したとおり表示。 : capitalize 単語の先頭文字を大文字で表示。 : lowercase すべてを小文字で表示。 : upper…

This Is My Life.

昨日は、自分に納得いかなくてすごくすごく悔しかった1日でした。 どこかで逃げていた自分がいて、それを受け入れようとしなかった自分もいることをわかった上でさらに逃げていた。 誰だって、 誰だって自分の非を認めることは、 自分の嫌なところに目を向け…

▼アクセス制御

▼見られたくないページを閲覧不可にする ※サイトのルートディレクトリにindex.htmlが存在しないと、ディレクトリ内の一覧が表示されます。セキュリティ上も問題ありです。 方法: robots.txt 「robots.txt」を置き、検索の対象からはずす。 例) User-Agent:…