MAC OS High SierraにアップデートしたらDreamweaverのSASSのコンパイルに失敗するようになりました。 対処方法として下記リンクの通りで動きました。どうやらXCodeコマンドラインツールのアップ >>続きを読む
HTML&CSS
OSXを10.13（macOS High Sierra）にアップデートしてSASSのコンパイルがうまくいかない時の対処法
DreamweaverCCのFTP機能でファイルサイズや修正日が表示されない時の対処
DreamweaverCC（2017.5)のFTP機能ではファイル名とフォルダ名しか表示されてなく、ファイルサイズや修正日が表示されていません。 旧来のようにこれらの情報を表示させる方法です。 次の画像がDreamwea >>続きを読む
Bootstrap4でのGrid system変更点〜Flexがポイント
Bootstrapでは12等分のカラムでグリッドを作成するGrid systemが用意されています。また、レスポンシブレイアウトにも柔軟に対応できる仕組みのため、複雑なレイアウトを簡単にコーディングすることができます。 >>続きを読む
Tableの使い方詳説〜HTML & CSS（１）
テーブルの記述はHTMLもCSSも面倒な設定や思う通りに行かない場合があったり、思わぬ落とし穴に悩むこともあります。 今回はテーブルについてしっかりと学習していきます。 HTMLでのテーブル関連タグの使い方 テーブル作成 >>続きを読む
Dreamweaver CC 2017.5で新しく加わったGit機能を使う方法
2017年6月にDreamweaver CC 2017にいよいよGitの機能が標準で搭載されました。さっそく使ってみることにします。 今回の記事はすでにGitの使用経験がありSorceTreeなどから乗り換えたいとお考え >>続きを読む
アスペクト比を保ちながら拡大縮小できるブロックの作成
レスポンシブサイトを作成するときに、アスペクト比（縦横比）を保ったまま拡大縮小するブロックを作成したい場合があります。簡単そうで結構ハマるところです。 今回はアスペクト比を保ちながら拡大縮小できるブロック領域の作成テクニ >>続きを読む
CSSで表現するブレンドモード〜CSS3
ブレンドモードは２つの画像や画像と塗りをブレンドして表現するものです。 Photoshopなどで頻繁に活用される手法ですが、CSSでも使用することができます。 background-blend-modeプロパティ 注）I >>続きを読む
CSS3でフィルター効果をつける
フィルター効果は本来SVGのグラフィック効果として実装されました。しかし、フィルター効果はCSSからも利用することができます。 CSSでフィルター効果をつけるのは非常に簡単な上にその効果も大きくPhotoshopなどでの >>続きを読む
[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 >>続きを読む
CSSのメディアクエリの記述をSassのmixinでまとめました
iPhone5〜7に対応したCSSメディアクエリをSassの@mixinにしました。 GitHubに置いていますので、下記アドレスからファイルをダウンロードしてください。 https://github.com/haido >>続きを読む
FlexBoxの使い方（６）〜flexプロパティの練習
flexプロパティの練習用サンプルを作成しました。 flex-grow、flex-shrink,flex-basisの値を入れてレイアウトを確認するものです。 値は数字の０以上の整数を入れてください。 数値入力後に「CS >>続きを読む
FlexBoxの使い方（５）〜flexプロパティについて
flexプロパティについて解説します。 display:flexを指定したときflexコンテナはblockの性格を持ち、親要素の幅いっぱいに広がります。flexコンテナでflexアイテムをきれいに囲むためにはflexアイ >>続きを読む
FlexBoxの使い方（４）〜display:inline-flexについて
「inline-flex」を簡単に説明すると「inline-block」の拡張版と言えます。 「inline-block」の性格を持ちながら、尚且つ「flex」の性格を持ちます。結構万能に使えますので有効に活用しましょう >>続きを読む
FlexBoxの使い方（３）〜flexアイテムの順番を入れ替え
flexアイテムの順番の入れ替えについて解説します。 flexBoxレイアウトの初期状態 flexBoxレイアウトをorderプロパティで並べ順を変えた状態 通常のflexBoxレイアウト orderで並び変えたflex >>続きを読む
FlexBoxの使い方（２）〜整列の方法とfloatレイアウトとの違い
FlexBoxを使った整列の方法とfloatとの違いを解説します。 floatレイアウトとFlexBoxレイアウトの違い flexレイアウトの例・・・・自動で高さが揃う floatレイアウトの例・・・・高さを揃えることが >>続きを読む
FlexBoxの使い方（１）〜display:flexについて
通常フローしたブロック要素を横並びにするにはこれまでfloatプロパティを使用していましたが、その挙動は難しくて入門者を困らせる関門でした。CSS3で定義されたFlexBoxの仕組みを使うと簡単に横並びのレイアウトが出来 >>続きを読む
可変レイアウト（Fluid Layout）作成のポイント
DogRoboの一日は朝食で始まる。 ロボットの朝食なんてオイル臭い丸薬のようなものと思うだろうが、実際はトーストと目玉焼きにカフェオレとシャレている。特にカフェオレにはこだわりがある。牛乳とマンデリンコーヒーの割合は7 >>続きを読む
:nth-child練習ページ・jQueryセレクタ練習ページ作成しました。
:nth-child練習ページとjQueryセレクタ練習ページを作成しました。 :nth-child練習ページの使い方 :nth-child練習ページ Lesson1 li要素を10個用意しています。 各li要素はfle >>続きを読む
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文字前後くらいといわれています。具体的な文字数の根拠は不明ですが、あまり長すぎる行は読みにくい傾向になります。 ＊「ブログデザインを考える：１行の字数とWEB幅」に >>続きを読む
Bracketsの使い方
Sublime Text だの Atom だの便利なエディタがほとんど無料で使用できる中、Dreamweaverの存在価値が無くなってきていました。 そんな中突如 Dreamweaver CC 2017(Beta)が姿を >>続きを読む
Google Mapのスクロールを止める方法
Google Map共有機能の「地図を埋め込む」を使って、サイトにMapを表示する場合iframeが使用されます。 簡単に導入することができて便利に使えますのでさまざまなサイトで活用されています。 ところが、ひとつ問題点 >>続きを読む
Koalaの使い方〜Sass
KoalaはSassをGUI環境で使うことができるコンパイラです。デザイナーさんはコマンド操作よりも、こちらの方が使いやすいかもしれません。 ここではKoalaの使い方を学習します。 Koalaのインストール（Windo >>続きを読む
MacOS X El CapitanでUSBをフォーマットしてWindowsと共有させる方法
Macで作業を行い、USBを介してWindowsとデータのやり取りを行う場合、USBのフォーマットに注意しないとWindowsでは認識できないことになります。 Mac側でUSBをフォーマットするには、ディスクユーティリテ >>続きを読む
appearanceプロパティについて〜CSS
appearanceプロパティは、ボタンなどの見た目をコントロールするものです。特にスマホサイト作成の時には重宝されることが期待されましたが、主要ブラウザの対応はマチマチで、なおかつW3CのCSS3仕様書から削除されたり >>続きを読む
Sublime Text3の便利な使い方
＊2017/5/7追記しました。 Sublime Text3のソースフォーマット Sublime Text3のソースフォーマットはデフォルトで用意されています。 フォーマットしたい部分を選択するか、全選択してメニューから >>続きを読む
SVG〜フィルターを使ってスライムのような効果
SVGのフィルター効果を使ってスライムのような効果を付けてみましょう。 応用するとモバイルのハンバーガーボタンの変わりにもなります。 元ネタはCSS-TRICKSのサイトです。 サンプル ＊このサンプルはSafari9. >>続きを読む