ロト君のサイト by lotokunn

L'sCore ロト君のサイトへようこそ!

  1. TOP
  2. パソコン
  3. サイト開発ツール

サイト開発ツール

皆さん今日は!ロト君です!!
本日は、サイト開発に使用しているツールについて記載したいと思います。

 

まず始めに、私の使用しているパソコンの仕様から記載致します。
1.パソコンの仕様
OS:Windows7 Ultimate 64bit

CPU:AMD Phenome(tm)II X6 1090T Processor 3.20GHz
RAM:12.0GB

 

既に、化石状態のパソコンちゃんですが、まだまだ現役で活躍しています。当時の相場的にはややお高めでしたが、5年以上動かして全然へっちゃらなので、今後も活躍させたいと思います。(ライゼンで今度作りたいなぁww)

 

2.ツールについて
基本的には私が使っているツールは無料のものを使用しています。特に重宝しているのは下記のものです。

 

2-1.XAMMP
XAMPPは、ローカルに仮想サーバを組めるツールです。これを使えば、WordPressなど、PHPやMySQL等を活用できます。
勿論、Apacheも付属しています。
実際に私が使ったいるXAMMPV3.2.2と2015年バージョンで古いので更新が必要ですが、一応、現役で動いています。
V3.2.2のPHPは、V5.5.35となっています。ですので、PHP7は使えないようですねww
ダウンロードサイトは下記のものです。
https://www.apachefriends.org/jp/index.html
WordPress等の試は、「xammp/htdocs/wordpress/xxx/xxx/index.php」のようなディレクトリで使えます。実行URLは、「localhost/wordpress/index.php」の様な形になると思います。

 

2-2.Sublime Text
Sublime Textはhtmlなどの入力を支援してくれるツールです。
これを使う前は、Windows標準のメモ帳を使っていましたが、Submile Textを使ってからはこれ一本で、html、php等を書いています。
ダウンロードサイトは下記のものです。
https://www.sublimetext.com/3
英語表示のサイトですが、Downloadより、自分のスペックに合わせた内容のものをダウンロードしてご活用下さい。

 

2-3.Google Chrome
昔は、IEしか使っていませんでしたが、2012年頃からスマートフォン等のアプリで良く目にし使うようになって来ました。
Chromeの素晴らしいと思っている機能は、「F12」を押して表示される「developer tool」ですね!
bodyタグなどのpaddingなどのCSS情報をすぐに読めますし、書き換えも可能です!!
とある、WordPressの勉強会で教えて頂き、Googleのすごさが分かりました!!!!!
ダウンロードサイトは下記のものです。
https://www.google.co.jp/chrome/browser/desktop/index.html
検索エンジンなどで、入力したらすぐに出てくると思いますの検索してもOKですねwww

 

3.まとめ
以上、私が使っているサイト開発ツールでした。有料のものは「Adobe CC」などを使っています。少々お高いですが、どうしても使いたい方は検討したらいかがでしょうかぁ??
後、サムネイルなどは自前のhtmlで構成し、「Alt+PrintScreen」しています。
基本的なhtmlは下記のものです。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サムネイル作成</title>
<link rel="stylesheet" type="text/css" href="css.css">

</head>
<body>
<div>
<img src="sample.jpg" id="thumbnail">
<div id="thumbnail">
<div id="thumbnail1">
<p>サイト開発ツール</p>
<p></p>
<p></p>
</div>
</div>
</div>
</body>
</html>

付随するcssは下記のものです。

@charset "UTF-8";
img#thumbnail {
width: 850px; height: 478px;/*478px;*/
/*border: #CCCCCC solid 5px;*/
text-align: center;
position: absolute;
z-index: 1;
}
div#thumbnail {
width: 850px; height: 287px;
margin: 95px 0px; padding: 0px;
background-color: rgba(255,200,150,0.75); /*rgba(150,150,150,0.75);*/
text-align: center;
position: absolute;
z-index: 1;
display: table;
}
div#thumbnail1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
p {
font-size: 70px;
font-weight: bold;
line-height: 0%;
color: #f04848;
text-shadow: 5px 5px 1px #FFFF00;
}

以上の2つを組み合わせると今回のサムネイルが完成します。
↑観たいな感じですね!
今回はここまで!色々使えるツールですので、Windowsの方は持っておいて損はないかと思います!では。(・ω・)ノシ


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA



Hello!!

皆さんこんにちは!こんばんは!!ロト君です。

このサイトは私が興味を持ったモノやコトについて掲載をしていくサイトです。

主にパソコン関係やアニメ・ゲーム等について掲載すたいと思いますので、 どうぞ宜しくお願い致します!

コメント等はTwitter等を活用して頂けると有り難いです!!

Twitter: ロト君@lotokunn