WEB KNOWLEDGE

コーディング

Webコーディングの良し悪しは表示速度、使い勝手、更新の利便性、SEO効果などWebサイトに様々な影響を与えます。表面上見えないパートですが、結果として見えます。

グラデーションであしらったボタンをcssで簡単にアニメーションさせる方法

2017年10月28日

グラデーションであしらったボタンを cssで簡単にアニメーシ...

デザイナーからボタンのあしらいにグラデーションを使ったデザインが上がってきた場合、以前であれば背...

コーディング

IEやEdgeにもobject-fitを対応させる方法のアイキャッチ画像

2017年10月25日

IEやEdgeにもobject-fitを対応させる方法

以前「object-fitをつかって画像をボックスいっぱいに表示させる方法」でobject-fitを紹介いたしました...

コーディング

linear-gradientのグラデーションで しましま模様を実現するテクニック

2017年10月17日

linear-gradientのグラデーションで しましま模様を実現する...

cssでグラデーションを実現することができるlinear-gradient。今回はこれを使ったちょっとしたテクニッ...

コーディング

flexで画像を左右交互に配置するレイアウトを実現する方法

2017年10月10日

flexで画像を左右交互に配置する レイアウトを実現する方法

See the Pen aLEXLg by hoshu_t (@hoshu_t) on CodePen. webで上のようなレイアウトのページ構成を...

コーディング

calc()を使ってCSSのサイズ指定を計算して出力するのアイキャッチ画像

2017年09月20日

calc()を使ってCSSのサイズ指定を計算して出力する

みなさんはCSSのサイズ指定をする時に、細かい計算をしてサイズ指定をしていますか？ calc()は計算式を...

コーディング

超高解像度の時代がすぐそこにpictureとsrcsetを使いこなして最適な画像指定をしようのアイキャッチ画像

2017年09月15日

超高解像度の時代がすぐそこに pictureとsrcsetを使いこなし...

先日iPhoneXの発表がありましたね。僕が何より驚いたのはその解像度。2,436×1,125ピクセルです。これま...

コーディング

繰り返しフィールドの一枚目の画像を 一覧ページのアイキャッチとして利用する方法

2017年08月29日

繰り返しフィールドの一枚目の画像を 一覧ページのアイキャ...

投稿の詳細ページにAdvanced Custom Fieldsを利用し、繰り返しフィールドで画像ギャラリーやスライドシ...

コーディング

flow-root

2017年08月16日

clearfixの代わりになるプロパティflow-root

コーディングをする際になくてはならないものの一つにclearfixがあるのではないでしょうか。 内包して...

コーディング

Advanced Custom Fieldsでタクソノミ一覧ページにテキストフィールドを追加

2017年08月01日

Advanced Custom Fieldsでタクソノミ一覧ページにテキストフ...

Wordpressでサイトを構築するときに大変便利なプラグイン、Advanced Custom Fields。これを使えば記事内...

コーディング

PC表示時のみaタグのリンクを機能させないJS

2017年07月28日

PC表示時のみaタグのリンクを機能させないJS

ページに図表や細かい文字が多い画像を貼ったとき、PC表示では大きく取り扱っているがスマートホン表示...

コーディング

スマホで表示したときだけ画像を別窓で表示するリンクを挿入するJSのアイキャッチ画像

2017年07月26日

スマホで表示したときだけ画像を 別窓で表示するリンクを挿...

スマートホン向けデザインで挿絵の扱いに困る場合が多々あります。イメージ写真などは多少表示が小さく...

コーディング

object-fitをつかって画像をボックスいっぱいに表示させる方法のアイキャッチ画像

2017年07月19日

object-fitをつかって画像をボックスいっぱいに表示させる方法

コーディングなどをしていると、縦横比を維持したままそのボックスいっぱいに画像サイズを表示したい場...

コーディング

cssグリッドレイアウトの生成に便利なWebサービス「Griddy」

2017年07月11日

cssグリッドレイアウトの生成に便利なWebサービス「Griddy」

flexboxやtableと同様に、マルチカラムレイアウトをすることができるdisplay要素grid。通常であればgrid...

コーディング

これからのホームページ制作にsrcsetでできること

2017年07月05日

これからのホームページ制作にsrcsetでできること

HTML5で策定されたsrcset属性という、新しい属性があります。この要素はブラウザの画面幅や指定したサイ...

コーディング

夕日

2017年07月03日

floatが消える日

Web黎明期、Webサイトのレイアウトはtableで行われていました。そしてHTMLとCSSの記述を分離して行うよ...

コーディング

HTTP/2対応することでweb制作におこること

2017年06月27日

HTTP/2対応することでWeb制作におこること

高速化手段の一つとして注目されているHTTP/2。従来から利用されているHTTPと互換性を保ちながら、内部...

コーディング

コーディング

2017年06月23日

youtubeの埋め込み動画をレスポンシブ対応する方法

時々見かけるのが、フレームはしっかりレスポンシブ対応してるのに、更新コンテンツの中身がレスポンシ...

コーディング

nth-childとnth-of-typeの機能と違いと注意点のアイキャッチ画像

2017年06月20日

nth-childとnth-of-typeの機能と違いと注意点

順番に並んでる子要素に特定のルールでスタイルを適用したいときなどに便利なCSS3セレクタのnth-child。...

コーディング

CSSの面倒なコードや、OGPやTwiterカードを生成できるオンラインツール「Web Code Tools」

2017年06月06日

CSSの面倒なコードや、OGPやTwiterカードを 生成できるオン...

CSSで入力に手の掛かるグラデーションやボックスシャドウやアニメーションなどを、調整結果を確認しなが...

コーディング

タイピング

2017年05月02日

擬似要素:beforeや:afterに、特殊文字を入力する方法

今回は少し限定的な状況でのお話です。コピーライトやライセンス表記に使う©や®。 通常であれ...

コーディング

関連記事

地図の梅にメガネが乗っている画像

2020年1月28日
複数アイコンやルート記述など便利機能で手軽にカスタムでき...

Pinterest風レイアウトのイメージ

2019年8月7日
jQuery MasonryでPinterest風グリッドデザインを実現する

jQueryなしで簡単にスクロールにあわせて追従してくるナビゲーションのアイキャッチ画像

2019年6月14日
jQueryなしで簡単にスクロールにあわせて追従してくるナビゲ...

Archive

キーワード

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9：00〜19：00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する