Author Archives: Kazu

神戸写真ギャラリーまとめ

01 5月 17
Kazu
No Comments

 

[mappress mapid=”6″]

 

誰でも写真を撮り、SNSに投稿する時代となりましたが、時には、フォト・ギャラリーで、本物の写真に触れてみてはいかがでしょう。

今回は、神戸でのフォト・ギャラリーを特集してみました。

Read More…

Alternative WordPress Blog オープンソース比較まとめ

08 3月 17
Kazu

No Comments

 

現在、WordPress とは別のCMSを探しています。

WordPress は、PHPで作られており、重く、非常に多機能過ぎて、シンプルに使いにくいです。

この記事は、そのために、参考記事を訳しながら、整理したものです。

使用感想も追加していくかも知れません。

WordPress、Drupal 、Joomla の共通点

  • PHP で書かれている。
  • MySQLをサポート。
  • プラグイン、モジュール、テーマとテンプレートのシステムを装備。
  • オープンソースソフトウェアである。

Read More…

[ぶらり神戸散歩] 夙川散策

30 12月 16
Kazu
No Comments

 

夙川散策-4

梅田に行く途中、来春の下見を兼ねて、夙川へ行って来ました。

休日に、夙川駅の海側(南側)の通りのパブみたいなところを訪れると、皆さん、昼間からお酒を飲んでるのか、盛り上がってました。

Read More…

SOHO,在宅ワークのマッチングサイト厳選8選

27 11月 16
Kazu
,
No Comments

 

この記事は、「在宅ワーク webデザイン」などで検索し、その中から得られた記事を取捨選択した記事をもとに、8年前にデジハリ・オンラインスクールで学んだもの、その頃、考えていたことを元に構成されています。

Web制作を中心に紹介していますが、「ブログ記事執筆」、「サイトへのライティング」の他、ごく簡単な依頼もあります。

なので、仕事さえきちんと収めれば、主婦の方やサラリーマンの副業にも応用できます。

最近では、写真撮影・編集のほか動画作成・編集などのマルチメディアの仕事の依頼もあります。

Read More…

[CSS] ボックスモデル

24 10月 16
Kazu

No Comments

 

ボックスモデル

全てのHTML要素は、CSSで「ボックス」と呼ばれる「四角い領域」として扱われる。

content (コンテンツ領域)に、テキストや画像などの要素の内容が表示される。ボックスモデル

 

ボックスモデルの構成要素

その内側から、padding (パディング)、border (境界線)、margin (マージン)と外側へ領域を持つ。

  • コンテンツ領域(width, height プロパティ)
  • padding (内側の余白)
  • border (ボーダー)
  • margin (外側の余白)

width, height プロパティで指定できるプロパティは、コンテンツ領域を指定できるプロパティであって、ボックス全体の横幅や高さを指定できるプロパティではないことに、注意。

ブラックボックスの前後は改行され、上から下へ配置される。
width,height,上下左右の margin, padding が指定できる。

インラインボックスは、改行は入らず、左から右に横方向に配置される。
基本的に、width,height,上下の margin は指定できない。

border の内側に、background-color により、背景色を付けることが出来る。
背景色が付くのは、width,height,padding までの領域で、margin の領域には背景は付かない。

border (境界線)には、太さ、線種、色を指定できる。

width,height は、コンテンツ領域を設定し、border,padding が存在する場合は、見た目の幅と width,height が一致しない。

ボックスサイズの計算

ボックスサイズの計算は、レイアウトを組む際の基本となる。

ボックスサイズの計算方法

レイアウトなどで計算する場合、

  • padding:要素の中の余白
  • margin:要素の外の余白

と把握すれば、イメージしやすい。

ボックス全体の横幅

ボックス全体の横幅 = コンテンツ領域の横幅 width + 左右のマージンの幅 + 左右のパディングの幅 + 左右のボーダーの太さ

ボックス全体の高さ

ボックス全体の高さ = コンテンツ領域の高さ + 上下のマージンの幅 + 上下のパディングの幅 + ボーダーの太さ

レイアウトを組む場合、正しく計算し、width を割り出さないと、カラム落ちが起きてしまう。

Read More…

主なセレクタの指定方法

23 10月 16
Kazu

No Comments

 

CSSの記述法

CSSの基本書式

p {color:red;}

セレクタ

具体的に、どの箇所にCSSを適応させるのかを明確に指示させるもの。

Read More…

絶対パスと相対パス

01 10月 16
Kazu

No Comments

 

パス

ファイルを置いている場所。

パスの指定方法には、絶対パスと相対パスがある。

Read More…

Webで扱う画像の形式

01 10月 16
Kazu

No Comments

形式 GIF JPEG PNG−8 PNGー24/32
色数 最大256色 フルカラー 最大256色 フルカラー
圧縮方法 可逆圧縮 非可逆圧縮 可逆圧縮 可逆圧縮
圧縮率
透過機能 ×
アルファチャンネル × ×
アニメーション × × ×

JPEG

jpeg

主に写真を保存する際に用いられる。

24ビット(1670万色)まで扱える。

イラストには不向き。

ファイルサイズを下げると、見た目にも画像の劣化が発生する。

主な用途

写真、グラデーション

特徴

24ビット(1670万色)まで扱うことができる。

グラデーションのように、色調を連続して変化させることができる。

圧縮で画像が劣化する。

不可逆圧縮。

圧縮で捨ててしまったデータは元に戻すことができない。

・JPEG のファイル容量を抑えるには?

コントラストを下げる。

Read More…