福井県のweb制作は有限会社ハートブレーン

HEARTBRAIN BLOG > プログラミング

タイトル下のボーダーの両端にダイヤを入れようとした

タイトル下のボーダーの両端にダイヤを入れようとした

始まりは、webデザイン担当小川の、この依頼でした。 いや……無理やん? 都合の良いように変更してツッコミが入 […]

プログラミング

03

17/08

Flexboxで複数行のリストを作る場合の余白の設定

Flexboxで複数行のリストを作る場合の余白の設定

レスポンシブデザインにおいて、今や大人気のflexですが。 カラムレイアウトなら良いのですが、リストや表を作る […]

プログラミング

28

16/11

2枚の画像を重ねて縦中央に揃えつつレスポンシブに対応したい時

2枚の画像を重ねて縦中央に揃えつつレスポンシブに対応したい時

あちこちで語り尽くされているとは思うのですが、2枚の画像を重ね、上に配置した画像を縦横の中央にセンタリングした […]

プログラミング

04

16/10

今更すぎるフレキシブルレイアウトについて

今更すぎるフレキシブルレイアウトについて

世間を騒がせ、コーダーの負担を大幅に減らした、CSS3のフレキシブルボックス。 と言いながら、Nがそれに出会っ […]

プログラミング

15

16/06

高さの違う画像をcssのみでタイルのように並べたい場合

高さの違う画像をcssのみでタイルのように並べたい場合

写真をかっこよく並べたい。 特にギャラリーを自作した場合など、そう思いますよね。 いや、私はギャラリー作れない […]

プログラミング

26

16/04

Lightboxの表示位置がおかしい原因にこんなパターンも

Lightboxの表示位置がおかしい原因にこんなパターンも

HTMLの基本といえば、基本なのですが……。 つい忘れがちなんですよね。 DOCTYPE宣言って。 Light […]

プログラミング

14

16/04

jQueryプラグイン2つを同じページ内で使いたい時の注意点

jQueryプラグイン2つを同じページ内で使いたい時の注意点

jQueryって便利ですよね。 トグルメニューに、スライドショーに、フォトギャラリーに……欲しいものはほぼ叶え […]

プログラミング

16

15/10

2カラムの片方だけ可変幅にする時に私がやってしまった間違い

2カラムの片方だけ可変幅にする時に私がやってしまった間違い

レスポンシブデザインの場合、特に気を遣うのが横幅です。 昔も今もやはり2カラムレイアウトが多い印象ですが、設定 […]

プログラミング

10

15/06

HTMLのみのサイトをリニューアルする際にヘッダーやサイドバーを共通させたい時

HTMLのみのサイトをリニューアルする際にヘッダーやサイドバーを共通させたい時

サイトを作る時に、まずどうしようかと思うのが、ヘッダーやサイドバー、フッターなどの全ページ共通項目です。 CM […]

プログラミング

18

15/05

初心者でもわかるGlide.jsの設置方法

初心者でもわかるGlide.jsの設置方法

レスポンシブデザインが一般化しつつある今、スマートフォンでも見れるスライドショーの需要は益々増えてきました。 […]

プログラミング

12

15/05

レスポンシブ対応Lightbox系プラグインを動かす際にかかった罠

レスポンシブ対応Lightbox系プラグインを動かす際にかかった罠

Lightboxは簡単且つ便利だけど、スマホ用のUIには対応していないというのは有名な話です。 なので、それに […]

プログラミング

25

15/02

レスポンシブデザインで背景画像を設定したボックスのheight設定

レスポンシブデザインで背景画像を設定したボックスのheight設定

便利だけどいろいろと設定が難しいレスポンシブデザインですが、個人的に一番厄介だと思うのは、背景設定です。 普通 […]

プログラミング

30

15/01

jQueryでスライドショーを動かそうとして実際にやった失敗

jQueryでスライドショーを動かそうとして実際にやった失敗

webサイト全体にLightboxを使用している所があります。 その内の1つのページに、スライドショーを設置す […]

プログラミング

07

14/11

レスポンシブデザインでPC用スマホ用切り替えボタンをスマホにだけ表示させる方法

レスポンシブデザインでPC用スマホ用切り替えボタンをスマホにだけ表示させる方法

スマートフォンでのネット利用率が益々上昇しているようです。 PCは電源入れて起動するまでの待ち時間は長いし、ブ […]

プログラミング

01

14/11

404ページの作り方で目から鱗が落ちた

404ページの作り方で目から鱗が落ちた

最近、目から鱗が落ちる出来事が多い気がするのですが、恐らくNの知識及び情報収集能力が非常に残念なだけだと思いま […]

プログラミング

31

14/10

Easy Sliderで縦スクロールするために実行したこと

Easy Sliderで縦スクロールするために実行したこと

一昔前は、jQueryのスライドショーを探すのさえ一苦労したものですが……。 最近はレスポンシブデザイン対応の […]

プログラミング

23

14/10

line-height の単位

line-height の単位

line-height に単位はいらない?どっちでも良いんじゃない? そう思っていた時期もありました。 しかし […]

プログラミング

10

14/09

IE ではdisplay:table-cellが効かない

IE ではdisplay:table-cellが効かない

実は display:table-cell がインライン要素にしか効かないと、貧弱な情報網によりつい先日知りま […]

プログラミング

04

14/09

ヘッダーの子メニューをプルダウン表示させる際に私が犯した過ち

ヘッダーの子メニューをプルダウン表示させる際に私が犯した過ち

ブログに新しいカテゴリ「お勉強」を追加しました。 同僚が入社して以来、教わることが毎日山ほど出てくるのに対し […]

プログラミング

26

14/08

cssのサイズ指定にはviewport基準の単位があるらしい

cssのサイズ指定にはviewport基準の単位があるらしい

CSS には vw, vh, vmin, vmax という単位がある(Developers1.0より) 何ぃ! […]

プログラミング

21

14/08

CSSのみで背景画像を左右にカタカタふれるような動作をさせたい時

CSSのみで背景画像を左右にカタカタふれるような動作をさせたい時

こんな画像を こんな風に動かしたい。 しかもcssのみで。 というのも、動作を必要とするwebサイトのサーバー […]

プログラミング

19

14/08

タイトルタグの有効活用法

タイトルタグの有効活用法

SEO対策の中で、title タグが重要視されているのは周知の通りだと思います。 そのタイトルタグですが、どう […]

プログラミング

24

14/07

勘違いしやすいh要素の使い方

勘違いしやすいh要素の使い方

hタグの定義がここ数年でも割と流動的なのもあるかもしれませんが、最近までずっと勘違いしていたことがあります。 […]

プログラミング

12

14/07

プルダウンがFlashの下に隠れる件とアサイー

プルダウンがFlashの下に隠れる件とアサイー

時代と共に廃れてきた……とよく聞きますが 実はそうでもないんじゃないかと思えるくらい、今でもよく見かけるFla […]

プログラミング

30

14/06

横幅を可変にして左右に広げたい

横幅を可変にして左右に広げたい

例えば、ヘッダーメニューで 、メニューが今後増えるかもしれない時は 二段よりも横に広げたい場合が多いのではない […]

プログラミング

20

14/06

画像とテキストを縦中央にセンタリングしたい

画像とテキストを縦中央にセンタリングしたい

Googleマップでストリートビューを見ようとして いつもの人がいないのに気がつきました。 見覚えのある顔をし […]

プログラミング

16

14/06

縦方向のセンタリングとカラム横並べをCSSでなるべく綺麗に設定したい

縦方向のセンタリングとカラム横並べをCSSでなるべく綺麗に設定したい

CSSには、たくさんのルールが隠れています。 hタグの中にブロック要素入れちゃいけないとか、bodyの中にタグ […]

プログラミング

05

14/06

子要素で使うmargin-topの罠

子要素で使うmargin-topの罠

度々苦しめられてきた割に、度々忘れる事実なのですが…… 親要素と子要素の間では、上下マージンの重ね合わせが行わ […]

プログラミング

26

14/05

サイドバーにグラデーションがかかっているwebデザイン

サイドバーにグラデーションがかかっているwebデザイン

こんな案件を出してこられました。 この、左と右で背景色が違い、しかもグラデーションがかかっているパターン。 あ […]

プログラミング

21

14/05

IE9様にお許しを頂けなかったCSS設定

IE9様にお許しを頂けなかったCSS設定

XPのサポート終了で、堂々と「IE8は対象外です!(キリッ)」と放棄でき、CSS設定も楽に…… そう思ったら大 […]

プログラミング

14

14/05

個人的に使うCSS3プロパティのIE対策まとめ

個人的に使うCSS3プロパティのIE対策まとめ

本当はcss3全部並べて、今後の対策に使おうとしていました。 ですが CSS3 リファレンス(HTMLクイック […]

プログラミング

24

14/04

IE9でtext-shadowを正確に表現するために

IE9でtext-shadowを正確に表現するために

申し遅れましたが、2014年4月8日をもちまして ハートブレーンwebサイトのURLが、heartbrain. […]

プログラミング

10

14/04

名付けが苦手な人のためのクラス名定義

名付けが苦手な人のためのクラス名定義

何だか偉そうなタイトルですが、まずN自身が名付けは大の苦手です。 ブログタイトルとか結局放置のままですし。 記 […]

プログラミング

15

14/01

font-familyに潜む罠

font-familyに潜む罠

webサイト閲覧に適したフォントは「ゴシック体」だと言われています。 言われてみれば……まあ、確かに。 変にメ […]

プログラミング

11

13/12

背景画像を各モニタに合わせたい

背景画像を各モニタに合わせたい

コーディングをしていると、時々このようなデザインが来ます。 この、背景デザインとしては素晴らしいけど (画像例 […]

プログラミング

03

13/12

HTMLで使いたい特殊文字をピックアップしてみた

HTMLで使いたい特殊文字をピックアップしてみた

ふと思い立ったのをいいことに、特殊文字をweb上で使いたい場合のコードを書き記しておきます。 どう見てもN個人 […]

プログラミング

25

13/11

SQL構文エラーとの戦いの軌跡(途中経過のみ)

SQL構文エラーとの戦いの軌跡(途中経過のみ)

昨日の続きです。 なるべくならwordpressをギャラリーのみに使うのは 様々な事情があり、避けたいのです。 […]

プログラミング

12

13/11

モテ運おみくじを自家発電

モテ運おみくじを自家発電

サイト巡り中に、このようなサイトを見つけたのです。 もう社外じゃ無理!オフィスで婚活だ!「社内恋愛診断」 ht […]

プログラミング

25

13/10

正しいタグの使い方

正しいタグの使い方

情けない話、気づいたのがここ最近なのですが タグの書き方って、結構細かいんですよね。 大きく分けると「ブロック […]

プログラミング

07

13/10

CSSでの文字サイズ指定に潜む各ブラウザからの課題

CSSでの文字サイズ指定に潜む各ブラウザからの課題

cssでの文字サイズ指定、迷ったことはありませんか? 私はあります。ほんの今。 ……と、対策するのが遅すぎのN […]

プログラミング

04

13/09

ページタイトル部分を縦中央でセンタリングしたい時

ページタイトル部分を縦中央でセンタリングしたい時

普段、会社で(実は自宅でも)使っているメインブラウザは、現在Google Chromeです。 Firefoxと […]

プログラミング

29

13/05

inputタグを縦中央に配置するまでの回り道

inputタグを縦中央に配置するまでの回り道

現在制作(というかお手伝い)中の企業サイト様。 メールフォームを設置しようとしたのですが、何やら特殊なプログラ […]

プログラミング

08

13/05

hタグを個人的にわかりやすくまとめてみた

hタグを個人的にわかりやすくまとめてみた

実は、つい最近まで適切な使い方を知らなかったhタグ。 h1〜h6 の見出しタグです。 これ、一歩間違うと Go […]

プログラミング

22

13/03

リンクをクリックした時に出る点線を消す

リンクをクリックした時に出る点線を消す

こちらの記事を読んで、ちょっとだけ戦慄が走りました。 IEでリンクをクリックした時に出る点線を消すjQuery […]

プログラミング

05

13/03

文字のみで構成されたブロックが、IE8だけ横幅おかしくなる現象

文字のみで構成されたブロックが、IE8だけ横幅おかしくなる現象

地味に悩まされてきた現象。 最新IEとかFirefoxとかGoogle Chromeとか IE8 これ、本当に […]

プログラミング

27

13/02

メールでのお問合せ・お見積りはコチラ
TOP