HTML&CSS

HTML&CSS

inline要素のpaddingを使う場合の注意点

display:inlineに設定された要素にpaddingをつけた場合の注意点です。padding-leftの指定を行っても、行の終端でインライン要素が折り返された場合には、次の行の先頭にはpadding-leftが付きません。 これは...
HTML&CSS

OSXを10.13(macOS High Sierra)にアップデートしてSASSのコンパイルがうまくいかない時の対処法

MAC OS High SierraにアップデートしたらDreamweaverのSASSのコンパイルに失敗するようになりました。 対処方法として下記リンクの通りで動きました。どうやらXCodeコマンドラインツールのアップデートの問題のよう...
HTML&CSS

DreamweaverCCのFTP機能でファイルサイズや修正日が表示されない時の対処

DreamweaverCC(2017.5)のFTP機能ではファイル名とフォルダ名しか表示されてなく、ファイルサイズや修正日が表示されていません。 旧来のようにこれらの情報を表示させる方法です。 次の画像がDreamweaverCC初期状...
HTML&CSS

アスペクト比を保ちながら拡大縮小できるブロックの作成

レスポンシブサイトを作成するときに、アスペクト比(縦横比)を保ったまま拡大縮小するブロックを作成したい場合があります。簡単そうで結構ハマるところです。 今回はアスペクト比を保ちながら拡大縮小できるブロック領域の作成テクニックです。 ...
HTML&CSS

CSSのメディアクエリの記述をSassのmixinでまとめました

iPhone5〜7に対応したCSSメディアクエリをSassの@mixinにしました。 GitHubに置いていますので、下記アドレスからファイルをダウンロードしてください。 ファイル構成 mediaquery │ ...
HTML&CSS

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

:nth-child練習ページとjQueryセレクタ練習ページを作成しました。 :nth-child練習ページの使い方 :nth-child練習ページ Lesson1 li要素を10個用意しています。 各li要素はflex...
HTML&CSS

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

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

Bracketsの使い方

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

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

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

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

Macで作業を行い、USBを介してWindowsとデータのやり取りを行う場合、USBのフォーマットに注意しないとWindowsでは認識できないことになります。 Mac側でUSBをフォーマットするには、ディスクユーティリティを使います。...
スポンサーリンク
タイトルとURLをコピーしました