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  >>続きを読む

:nth-child練習ページ・jQueryセレクタ練習ページ作成しました。

:nth-child練習ページとjQueryセレクタ練習ページを作成しました。 :nth-child練習ページの使い方 :nth-child練習ページ Lesson1 li要素を10個用意しています。 各li要素はfle  >>続きを読む

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

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

CSSのpositionでtop bottom left right全て指定した結果

CSSでpositionプロパティでabsoluteを指定した上で座標の指定をtop bottom left right と四方向すべてに対して行ったとしたらどうなるでしょうか。 結果はサンプルのとおりになります。 to  >>続きを読む

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

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

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

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

さくらサーバーの日本語Webフォントを使う方法と本文に対応させる方法

さくらのレンタルサーバでなんとモリサワの日本語Webフォントが使えるサービスが始まりました。 とりあえずはWordPressのプラグインで使えるようになっています。(月間PV2.5万以下が対象ですが、現在(2016/7)  >>続きを読む

PhotoshopCC(2015.5)選択とマスクのワークスペースを使う

PhotoshopCC(2015.5)の新機能「選択とマスク」を使うと細かい選択作業が軽減されます。 今回は朝顔の写真と青空の写真を「選択とマスク」を使用して合成します。 完成例 元写真(朝顔) 元写真(青空) 旧バージ  >>続きを読む

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

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

Photoshop CC 2015.5の「ゆがみ」を使う

Photoshop CC 2015.5の「ゆがみ」で人物の顔を修正してみたところ、これは優れものです。 あまりにも簡単な操作で良い結果を得ることができます。 画像をPhotoshop CC 2015.5で開いたら、メニュ  >>続きを読む

Bracketsの使い方

Sublime Text だの Atom だの便利なエディタがほとんど無料で使用できる中、Dreamweaverの存在価値が無くなってきていました。 そんな中突如 Dreamweaver CC 2017(Beta)が姿を  >>続きを読む

スターツールがクモヒトデみたいになった場合の対処法〜Illustrator

スターツールには第1半径と第2半径の2つの半径が存在します。 第1半径が星の中心から尖った先までの長さで、第2半径が中心から内側にくびれたところまでの長さです。 command(ctrl)キーを押しながらドラッグすると第  >>続きを読む

Photoshop で動作がおかしい場合の対処方法〜環境設定ファイルの再作成

Photoshopを使用していて何か不審な動きをするときの対処方法です。 Photoshopを長く使っていると、選択ツールやレタッチを行うときに思わぬ挙動をする場合があります。 例えばコピーツールを使用したときに、うまく  >>続きを読む

Google Mapのスクロールを止める方法

Google Map共有機能の「地図を埋め込む」を使って、サイトにMapを表示する場合iframeが使用されます。 簡単に導入することができて便利に使えますのでさまざまなサイトで活用されています。 ところが、ひとつ問題点  >>続きを読む

Google Analyticsを使ったABテスト

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

Koalaの使い方〜Sass

KoalaはSassをGUI環境で使うことができるコンパイラです。デザイナーさんはコマンド操作よりも、こちらの方が使いやすいかもしれません。 ここではKoalaの使い方を学習します。 Koalaのインストール(Windo  >>続きを読む

Git〜リモートリポジトリから必要なブランチをローカルに取得する方法

Gitのリポジトリをローカルにクローンしても全てのブランチが取得されるわけではありません。 sourceTreeを使用して必要なブランチをローカルに取り込む方法の紹介です。 各ブランチはローカルに取り込まれていませんが、  >>続きを読む

MacOS X El CapitanでUSBをフォーマットしてWindowsと共有させる方法

Macで作業を行い、USBを介してWindowsとデータのやり取りを行う場合、USBのフォーマットに注意しないとWindowsでは認識できないことになります。 Mac側でUSBをフォーマットするには、ディスクユーティリテ  >>続きを読む

Git入門(準備編)〜SourceTreeインストールとAtlassianアカウント取得

2016年2月にSourceTreeがアップデートしてアカウント取得の方法が判りづらくなりました。 Atlassianアカウント取得方法とあわせてインストールの手順の説明です。 SourceTreeインストール方法 So  >>続きを読む

Macのlibraryフォルダの場所についてちゃんと知っておく

Photoshopのエクステンションを導入するときに 「Library/Application Support/Adobe/CEP/extensions」 にダウンロードしたフォルダを置く事と指示があったりします。 けれ  >>続きを読む

appearanceプロパティについて〜CSS

appearanceプロパティは、ボタンなどの見た目をコントロールするものです。特にスマホサイト作成の時には重宝されることが期待されましたが、主要ブラウザの対応はマチマチで、なおかつW3CのCSS3仕様書から削除されたり  >>続きを読む

WordPressテーマ開発中にvar_dump()の結果をターミナルに表示

WordPressのテーマを開発中にPHPのvar_dump()を使うことがあると思います。 var_dump()の結果がページの中に大量に表示されるとレイアウトは当然崩れます。できれば別窓に表示さるとありがいたいもので  >>続きを読む

Sublime Text3の便利な使い方

*2017/5/7追記しました。 Sublime Text3のソースフォーマット Sublime Text3のソースフォーマットはデフォルトで用意されています。 フォーマットしたい部分を選択するか、全選択してメニューから  >>続きを読む

MAMPで作成したWordPress環境をXドメインサーバーに移行

MAMPで構築したWordPressをそっくりそのまま外部サーバーに移管する方法の説明です。 今回は移管先をXドメインの無料サーバーとしました。WordPressを使用しますのでXドメインの無料サーバーのPHPサーバーを  >>続きを読む

SVG〜フィルターを使ってスライムのような効果

SVGのフィルター効果を使ってスライムのような効果を付けてみましょう。 応用するとモバイルのハンバーガーボタンの変わりにもなります。 元ネタはCSS-TRICKSのサイトです。 サンプル *このサンプルはSafari9.  >>続きを読む

SVGとアニメーション2〜pathを描くようなアニメーション

CSS3を使用したアニメーションの例です。 ハートのパスを描いて最後に赤く塗りつぶすものです。仕組みがわかれば簡単に応用できて、見栄えのするパーツを作成できますのでマスターしておきましょう。 サンプル SVGコード ハー  >>続きを読む

SVGとアニメーション1〜pathに沿って移動するアニメーション

今回ははSVGのpathに沿ってDOM要素をアニメーションさせる方法です。 SVGのpathに沿ってアニメーションさせる CodeGridの記事が元ネタです。(有料ですがフロントエンドの方にはお勧めのサイトです。) シン  >>続きを読む