lecture

CSSでカラムの作成方法〜floatとdisplay:tableの活用

CSSを使ってカラムを作成する復習です。 自分なりにいろいろなカラムを作るパターンを作成しておくとよいです。 フロートを使った固定レイアウトのカラム 固定レイアウトのカラムはPC用のレイアウトでかつて多く使用されたパター  >>続きを読む

Git入門(5)〜ブランチとマージそしてコンフリクト

今回の内容で特にマージをした時にコンフリクトを起こしてしまう状況を考えてみます。 Git初心者で実務でコンフリクトを起こすと焦ってしまうに違いありません。日頃からGitを使い倒しておくと焦ることはないでしょう。 ココは何  >>続きを読む

Git入門(4)〜GitHubで共有する

GitHubはリモートリポジトリと多くのWebツールを提供してくれるオクトリンク社のサービスです。ソフトウエア開発にとどまらず Web制作でも活用されるようになっています。無料で使えるプランは公開リポジトリのみです。 G  >>続きを読む

Git入門(3)〜Bitbucketで共有する

Bitbucketについて Bitbucketはアトラシアンが運営するプライベートリポジトリを無制限に持てる無料アカウントを提供しているサービスです。 無料アカウントの場合、5 ユーザーまで使用できます。GitHubとの  >>続きを読む

Git入門(2)〜SourceTreeの使い方

前回はコマンドでGitの仕組みを見てきました。今回はGUIのアプリケーションSourceTreeの使い方を学習します。 ローカルでのバージョン管理を行う上で必須の作業は次の3つです。 ローカルリポジトリの作成  git   >>続きを読む

Git入門(1)〜Gitの導入とおおまかな仕組み

Gitはバージョン管理をするための分散型バージョン管理システムです。 日頃からソースコードの変更履歴を記録・管理するくせをつけておくと、会社などの実務に入ってから戸惑うこともなくなると思います。 バージョン管理は大切な共  >>続きを読む

jQueryのトラバースの使い方

jQueryメソッドを使用してDOMの中を移動して要素を取得する方法をトラバースといいます。トラバースでできることの多くは子孫セレクターを活用すれば可能です。トラバースを使用するとパフォーマンスが良くなるといわれることが  >>続きを読む

アクションパネルで自動処理と一括実行そしてドロップレット〜Photoshop

実務上では多くの画像を一括でサムネイルサイズに変換したいなどの要望が出てきます。単純作業はできるだけ自動化して効率をあげましょう。 Photoshopでは単純作業的なアクションは自動化することができます。その手法はエクセ  >>続きを読む

CompassをインストールするMac OS X El Capitan編 〜Sass(7)

CompassはSassを利用したCSSフレームワークです。導入はちょっと面倒ですが、うまく導入できるとCSSがすごく楽に書けるようになります。 Compassでできることは、ベンダープレフィックスなどの複雑なCSSを簡  >>続きを読む

Sassのミックスイン 〜Sass(6)

Sassのミックスインは関数的な働きをするもので、引数で指定した値を利用しながらスタイルを柔軟に定義できます。 ミックスインは「@mixin」で定義をして、「@include」で呼び出しをします。 ミックスインの書き方   >>続きを読む

Sassの演算と関数 〜Sass(5)

演算 Sassでは四則演算を行うことができます。それぞれ次の記号を使います。 加算 + 減算 - 乗算 * 除算 / 除算だけは計算式を丸括弧()で囲みます。fontプロパティで使用する記号がバッティングするための処置の  >>続きを読む

Sassの@import 〜Sass(4)

SassではCSSと同様に複数のscssファイルを@importを使ってインポートすることができます。 更に便利な機能としてパーシャルという機能があります。これは複数のscssファイルをインポートして、余計なCSSを作成  >>続きを読む

Sassの変数 〜Sass(3)

Sassでは変数を使用することができます。グローバル変数の仕様がSass v3.4から大きく変更されていますので注意してください。(この記事はSass 3.4.19で確認した内容です ) 変数の宣言は$の後に変数名を書き  >>続きを読む

Sassのネスト 〜Sass(2)

子孫セレクタをSassで書くにはネストで記述します。最近のCSSの書き方として、深い階層の子孫セレクターを使用した記述は敬遠される傾向にあります。そのためネストの恩恵は子孫セレクターよりも後述するメディアクエリなどの方が  >>続きを読む

Sassの導入 〜Sass(1)

Sass(Syntactically Awesome Stylesheets)はCSSを拡張したメタ言語です。 機能を拡張してより効率的にCSSを書けるようにするものです。 具体的には、変数や関数をはじめ、演算、条件分岐  >>続きを読む

CSS3の新しい単位〜vhとvw

CSS3ではビューポートを基準にした単位vhとvwが導入されました。地味ですね、単位ですから。けれどもこれのおかげで色々なことが簡単にできるようになります。 例えば次の例のように各セクションをブラウザいっぱいに広げること  >>続きを読む

ベーシック認証の設定方法

ベーシック認証とは 基本認証とも呼ばれる、最も簡単な認証方法の一つです。 Base64という印字可能な64種類の英数字(A-Z、a-z、0-9)のみを使用してエンコードするため、改ざんが容易であるなどセキュリティ面で問題  >>続きを読む

スマートフォン用ドロワーメニューの作成方法〜レスポンシブ対応編

スマートフォン用のドロワーメニューの簡単な例は前回紹介しましたが、少し複雑な動きに対応させるには多少問題があります。 今回は起こり得る問題点と解決方法について考えてみます。サンプルとして前回使用したドロワーメニューを使用  >>続きを読む

スマートフォン用開閉メニューの作成方法

スマートフォン向けのサイト作成の時に定番的に使われている開閉式のナビゲーションの作成方法です。今回は縦方向の開閉と横方向の開閉(ドロワーメニュー)の基本的な仕組みの解説です。 jQueryとCSS3を使用した作成方法です  >>続きを読む

レスポンシブサイトの切り替えポイント〜javaScript

レスポンシブサイトを作成するときに、javascriptで切り替えポイントを認識させる方法の説明です。 javascriptですからjQueryでも使用できます。 CSSメディアクエリによる切り替え まずは、CSSでのメ  >>続きを読む

CSS3のtransitionで使えるイベント〜transitionのトリガー

transitionアニメーションを実行するには何らかのトリガー(イベント)が必要です。通常は:hoverが使用され、マウスがホバーすると簡単なアニメーションを行ったりします。けれどもトリガーになるのは:hoverだけで  >>続きを読む

Bootstrapの使い方(9)〜カルーセルを使う

Bootstrap4の公開も間近になりましたが、今回はBootstrap3を使ってカルーセルを適用する方法です。カルーセルとはメリーゴーランドの意味があります。一般的にはスライドショー的なものが多いです。 カルーセルの善  >>続きを読む

キーフレームでアニメーション〜CSS3

トランジションアニメーションはプロパティの値を疑似クラスなどで変化させることがトリガーになって開始されます。ところが、ページが開いたら自動でアニメーションをさせたい場合などはトランジションアニメーションが使えません。この  >>続きを読む

Webフォントの使い方

フォントはユーザーのパソコン環境に依存しますので好みのフォントを指定してもほとんど無駄でした。 ところが、Webフォントの仕組みができてからは特定のフォント指定に明るい兆しとなったわけです。 今回は自分のサーバーにフォン  >>続きを読む

PHP基礎 (16) ファイルのアップロード

ファイルをアップロードするには、スーパーグローバル変数「$_FILE」でファイルを受け取り、PHPが一時的に保存した場所からmove_uploaded_file()関数を使用して本来の保存先へ移動をします。 テンポラリフ  >>続きを読む

Webサーバーのパーミッションの設定〜ユーザー権限の考え方

パーミッションの設定でchmodeの使い方とかrwxの使い方だったらネットにもたくさん出てきますが、ユーザー(所有者)、グループ、その他の使い分けについての説明があまりされていません。今回はWebサーバーのパーミッション  >>続きを読む

PHPの配列のまとめ〜PHP

配列の基本的な作成方法はPHP基礎の記事も参考にしてください。 PHP基礎 (06) 配列 ここではもう少し詳しく配列の操作方法を学習します。 PHPの配列作成方法 インデックス配列の基本的な書き方は、空の配列をarra  >>続きを読む

正規表現の使い方の練習〜JavaScript編

正規表現でreplaceする replace関数を使って正規表現の使い方を覚えるために簡単なスクリプトを書きました。 replace(検索文字列 , 置換文字列 )を使用して文字を置換します。 プルダウンメニューで選んだ  >>続きを読む

Xdomain無料サーバーのftp設定方法〜WordPress用サーバー

Xドメインの無料サーバーのWordPressサーバーの使い方です。 ログインして管理パネルに入ります。 左側のナビゲーションの無料レンタルサーバーをクリックします。 初めてWordPressの設定をする場合は「ご利用状況  >>続きを読む

Xdomain無料サーバーのftp設定方法〜HTMLサーバー・PHPサーバー編

無料のレンタルサーバーは基本的に広告が付きます。けれども、テストサイト用とか練習用にはこれで十分です。 Xdomain無料サーバーにはPHPやMySQLが使用できます。 つまりWordPressもインストールできるという  >>続きを読む