lecture

Tableの使い方詳説〜HTML & CSS(1)

テーブルの記述はHTMLもCSSも面倒な設定や思う通りに行かない場合があったり、思わぬ落とし穴に悩むこともあります。 今回はテーブルについてしっかりと学習していきます。 HTMLでのテーブル関連タグの使い方 テーブル作成  >>続きを読む

Dreamweaver CC 2017.5で新しく加わったGit機能を使う方法

2017年6月にDreamweaver CC 2017にいよいよGitの機能が標準で搭載されました。さっそく使ってみることにします。 今回の記事はすでにGitの使用経験がありSorceTreeなどから乗り換えたいとお考え  >>続きを読む

Node.js入門(2)Gulpの導入と使い方

GulpとはNode.jsをベースにした開発ワークフローで苦労したり時間のかかるタスクを自動化するためのツールキットです。 Gulpでできること Sassのコンパイル コードの連結と圧縮 画像の圧縮 CSSベンダープリフ  >>続きを読む

Node.js入門(1)環境づくりと少しだけ試してみる

Node.jsのページ Node.jsについて Nodeとは何か?これは本家のページの「NODE.JSとは」のページに記述されています。 Node はスケーラブルなネットワークアプリケーションを構築するために設計された非  >>続きを読む

MySQLをコマンドで操作〜Mac編

MySQLの操作をphpMyAdminでは行ったことがあるが、コマンドでは操作できないという脱初心者向けのコマンドによるMySQLの基本操作を紹介します。 環境はMacでMAMPを使用したものです。MySQLバージョン:  >>続きを読む

Redmineのインストール方法〜Mac用

Redmineはチームでシステム開発を進める場合に誰がいつまでに何をやるのか、また現在どのくらい進んでいるのかをRedmineに記録することでタスク管理することができるオープンソースソフトウェアのツールです。 チーム作業  >>続きを読む

Photoshopの描画モードを理解する〜「乗算」を理解すれば「スクリーン」もわかる

Web素材を作成するときに、ネットや本などのチュートリアルでPhotoshopの「描画モード」を使用する事は多いと思いますが、「描画モード」の仕組みをしっかりと理解しないまま終わっていませんか。 今回はPhotoshop  >>続きを読む

スマートフォンサイトのイベント〜jQuery

スマートフォンなどのモバイルサイトを作成するときには専用のイベントが必要になります。 今回はタップ、スワイプのイベントに対応する方法を解説します。 タップイベント タップとは、画面を指先で短く1回叩くことをさします。通常  >>続きを読む

CSSで表現するブレンドモード〜CSS3

ブレンドモードは2つの画像や画像と塗りをブレンドして表現するものです。 Photoshopなどで頻繁に活用される手法ですが、CSSでも使用することができます。 background-blend-modeプロパティ 注)I  >>続きを読む

CSS3でフィルター効果をつける

フィルター効果は本来SVGのグラフィック効果として実装されました。しかし、フィルター効果はCSSからも利用することができます。 CSSでフィルター効果をつけるのは非常に簡単な上にその効果も大きくPhotoshopなどでの  >>続きを読む

animate()の使い方〜jQuery

animateの指定は2つの方法があります。 まず、一つ目の方法は入門書などで紹介されている記述方法で以下のものです。 animate(params, [duration], [easing], [callback])   >>続きを読む

バージョン管理付きNode.jsの導入方法〜Mac用

フロントエンドの開発ではNode.jsが必須になってきます。 今回はNode.jsの導入方法についての解説です。 Node.jsを導入する際に注意することは本家からダウンロードしたものをインストールするのではなく、nod  >>続きを読む

[HTML5.1] tfootの使い方が変わっています。

テーブルの構造化を行うタグ「tfoot」の使い方がHTML5.1で変更になりました。 「tfoot」は「thead」「tbody」の後に使用する事となっています。 HTML4.01時代は「thead」「tfoot」「tb  >>続きを読む

HTML5.1勧告でh1の使い方に変更〜アウトラインの作成

2016年11月にHTML5.1の勧告ではセクショニング・コンテンツ内であっても適切なランクの「heading」を使用する事とされています。 HTML5から「h1」の使い方が大きく変更されていました。 セクショニングタグ  >>続きを読む

Sublime Text3でSassとCompassを使えるようにする

SassとCompassの導入がすでに行われており、Sublime Text3でscssファイルを保存すると自動でコンパイルするための方法です。 そうするとKoalaなどを使用する必用もなく手軽にSassが使えます。 S  >>続きを読む

PythonでDeep Learning〜環境構築(Anacondaのインストール)

Pythonの基本的な使い方は別途記述することにして、ここではDeep Learningの環境構築の際に役にたったサイトや問題などを記述しています。 環境はMacOS Sierra AnacondaのバージョンはAnac  >>続きを読む

2016年6月開講クラスのシンボルマーク完成

2016年6月開講クラスの受講生によるクラスのシンボルマークができました。 テーマに基づいて3班に分かれ、矢印を基本構造としてそれぞれ以下の3点を考慮してクラスのシンボルを作成するというものです。 テーマ 「能力の再発見  >>続きを読む

GitHubで共同作業をする方法

たとえロボットであろうと、共同で作業をする場合には権限が重要だ。 それぞれのチームに属することで権限が分かれていると作業しやすからだ。 Aチームは文書を読み込むだけで、Bチームは書き込みも許可されている。 Cチームは何も  >>続きを読む

FlexBoxの使い方(6)〜flexプロパティの練習

flexプロパティの練習用サンプルを作成しました。 flex-grow、flex-shrink,flex-basisの値を入れてレイアウトを確認するものです。 値は数字の0以上の整数を入れてください。 数値入力後に「CS  >>続きを読む

FlexBoxの使い方(5)〜flexプロパティについて

flexプロパティについて解説します。 display:flexを指定したときflexコンテナはblockの性格を持ち、親要素の幅いっぱいに広がります。flexコンテナでflexアイテムをきれいに囲むためにはflexアイ  >>続きを読む

FlexBoxの使い方(4)〜display:inline-flexについて

display:inline-flexの使いどころについて解説します。 display:inline-flexについて 「inline-flex」はインラインレベルの flexコンテナボックスを生成するとCSS Flex  >>続きを読む

FlexBoxの使い方(3)〜flexアイテムの順番を入れ替え

flexアイテムの順番の入れ替えについて解説します。 flexBoxレイアウトの初期状態 flexBoxレイアウトをorderプロパティで並べ順を変えた状態 通常のflexBoxレイアウト orderで並び変えたflex  >>続きを読む

FlexBoxの使い方(2)〜整列の方法とfloatレイアウトとの違い

FlexBoxを使った整列の方法とfloatとの違いを解説します。 floatレイアウトとFlexBoxレイアウトの違い flexレイアウトの例・・・・自動で高さが揃う floatレイアウトの例・・・・高さを揃えることが  >>続きを読む

FlexBoxの使い方(1)〜display:flexについて

通常フローしたブロック要素を横並びにするにはこれまでfloatプロパティを使用していましたが、その挙動は難しくて入門者を困らせる関門でした。CSS3で定義されたFlexBoxの仕組みを使うと簡単に横並びのレイアウトが出来  >>続きを読む

可変レイアウト(Fluid Layout)作成のポイント

DogRoboの一日は朝食で始まる。 ロボットの朝食なんてオイル臭い丸薬のようなものと思うだろうが、実際はトーストと目玉焼きにカフェオレとシャレている。特にカフェオレにはこだわりがある。牛乳とマンデリンコーヒーの割合は7  >>続きを読む

ローカルリポジトリとリモートリポジトリについて〜SourceTreeでGitを使う

ローカルリポジトリとリモートリポジトリ リポジトリとは、ファイルやディレクトリの履歴を管理する場所のことです。 自分のパソコン内でバージョン管理するために作成したリポジトリ(Gitで指定したフォルダ)をローカルリポジトリ  >>続きを読む

ボーダーに画像を使う方法〜CSS3

画像が使えないボーダーなんてジャムを入れない紅茶のようなものだ。 ボーダーに画像を適用するには border-image-sourceプロパティで画像を読み込んで、border-image-sliceで幅を指定すればよい  >>続きを読む

マルチカラムレイアウト 段組の作成〜CSS3

一般的にWebで読みやすい行の長さは、約30文字から45文字前後くらいといわれています。具体的な文字数の根拠は不明ですが、あまり長すぎる行は読みにくい傾向になります。 *「ブログデザインを考える:1行の字数とWEB幅」に  >>続きを読む

パターンの作成のまとめ〜Photoshop と Illustrator

Photoshop CC(2015.5)とCapture CCを活用してパターン作成 Adobe Capture CCは写真を撮影するだけで、色、形、ブラシ、パターンなどの素材を作成することができます。 スマホなどのモバ  >>続きを読む

Google Analyticsを使ったABテスト

GoogleAnalyticsでは「ウェブテスト」という機能があります。この機能を使用することでABテストを実施することができます。 「ウェブテスト」という機能を使用すると、ある指定のページを表示させると正規のページとテ  >>続きを読む