タグ

kiyokichiのブックマーク (2,069)

  • 【xampp】拡張子.htmlでphpを実行  - shimakumi's front

    phpの記述があるページがが文字化けしている! と思ったらphpが動いてませんでした・・・。 (文字化けしてるのはphp includeしてるmetaを読んでないから) chromからコードを見ると <?php(略)?> と書かれてる部分が <!--?php(略)?--> と解釈されてました。 Σ PHPスクリプトを動作させるには、基的にファイルの拡張子を「.php」とする必要があるんですよね。。。 .html でもphp言語を動作させるために。。。 xamppでローカルサーバ立ち上げてる場合、 xampp内のhttaccess もしくはphp.ini(httpd.conf)に AddType application/x-httpd-php .php .html もしくは AddHandler application/x-httpd-php .php .html を追加。 (拡張子.ph

    【xampp】拡張子.htmlでphpを実行  - shimakumi's front
    kiyokichi
    kiyokichi 2017/05/29
    httpd.confに記述を追加
  • MAMPの設定(SSIや複数のローカルホスト) - Qiita

    この記事ではMac OSX(10.10.5)をつかっています。 OSX 10.10.5(14F27) MAMP バージョン 3.0.7.3 (3.0.7.3) 複数人で複数のサイトの保守を担当しているのですが、共有しているMAMPの設定です。 この記事では以下のことについて説明しています。 (1)インクルードファイルを表示できるようにする (2)複数のローカルホストを立てる (1)インクルードファイルを表示できるようにする SSIを採用してるとMAMPでは初期状態ではそれらの共通パーツが読み込まれないままなので、httpd.confファイルを編集して表示されるようにします。 編集するファイルは以下 /Applications/MAMP/conf/apache/httpd.conf 200行目辺り

    MAMPの設定(SSIや複数のローカルホスト) - Qiita
  • MAMP使い方・設定手順 覚書 - Qiita

    仕事PCMACに変わり、ローカルでの開発環境をスムーズに行えるようにMAMPの設定・プロジェクト設定のメモになります。 色々と参考記事に、自分の設定手順をまとめてみました。 MAMPのダウンロード MAMPのインストール バーチャルホストのカスタマイズ httpd.conf を設定 hosts を編集 MAMPの再起動 SSIを有効にする MAMPのダウンロード MAMPの公式サイトからダウンロードする MAMPのインストール公式サイト MAMPのインストール 無料で使いたい方は、MAMP FREEのDownloadをクリックしZIPを解凍してください。 解凍したファイルにdmgファイルをダブルクリックで実行 問題なければ、"Agree"をクリックします。 MAMPとMAMP PROというフォルダが作成されるので、アプリケーションフォルダへドラッグ MAMPの中にMAMP.appというフ

    MAMP使い方・設定手順 覚書 - Qiita
  • SublimeText3を2年以上使って、生き残ったPluginを紹介します。 - Qiita

    $options['user_id'] = '1234'; $options['name'] = 'Ichiro Yamada'; $options['gender'] = 'male'; $options['age'] = '21'; どの記号で揃えるかは設定で増やせます。 このように列揃えすることで、他プログラマーへ処理のまとまりの単位を見せたり、タイプミスに気がつきます。 僕は、デフォルトそのままで使っていてイコールぐらいでしか使わないです。 ショートカットを覚えるほど利用頻度がないので、command + shift + pで、abacusと打って呼びます。 BracketHighlighter [], (), {}, "", '', <tag></tag>といったカッコ類を強調してくれます。 Pluginの説明ページに画像があるので、どんな機能なのかわかりやすいです。 https

    SublimeText3を2年以上使って、生き残ったPluginを紹介します。 - Qiita
  • MacでSublime Textを日本語表示にする方法 - Qiita

    メニュー欄が全て英語表記なSublime Textで英語が苦手な私には日語があるといいなと思い、方法を特定できたので備忘録として掲載します。 Package Controlのインストール Sublime Textのパッケージインストールには「Package Control」を使用する。 1.メニューの「View」→「Show Console」から、コンソールを開く。 2.コンソールを開いたら、Package Controlをインストールするため、以下のURLからインストールコードの記載されてるページへ行く。 https://packagecontrol.io/installation 3.「SUBLIME TEXT3」タブを選択し、記載してあるインストールコードをコピーする。↓ 4.Sublime Textのコンソールにソースをコピペし、Enter。 メニューバーのみ日語化 1.Pac

    MacでSublime Textを日本語表示にする方法 - Qiita
  • WindowsでSublimeText3日本語化は意外と分かりづらい(mac版追記) - Qiita

    今まで何台かのPCにSublime Textを入れてきた。ビジュアルは黒でかっこいいし、ショートカットとプラグインが充実していて、メモ帳の代わりとしてよく使う。 しかし、 簡単に日語化の設定ができるときもあれば、何故かできないときもあった。もう面倒なので自分用の備忘録を作成することにした。 1.Sublime Text3のインストール まずは体のダウンロード↓ http://www.sublimetext.com/3 任意の場所にダウンロード。 今回私は「C:\Program Files\Sublime Text 3」にインストール。 こんな感じ 2.Package Controlのインストール Sublime Textのパッケージインストールには「Package Control」を使用します。 1.解凍したら、実行ファイル(sublime_text.exe)を起動。 2.メニューの「

    WindowsでSublimeText3日本語化は意外と分かりづらい(mac版追記) - Qiita
    kiyokichi
    kiyokichi 2017/05/26
  • Mac ローカルでWEB開発!「MAMP」と「Hoster」で簡単設定

    どういうわけか近頃Wordpressのテンプレート開発とか、共通部分はSSIでお願い…とかいう案件が増えてきて、その都度テストサーバーにアップして確認するのが面倒になったので、ローカルで確認できるように設定してみました。 でもね、htmlcssとちょっとしたJSの知識しかない自分にとって、Macのターミナル立ちあげて、apache起動とかって、難易度が高いというか、抵抗があるわけです。それに、作業フォルダも案件毎に管理しているので、html部分だけ別になると困る。 というわけで、案件毎に好きなフォルダでSSIとかWordpressが確認できるようにテスト環境を構築したい! ググってみたら「MAMP」と「Hoster」を使うことで意外と簡単に設定できました。 この2つのソフトをインストールすれば、通常の作業は ①Hosterでホスト名有効 ②MAMPでサーバー起動 で作業開始できます。 M

    Mac ローカルでWEB開発!「MAMP」と「Hoster」で簡単設定
    kiyokichi
    kiyokichi 2017/05/26
    ローカル作業するときに使うアプリケーションの設定方法とか。
  • RedWinder::MacApp::Hoster

    Download Hoster 1.2(1.208) 2008.09.14(JST) md5(5d5bfb8d34b38338c3f7f4a6e40c8997) MacOSX Universal Binary Version History Hoster は、ドメインとIPアドレスを関連づける、 Web開発用のユーティリティで、 ドメインとIPアドレスのマッピングを管理する hosts ファイルをGUIで管理するMacOSX用のソフトウェアです。 Web開発では、開発環境ごとに HTTP/1.1 で使用できるようになった Apache の VirtualHost の機能を使用しておこなうと便利です。 同じドメインで複数の開発サーバを用意すると番環境と同じURLで、操作できますので開発用の URL を用意しなくてもよくなります。 DNSで名前解決するとリリース環境のIPをひいてしまいますの

    kiyokichi
    kiyokichi 2017/05/26
    ローカル作業するときにhttp://127.0.0.1:8080/とかいちいち書かなくてもよくなるやつ。
  • [CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ

    テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。 参考: Internet Explorer サポートポリシー変更の重要なお知らせ そんなIE11時代、そして万が一のIE9を考慮した中央寄せに配置テクニックを紹介します。 テキストや要素を左右の中央寄せに配置 テキストや要素を上下の中央寄せに配置 テキストや要素を上下左右の中央寄せに配置 テキストや要素をビューポートの上下左右の中央寄せ

    [CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ
    kiyokichi
    kiyokichi 2017/03/30
    display:flex使うときは中身が1点のとき。
  • CSSでの表見出しの均等割付 (css3版) - 鍋の底

    NSEG Advent Calendar 2015 - Adventarにエントリを書きたいと思っていたら、ネタが降ってきたので急いで書きました。 というわけで12/23のエントリになります。 さて、ワープロなどにある均等割付を、Web でも表現したいという需要があります。 このとき css では text-align に justify を指定すると思います。 この文章のように複数行ある場合には、効いているように見えますが、 table の見出しセルを均等割付をしたい場合には、うまくいきません。 Webでしらべても「text-align justify 効かない」がサジェストに現れるくらいには、効かないもののようです。 なぜこうなるのか、文章に対する均等割付から考えてみましょう。 均等割付の際には、段落の最後で、均等に割り付けてしまうと、むしろおかしくなります。 そのためか、段落の最後で

    CSSでの表見出しの均等割付 (css3版) - 鍋の底
    kiyokichi
    kiyokichi 2017/03/29
    text-align:justify;使って表組み(display:table;使用のdt)に適用したいけどできず、text-align-last:justify;にしたらうまくいった!
  • イラストでわかる!git入門の入門

    こんにちは、アシアルの志田です。 社内でもgitが浸透し、皆バージョン管理といえばgitだよね、という空気になってきました。 ですが、これまでバージョン管理システムを使ったことがない人にオススメしても、 「gitて…まあ…そりゃ…ねえ、いつかやらないといけないけど…」 「ギット?ジット?俺はgiはジと読む派なので、gitは胡散臭いと思う」 「そもそもバージョン管理して何が嬉しいの?なんか難しそうでいやだ」 というような反応ばかりでした。 きっとみんな、gitって難しくて訳のわからんもんだと思っているのでは?と思い、 今回はgit入門の入門、gitってなんだ?というところから、簡単にgitを使う際の流れについてご説明します。 ちょっと不安を覚えるようなイラストがついていますので、頑張って読んでください。 バージョン管理ってなに? プログラムを書いていて、こんなことありませんか?私はあります…

    イラストでわかる!git入門の入門
    kiyokichi
    kiyokichi 2017/02/25
    Gitというかバージョン管理の概念説明がわかりやすい。
  • [バージョン管理]WebデザイナーでもできるBitbucketとSourceTreeを使って簡単バージョン管理 | Cappee Design

    梅雨入りしたのに快晴が続いてますね、@cappeeです。 コーディング中にちょっとしたミスをしてしまったり、クライアントさんにやっぱり元に戻してと言われたり、「ソースコードを前の状態に戻したい…」ってことはWebデザイナーでも少なくないと思います。 バージョン管理はエンジニアさんのためだけではありません:) 「バージョン管理導入したいけど、Gitとか難しそうだし」というWebデザイナー(非エンジニア)でも簡単に導入できるツールがあるので、設定方法などをご紹介したいと思います。 バージョン管理とは ソースコードの差分などファイルの更新履歴を管理してくれるシステムです。 プロジェクト内のファイルをバージョン管理することで、編集日や編集箇所などを記録しておくことができるので、過去のソースコードを容易に探すことができます。 複数人でひとつのプロジェクトに参加している場合は、同じソースコードを複数で

    kiyokichi
    kiyokichi 2017/02/25
    Git導入と使い方の手順
  • jQuery 外部ページでもスムーズスクロールを実装する方法 – 遷移先ページの任意IDへスムーズスクロール | Stronghold Archive

    どうもこんばんは。Toshikuraです。今回のTipsは【jQuery 外部ページでもスムーズスクロールを実装する方法 – 遷移先ページの任意IDへスムーズスクロール】です。通常のスムーズスクロールですとページ内にアンカーを設定しjQueryにて高さ取得&スクロールという手順ですが、記事ではページ遷移と組み合わせ遷移後に特定箇所へスムーズスクロールさせます。基的な部分のみですのでこのままでは微妙です、参考程度にご活用ください。 実装方法 実装方法は至ってシンプルです。まずは遷移後にスクロールするサイト(ここではB.html)へのリンクをA.htmlに記述します。 HTML(A.html) <a href="B.html?id=white">LINK</a> <a href="B.html?id=black">LINK</a> <a href="B.html?id=red">LINK<

    kiyokichi
    kiyokichi 2017/02/07
    ヘッダ固定ナビがある場合に、ページ内リンクはうまくいってもページ外リンクするとうまくズレを回避できない場合のjQuery記述。js-の読み込みはリンク元ではなくてリンク先で読み込ませる。
  • Flexboxで決まり! | Webクリエイターボックス

    2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います! ↑私が10年以上利用している会計ソフト! 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

    Flexboxで決まり! | Webクリエイターボックス
    kiyokichi
    kiyokichi 2017/02/03
    floatを使用しないボックスなどの横並び、flexとかについてのざっくりとした使い方
  • CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

    スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 では li にスタイルを適用すればクラスや ID を個別に指定しない限り全ての li にスタイルが適用されます。しかし、CSS3 ではクラスや ID を指定せず1番目の li、最後の li、偶数・奇数番目の li、というように細かなスタイルの指定ができるようになりました。 最初、最後、偶数、奇数番目の要素にスタイルを適用する方法というのは基なのでよく見かけますが、要素の2番目以降とか2番目以外にスタイルを適用する方法に意外に手間取ったのでメモしておきます。 要素の2番目以降にスタイルを適用 上の画像を例に2番目以降の li 要素にスタイルを適用する方法を紹介します。 2

    CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス
    kiyokichi
    kiyokichi 2017/02/03
    1番目以外 :not(:first-child)
  • CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分 - Qiita

    CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分HTMLCSSHTML5CSS3 ーーーーーーーーー 追記 2020年10/15 この歳になるとこういう記事のアプトプット怖いですね。。 とりあえず周り見てると、こうやってる人多いです html,body{ font-size:62.5%; } って書いてあげて そうすると 1.0rem が 10pxになるみたい。 そんで例えば24pxにしたい場合は2.4remって指定してあげるみたい。 以上。 ーーーーーーーーー いまだにレスポンシブ怖い、、、、。 なぜなら%とかemとかremフォントサイズ指定があるから。。。 これらをなんとなくでしてる人。 途中で引き継いだ案件とかでpx以外が指定されててビビってしまった 僕とあなたへ捧げます。 😭 大前提 CSSフォントサイズ指定方法は次の2つ

    CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分 - Qiita
    kiyokichi
    kiyokichi 2017/01/31
    remってなに?vmってなに?
  • Wordmark

    Wordmark helps you choose fonts by quickly displaying your text with your fonts.

    Wordmark
    kiyokichi
    kiyokichi 2016/10/08
    手持ちのフォントを一覧化してくれるサイト
  • jQueryで特定の要素が存在するかどうかを判別する処理|BLACKFLAG

    スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった場面にはよく遭遇するのでjQueryで要素の存在の有無を判別する処理を自分用のメモ書きとしてご紹介してみます。 jQueryで特定の要素が存在するかどうかを判別する処理【.length】 タグそのものに対して判別させることも可能ですが、サンプルではID「#sample」が存在するかどうかの処理について。 要素が存在するかどうかの判別方法はいろいろありますが、扱いやすかったものとしてまず「.length」を使っての判別から。 要素の数があるかどうか、を判別する処理になり、存在しない場合は値が空になるので、存在しないという判別になります。 「.length」を使っての「#sample」が存在した際の処理は以下のようになります。 ◆SCRIPT $(function(){ if($('#sample').length)

    jQueryで特定の要素が存在するかどうかを判別する処理|BLACKFLAG
    kiyokichi
    kiyokichi 2016/10/05
    $("").lengthか$("").size()で取得
  • position:fixedでヘッダ固定時のページ内リンクのずれを解消したい | Tips Note by TAM

    position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ:100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m

    position:fixedでヘッダ固定時のページ内リンクのずれを解消したい | Tips Note by TAM
    kiyokichi
    kiyokichi 2016/10/04
    マイナスmargin以外にもjQueryでヘッダの高さ分位値をずらす、というやり方も。
  • ページ読み込み後にjavascript(jQuery)を実行する方法

    こんにちは。まりもです。 ひさしぶりにweb系の備忘録です。 わざわざ記事にすることじゃないかもしれませんが、javascriptなんて全然理解してなくてjQueryもなんとな〜く使ってる無能コーダーな僕には有用な事で、しかも物忘れが激しいので残しておきます。 jQueryのプラグインを多用してると、その実行のタイミングが思い通りに行かなくてイラッとする事ってあると思う。 例えば、ブロックの高さを揃えるプラグインや、画像のサイズを一定にして並べてくれるギャラリーなど。 他にも、CSSでブロックの大きさを制御しているのに、htmlCSSjavascriptの読み込みタイミングが微妙にずれてレイアウトが崩れることもある。 ハイスペックなマシンで高速インターネット接続だと大丈夫だったりするけど、汎用スペックマシンの共有ネットワークだったり、スマホやタブレット端末だと処理が追いつかないから崩れ

    ページ読み込み後にjavascript(jQuery)を実行する方法
    kiyokichi
    kiyokichi 2016/10/03
    $(function~とか$(document~とかの記述の違いについて。どこの時点でjsを実行させるのかって話。