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 と思い、最近よく使います笑
勝手に計算してくれるなんてすばらしい。
なんとなんと、あのTwitterやAppleのマークは、黄金比だそうで!
その他いろいろまとめてみました。↓
▼黄金比
古代ギリシアの彫刻家ペイディアスという人が初めて使った
縦と横の比は、常に 1:1,618
このひとてまがあるだけでサイトのデザインが改善されるのだそう!!
個人の仕事で作業しているWEBサイトがあるので、それにさっそくつかって見よ!
▼CSS3 #title
▼
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
テキストが自動的に多く表示されないようにする。
例えばHTML側でpに
あああああああああああああ
と書いたとしても、
「あああ・・・」と省略して表示してくれる!!
※3つで1セット!!
▼CSS3
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つしか基本使わない!
例)
<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つ用意します。
一つ目のレイヤーをフィルタ/アーティスティック/カットアウト
数値的には、髪の毛の部分だけはカンジが出るように設定。
描画モード:スクリーンに設定
コピーした2枚目のレイヤーを一番上に持ってきます。
フィルタ/アーティスティック/色鉛筆
描画モード:乗算
塗りや透明度を調整します。
次に、もう一枚のコピーしておいたレイヤーを一番上に持ってきます。
イメージ/色調補正/白黒
フィルタ/表現方法/輪郭検出
そうするとこのようになります↓
最後の仕上げです!
イメージ/色調補正/レベル補正
これで少しライトな感じに仕上げます。
最後に描画モードを乗算に!
完成です。
こちら、カットアウトを描画モードをハードミックスみすると
二階調化で得られるものより荒くなくきれいなのもがもらえるのでいいです!!
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対策の一番の鍵!!!