2017-12-14

【TEC Log】footerFixed.js 1pxの隙間問題

javascript

コンテンツがwindowの高さに足りなくても、
footerを下付きにしたい時はfooterFixed.jsを使用させてもらっております。
blog.webcreativepark.net

デザインによっては、一番下に線が引いているサイトがあるのですが、
footerFixed.jsをそのまま使用すると、1pxだけ一番下に隙間ができてしまうのです。
背景色をそのまま引き継いでいるのであれば、関係ないのですが、
下に線があると、その線の下の隙間がわかってしまいます。
こんな時の対処法。

【やりたいこと】
footerFixed.jsを使用して、一番下の隙間の1pxをなくす。

【How to】
footerFixed.js内の

document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px";

この記述の-1を削除する

【参考】
ameblo.jp

解決！

2017-12-14

【TEC Log】firefox z-index問題

HTML CSS

firefoxが最近アップデートしましたね。
ブラウザの感じがすごく変わっていて、別のブラウザ開いたのかと思いました。

さてさて、それが原因かどうかはわからないのですが、
firefoxだけなぜか要素の重なりが異なっていて、
beforeが次の要素の下に入り込んでしまう事象に陥りました。

z-indexらへんをいじればいいんだろうなとは思ったのですが、
うーん、なかなか。
解決というより、考え方を調べて、設定できましたのでLogを。

【やりたいこと】
擬似要素を親要素と一緒にレイヤー一番上に設定したい。
（吹き出しの三角部分を想定）
（吹き出しのcssは割愛）

【HTML】

<div class="m-mainTab">
 <a class="m-mainTab__link" href="" title="">Menu ttl</a> // ここに擬似要素を設定している想定
</div>
<div class="m-subTab">
</div>

【CSS】

.m-mainTab{
 position:relative;
 z-index: 0;
}

【HowTo】
親要素にpositionとz-indexを設定
（解説は参考サイト様をご確認ください）

【参考】
http://chun-oki.sw8field.com/webworks/20150411/2489.html

参考サイト様の解説がとてもわかりやすかったです。

2017-11-14

【TEC Log】MAMP Alias設定

MAC MAMP PHP Alias

XAMPPで設定していた人のhosts設定をもらったのですが、どうしても動かない。
500 Internal Server Error　が出てしまう。

調べてみたところ、ディレクトリの権限がないとか書いている記事があったので、
ターミナルで権限を見てみたけど、読み込み権限はあったようで。

XAMPPの設定だし、書き方が違うのだろうとあたりをつけて検索。
そして、見つけた次第です。

【やりたいこと】
/My/Document/root/www/Main/targetが記載されている場合、
/My/Document/root/www/Sub/targetから引っ張ってくる。

【手順】
①hostsファイルの設定。
serverName の名前解決ができるように設定しておきましょう。
Hostsファイルに以下を追加。

127.0.0.1 hogehoge.com

②httpd-vhosts.confの記載。

Listen 8001
<VirtualHost *:8001>
  ServerAdmin webmaster@dummy-host.example.com
  DocumentRoot "/My/Document/root/www/Main"
  ServerName hogehoge.com
  ErrorLog "logs/hogehoge-error.log"
  CustomLog "logs/hogehoge-access.log" common
  <Directory "/My/Document/root/www/Main">
    Options Includes FollowSymLinks  
    AllowOverride All
    Order allow,deny
    Allow from all  
  </Directory>
  Alias /target /My/Document/root/www/Sub/target
  <Directory /My/Document/root/www/Sub/target>
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

③アクセスしてみよう！
hogehoge.com:8001/

【参考】
stackoverflow.com

これで動きました。よかった。