Author Archives: %s

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 により、背景色を付けることが出来る。

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

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

ボックスサイズの計算

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

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

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

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

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

ボックス全体の横幅

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

ボックス全体の高さ

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

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

Read More…

絶対パスと相対パス

01 10月 16
Kazu

No Comments

 

パス

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

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

Read More…

[ jQuery ] 基本、基礎知識

15 8月 16
Kazu

No Comments

 

jQueryとは?

jQueryとは、John Resig(ジョン・レッシグ)氏によって開発されたJavaScript 軽量ライブラリの一つである。

JavaScript と同様、ブラウザ側で動く、クライアントサイドのプログラムである。

jQuery を使えば、JavaScript のコードを、CSSのように簡単に書ける。

モットー

“Write Less, Do More.” (よりシンプルなコードで、より沢山のことを。)

複雑な操作も簡単に書けるのが特徴である。

Read More…

[Windows開発環境構築]XAMPPのインストールと設定、セキュリティ、使い方、トラブル対処

14 10月 14
Kazu

No Comments

 

ローカル環境に開発環境を構築

XAMPPとは?

ローカル上に、Webサーバーやデーターベースを構築し、PHP ,MySQL ,Perlを利用できる環境を簡単に構築できる無料のソフトウェア。

XAMPPやMAMPを導入すると、レンタルサーバーと同じような環境を手元のPCに構築できる。

Windowsだけではなく、Linux や Mac 用もあります。

Macの場合、僕には、XAMPPの設定は難しかったです。
Mac用には、MAMPというものがあり、以前、記事にしました。

MAMPのインストール、設定、使い方 for MacINTERNET HACK | INTERNET HACK.

Webブラウザは、PHPなどを理解できないので、PHPスクリプトを実行できない。

一方、PHPサポート付きのWebサーバは、PHPコードを理解し、スクリプトを実行できる。

そのため、PHP試作などにおいて、実行結果を確認するためには、ローカル上にWebサーバを構築する必要がある。

プログラムを動かし、エラーが出る、上手く動作しない、プログラムを修正し、再び、動かしてみるの作業を繰り返す。

Read More…

Webレイアウトの構成要素

29 5月 14
Kazu
No Comments

 

 Web ページの共通要素

  • ヘッダー
  • ナビゲーション
  • キービジュアル
  • コンテンツ
  • サイドバー
  • フッター
  • ユーザー登録などのユーザーにアクションを求めるもの。

構成要素とレイアウト01

 

上のサイトは、このINTERNET HACKの1ページ当たりの記事数を少なくして、少し圧縮したものです。
ほとんどのWordPressのテーマは、このようになっているかと思います。

Read More…