crossline

text-transform

 

海外のかっちょいいサイト見てる時に、このcssどうなってるんだろうーと思ってcssでふと見かけた、

「text-transform」

 

ごめんなさい、今まで見たことあるけど無視してました。

コーディングぺーぺーなのに無視してすみませんでした・・・

 

ってことで調べてみました↓

 

▼text-transformとは

英語などのテキストの大文字表示・小文字表示を指定する際に使用するうやつ。

 

text-transformの値(text-transform: □;)

・none:初期値

・capitalize:先頭だけを大文字

・lowercase:全てを小文字

・uppercase:全てを大文字

 

たぶん基本的に英語を使うサイトでは必ず使われます。

日本語は大文字・小文字関係ないもんね。

 

でも、もし以下のようにただcssを打ち込むだけで、こうなるとしたらなんかすごいなあって思います。

≪html≫

tama inoue(全部小文字)

Css

 text-transform : capitalize;

 

≪表示≫

 Tama Inoue(単語の先頭は大文字)ちなみにわたしのかわいい猫ちゃんの名前w

 

最近とってもあったかいので、もはやタンクトップに短パンにビーサンというおっさんスタイルで歩いております。大好きな冷やし中華の季節がやってくる・・・!

 

 

 

 

黄金比/白銀比

 

 

 

 

最近

知人から「黄金費/白銀比」の存在を教えてもらいました。

 

 

 

今まで目分量で作業してきましたが、バナーや、デザインを決めるときにすごく便利な事に気付きましたw

(きれいで見やすいデザインを作る上で、根拠的な方法を、「黄金比」というのだそう。)

 

 

一応、ペタリ。コレポピュラーなやつ。

http://zeller-lab.com/img-width/

 

なんかこれ楽だぞw と思い、最近よく使います笑

勝手に計算してくれるなんてすばらしい。

 

 

なんとなんと、あのTwitterAppleのマークは、黄金比だそうで!

 

 

その他いろいろまとめてみました。↓

 

 

黄金比

古代ギリシアの彫刻家ペイディアスという人が初めて使った

パルテノン神殿モナリザのビーナスにもつかわれる比。

 

縦と横の比は、常に 1:1,618

 

f:id:ishuko:20141108163122p:plainf:id:ishuko:20141108163129p:plain

f:id:ishuko:20141108163134p:plain

 

f:id:ishuko:20141108163140p:plain

f:id:ishuko:20141108163149p:plain

 

 

このひとてまがあるだけでサイトのデザインが改善されるのだそう!!

 

個人の仕事で作業しているWEBサイトがあるので、それにさっそくつかって見よ!

 

 

 

 

 

 

▼CSS3 #title

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

 

テキストが自動的に多く表示されないようにする。

 

例えばHTML側でpに

あああああああああああああ

と書いたとしても、

「あああ・・・」と省略して表示してくれる!!

※3つで1セット!!

 

 

CSS

a:after(or before){

 content: attr(title);  /*imgタグに書かれているtitleを表示させる*/

}

 

HTML

<a href="○○.html" title="○○" ><img src="img/○○.png" alt="群れをなして空を飛ぶペンギンたちのイラスト">

 

 

※aにbefore afterをつければ、テキストの(contents)の位置を上か下か一括で管理する事ができる

 

 

▼inlineとblock

 

 

display: inline;  横に並ぶ、縦横の幅指定がきかない。

display: block; たてに並ぶ

 

display: inline-block; 横に並びながらブロック要素になる

 

他にもいろいろあるが、この3つしか基本使わない!

 

 

例)

CSS

<style>

.box {

width: 200px;

height: 200px;

background: #f00;

margin: 10pxl

display: ○○○;

font-size: 30px;

}

</style>

 

 

HTML

<div class="box">1</div>

<div class="box">2</div>

<div class="box">3</div>

<div class="box">4</div>

<div class="box">5</div>

 

上記の○○○の部分を変えてみるとどのように変化するかがわかる。

 

 

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

 

 

写真をイラスト風にアレンジする方法

 

 

まず写真を用意しましょう。

今回はこちらを使用します。

 

 

同じレイヤーを4つ用意します。

 

 

f:id:ishuko:20140830212641p:plain

f:id:ishuko:20140830212645p:plain

 

一つ目のレイヤーをフィルタ/アーティスティック/カットアウト

f:id:ishuko:20140830212725p:plain

 

数値的には、髪の毛の部分だけはカンジが出るように設定

描画モード:スクリーンに設定

f:id:ishuko:20140830212900p:plain

 

コピーした2枚目のレイヤーを一番上に持ってきます。

フィルタ/アーティスティック/色鉛筆

描画モード:乗算

 

f:id:ishuko:20140830213148p:plain

塗りや透明度を調整します。

 

次に、もう一枚のコピーしておいたレイヤーを一番上に持ってきます。

イメージ/色調補正/白黒

f:id:ishuko:20140830213414p:plain

 

フィルタ/表現方法/輪郭検出

f:id:ishuko:20140830213448p:plain

 

 

 

そうするとこのようになります↓

f:id:ishuko:20140830213618p:plain

 

最後の仕上げです!

イメージ/色調補正/レベル補正

これで少しライトな感じに仕上げます。

f:id:ishuko:20140830213706p:plain

 

 

最後に描画モードを乗算に!

完成です。

f:id:ishuko:20140830213929p:plain

 

こちら、カットアウトを描画モードをハードミックスみすると

二階調化で得られるものより荒くなくきれいなのもがもらえるのでいいです!!

 

 

 

 

 

 

 

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

データベースへ格納 - Webデザイン初心者の勉強 | 求職者支援訓練 4月11日開講クラス

 

これをフォルダに作る。

 

ロリーホップで

MySQLにログイン後、新しいデータベースを作る。

inquiry;4カラム

 

code  11 aiにチェック 

name  vachar 20 int utf8_general_ci primary

email 上記に同じ

message 上記に同じ

 

自分のアドレスを書き換えて、メールを送ってみて確認。

 

以上!簡単です。

▼HTML5

 

 

 

本当の見栄えが[div]

 

アウトライン構造が[section]

 

 

意味づけのために使われるコンテンツ

”セクショニングコンテンツ”

<article>関係のない記事

※これは危険 あまり使わないように!!

<nav>グローバルナビゲーション

<section>本文

<aside>補足説明

sidebarはsectionがいいから、実質asideではない。

 

classとidは同時につけられる。

 

<body>
<section>
<h1>ページタイトル</h1>
<p>サブタイトル</p>
</section>

<div>
<section class="A" id="A">

<h2>記事タイトル</h2>
<p>記事本体</p>

</section>

<section class="A">

<h2>記事タイトル</h2>
<p>記事本体</p>

<section>
<h3>コラム見出し</h3>
<p>こらむ本文</p>
</section>

</section>
</div>

<article>
<h3>コラム見出し</h3>
<p>コラム本文</p>
</article>

</body>

 

○articleは独立させるもの

例)ブログ記事、コメント、関係のない記事※例えばsectionで<h1>野菜</h1>を書いていて、<article>で<h2>PC</h2>のことを書いていればいい。

sectionの中にいれたら、sectionでまたかこってあげなきゃいけない。

 

○囲むことは、まずdivでclass,idわけて使うこと。

 

 

※とりあえず、sectionはアウトラインを意識すること

これはSEO対策の一番の鍵!!!