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

HEARTBRAIN BLOG > プログラミング

プログラミング

wordpressに推奨されるままにロリポップでPHP7に切り替えたらエラーが出た

自分の覚書として。 最近、理由がセキュリティなのかパフォーマンスなのか確認すらしていないですが、とにかくwordpressをアップデートするために、PHPを最新の状態にすることを求められるようになりました。サジを投げたよ […]

プログラミング

05

19/09

CSSの!importantは本当に非推奨なのか

例えば div { color: red; }div.test { color: pink !important; } 上記の場合は厳密に言えば!importantなど初めからいらないのですがこういう時、どうしても im […]

プログラミング

03

19/07

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

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

始まりは、webデザイン担当小川の、この依頼でした。 いや……無理やん? 都合の良いように変更してツッコミが入ったら「最初からそんなんでしたよ?ほら、こっちのillustrator、CS5ですし?CCじゃないですし?デー […]

プログラミング

03

17/08

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

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

レスポンシブデザインにおいて、今や大人気のflexですが。 カラムレイアウトなら良いのですが、リストや表を作る時に、綺麗に整えるのは少々難しいようです。 Flexbox 改行の弱点(鼻ちょうちん様 より) 正しくこの記事 […]

プログラミング

28

16/11

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

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

あちこちで語り尽くされているとは思うのですが、2枚の画像を重ね、上に配置した画像を縦横の中央にセンタリングしたい時があります。 情報が錯綜していて、結構ごちゃごちゃになってしまって、かなり試行錯誤したのですが。 自分なり […]

プログラミング

04

16/10

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

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

世間を騒がせ、コーダーの負担を大幅に減らした、CSS3のフレキシブルボックス。 と言いながら、Nがそれに出会ったのはつい最近という、相変わらずの浦島太郎コーダーなのですが。 フレキシブルボックスとは、画面やブラウザのサイ […]

プログラミング

15

16/06

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

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

写真をかっこよく並べたい。 特にギャラリーを自作した場合など、そう思いますよね。 いや、私はギャラリー作れないのですが。 サイト内の画像がPinterestのようなレイアウトにできたら……! jQueryプラグインなどで […]

プログラミング

26

16/04

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

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

HTMLの基本といえば、基本なのですが……。 つい忘れがちなんですよね。 DOCTYPE宣言って。 Lightbox系のプラグインの表示位置がおかしい、という内容の嘆き兼無能告白を、何度かこのブログでしていると思うのです […]

プログラミング

14

16/04

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

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

jQueryって便利ですよね。 トグルメニューに、スライドショーに、フォトギャラリーに……欲しいものはほぼ叶えてくれます。 おかげで私のような無知なコーダーでも設置できてしまい、後々イレギュラーな事態に苦しめられることに […]

プログラミング

16

15/10

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

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

レスポンシブデザインの場合、特に気を遣うのが横幅です。 昔も今もやはり2カラムレイアウトが多い印象ですが、設定を間違えたりすると、タブレットで閲覧したらカラム落ちでレイアウトが崩れて……というのは、よくある話です。 少な […]

プログラミング

10

15/06

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

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

サイトを作る時に、まずどうしようかと思うのが、ヘッダーやサイドバー、フッターなどの全ページ共通項目です。 CMSなどでは最初から共通なのですが、HTMLだとそうはいきません。 昔はフレームという手が使えましたが、今やSE […]

プログラミング

18

15/05

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

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

レスポンシブデザインが一般化しつつある今、スマートフォンでも見れるスライドショーの需要は益々増えてきました。 現在出回っている素晴らしいjQueryスライドショーはたくさんありますが、中でも軽量且つ設置が簡単だとあちこち […]

プログラミング

12

15/05

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

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

Lightboxは簡単且つ便利だけど、スマホ用のUIには対応していないというのは有名な話です。 なので、それに代わるものを何とか見つけようと、がんばって色々と探していました。 そして、評価が高く、レスポンシブ対応Ligh […]

プログラミング

25

15/02

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

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

便利だけどいろいろと設定が難しいレスポンシブデザインですが、個人的に一番厄介だと思うのは、背景設定です。 普通のテキストに背景画像を設定しているだけならまだしも、ボタンとして設定している場合が特に難しいというか、間違いや […]

プログラミング

30

15/01

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

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

webサイト全体にLightboxを使用している所があります。 その内の1つのページに、スライドショーを設置することになりました。 サイドバナーが欲しい、文字入れもしたい……と色々条件が重なり、見つかったのが slide […]

プログラミング

07

14/11

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

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

スマートフォンでのネット利用率が益々上昇しているようです。 PCは電源入れて起動するまでの待ち時間は長いし、ブラウザとか言われてもどれがどれか分からないし……という声も聞きます。 その点スマートフォンは手軽に閲覧できるし […]

プログラミング

01

14/11

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

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

最近、目から鱗が落ちる出来事が多い気がするのですが、恐らくNの知識及び情報収集能力が非常に残念なだけだと思います。 それはどうでもいいとして WordPressで404エラーページを作るときに参考にしたいブログ7選(Na […]

プログラミング

31

14/10

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

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

一昔前は、jQueryのスライドショーを探すのさえ一苦労したものですが……。 最近はレスポンシブデザイン対応のスライドショーが増えてきて、ありがたい限りです。 しかも私のようにjava scriptがほとんど分からない身 […]

プログラミング

23

14/10

line-height の単位

line-height の単位

line-height に単位はいらない?どっちでも良いんじゃない? そう思っていた時期もありました。 しかし今日、実際にそれが覆されました。 line-heightの値を1.8emにしたら、上の図みたいになったのですが […]

プログラミング

10

14/09

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

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

実は display:table-cell がインライン要素にしか効かないと、貧弱な情報網によりつい先日知りました。 だから div や p などの要素で囲む場合は、一番外側の要素に display:table が必要な […]

プログラミング

04

14/09

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

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

ブログに新しいカテゴリ「お勉強」を追加しました。 同僚が入社して以来、教わることが毎日山ほど出てくるのに対し 私から教えられるのは過去のデータの在処と社長の好きな女性のタイプくらいだという事実を憂慮し せめて勉強している […]

プログラミング

26

14/08

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

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

CSS には vw, vh, vmin, vmax という単位がある(Developers1.0より) 何ぃ!!!??? って、そもそも viewport ってなぁに? という、最早コーダーなのかどうかも疑わしいレベルの […]

プログラミング

21

14/08

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

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

こんな画像を こんな風に動かしたい。 しかもcssのみで。 というのも、動作を必要とするwebサイトのサーバーがjimdoだったので できるだけjQueryを避けたかったのです。面倒だから。 無理かな?と思ったのですが、 […]

プログラミング

19

14/08

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

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

SEO対策の中で、title タグが重要視されているのは周知の通りだと思います。 そのタイトルタグですが、どうやって付けていますか? キーワードと〜社名を入れて〜綺麗に20文字以内に収まればいいな、などと 甘いことを考え […]

プログラミング

24

14/07

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

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

hタグの定義がここ数年でも割と流動的なのもあるかもしれませんが、最近までずっと勘違いしていたことがあります。 h1タグって、社名が必須というわけでもないのですね……。 絶対入れなきゃいけないって思ってたので、設定場所にい […]

プログラミング

12

14/07

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

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

時代と共に廃れてきた……とよく聞きますが 実はそうでもないんじゃないかと思えるくらい、今でもよく見かけるFlash。 そのFlash動画を、ヘッダーメニューの下に配置するサイトも多いのではないでしょうか。 しかし、ヘッダ […]

プログラミング

30

14/06

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

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

例えば、ヘッダーメニューで 、メニューが今後増えるかもしれない時は 二段よりも横に広げたい場合が多いのではないでしょうか。 こんな感じで、横幅を可変にできたら見栄えが良いですよね。 そういう場合ですが、親要素を更に外側に […]

プログラミング

20

14/06

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

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

Googleマップでストリートビューを見ようとして いつもの人がいないのに気がつきました。 見覚えのある顔をしばらく探した結果 お召しかえをなさってました。 これ、各国ごとにユニフォーム違うんだろうなぁ。 お疲れ様です。 […]

プログラミング

16

14/06

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

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

CSSには、たくさんのルールが隠れています。 hタグの中にブロック要素入れちゃいけないとか、bodyの中にタグで囲まない文字を直接入れちゃいけないとか。 日頃から真面目にHTML言語と向き合ってる私以外のコーダーさんたち […]

プログラミング

05

14/06

子要素で使うmargin-topの罠

子要素で使うmargin-topの罠

度々苦しめられてきた割に、度々忘れる事実なのですが…… 親要素と子要素の間では、上下マージンの重ね合わせが行われる。 例えば、こういう構成でページを作る場合 ついこんなコーディングをしてしまうのですが 実際に仕上がるイメ […]

プログラミング

26

14/05

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

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

こんな案件を出してこられました。 この、左と右で背景色が違い、しかもグラデーションがかかっているパターン。 ありがちな例ですが、出てこられると戸惑います。 linear-gradient などを使って普通にグラデーション […]

プログラミング

21

14/05

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

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

XPのサポート終了で、堂々と「IE8は対象外です!(キリッ)」と放棄でき、CSS設定も楽に…… そう思ったら大間違いです。 さすが天下のマイクロソフト、層が厚いです。伏兵がいました。 IE9という伏兵が……。 CSSに比 […]

プログラミング

14

14/05

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

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

本当はcss3全部並べて、今後の対策に使おうとしていました。 ですが CSS3 リファレンス(HTMLクイックリファレンス様) ムリ。 という訳で、普段使う機会が多いプロパティで ほとんどが画像で済ませていたものとIEに […]

プログラミング

24

14/04

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

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

申し遅れましたが、2014年4月8日をもちまして ハートブレーンwebサイトのURLが、heartbrain.net になりました。 ブックマークして下さっている方は(いるのか……?)変更をお願いします。 今や、DTP上 […]

プログラミング

10

14/04

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

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

何だか偉そうなタイトルですが、まずN自身が名付けは大の苦手です。 ブログタイトルとか結局放置のままですし。 記事のタイトル一つにしたって、センスという文字にはとことん無縁に生きてきたことだけが伝わってくる素晴らしさです。 […]

プログラミング

15

14/01

font-familyに潜む罠

font-familyに潜む罠

webサイト閲覧に適したフォントは「ゴシック体」だと言われています。 言われてみれば……まあ、確かに。 変にメリハリがないので、モニタを通した見ることを考えると、目への負担は少ないかもしれません。 しかし、やはりタイトル […]

プログラミング

11

13/12

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

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

コーディングをしていると、時々このようなデザインが来ます。 この、背景デザインとしては素晴らしいけど (画像例からは素晴らしさが1ミリも伝わりませんが) コーダー泣かせの、この切り所がみつからない、背景画像。 コーダーや […]

プログラミング

03

13/12

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

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

ふと思い立ったのをいいことに、特殊文字をweb上で使いたい場合のコードを書き記しておきます。 どう見てもN個人の備忘録です。 ① 〜 ⑨ 〜 © もしくは ® もしくは &#1 […]

プログラミング

25

13/11

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

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

昨日の続きです。 なるべくならwordpressをギャラリーのみに使うのは 様々な事情があり、避けたいのです。 なので、最近の日本の風潮に従い再チャレンジしてみようとしたのですが…… 私、忘れてました。 PHPのバージョ […]

プログラミング

12

13/11

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

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

サイト巡り中に、このようなサイトを見つけたのです。 もう社外じゃ無理!オフィスで婚活だ!「社内恋愛診断」 http://doda.jp/lab/office-love/ 非モテ歴=年齢の運命的非モテである私が、食い付かな […]

プログラミング

25

13/10

正しいタグの使い方

正しいタグの使い方

情けない話、気づいたのがここ最近なのですが タグの書き方って、結構細かいんですよね。 大きく分けると「ブロックレベル要素」と「インライン要素」というものがあって ブロックレベル要素の中にインライン要素は入れられるけど、イ […]

プログラミング

07

13/10

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

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

cssでの文字サイズ指定、迷ったことはありませんか? 私はあります。ほんの今。 ……と、対策するのが遅すぎのNは置いといて。 実はこんな問題にまたしても直面したのですが。 文字サイズの単位は px、pt、em、%など様々 […]

プログラミング

04

13/09

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

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

普段、会社で(実は自宅でも)使っているメインブラウザは、現在Google Chromeです。 Firefoxとの間で何度も浮気を繰り返してはいたのですが……軽さには勝てない! 恐らく機能重視ならFirefoxなんだろうな […]

プログラミング

29

13/05

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

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

現在制作(というかお手伝い)中の企業サイト様。 メールフォームを設置しようとしたのですが、何やら特殊なプログラムらしく、最初は普通のcssでうまくいかず…。 仕方がないので、今でも便利性でいえばダントツかもしれない ta […]

プログラミング

08

13/05

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

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

実は、つい最近まで適切な使い方を知らなかったhタグ。 h1〜h6 の見出しタグです。 これ、一歩間違うと Google八分 というある意味村八分よりえげつない仕打ちに遭うらしいので、気を付けなきゃまずいんですけどね……。 […]

プログラミング

22

13/03

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

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

こちらの記事を読んで、ちょっとだけ戦慄が走りました。 IEでリンクをクリックした時に出る点線を消すjQuery/株式会社LIG様 何が怖いって リンクをクリックした時に出る点線にも注文が出る可能性。 のどかな田園地帯にあ […]

プログラミング

05

13/03

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

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

地味に悩まされてきた現象。 最新IEとかFirefoxとかGoogle Chromeとか IE8 これ、本当にIE8のみなんです。 かのコーダー泣かせなIE6ですら、こうはなりません。 何故だ……と思ったら、どうやらフォ […]

プログラミング

27

13/02

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