カテゴリー
SugiBlog ホームページ制作・システム開発|大阪

ソーシャルボタンを綺麗に並べる

ブログ記事等に設置しておきたいSNSのボタンを綺麗に並べる方法

ボタンはulタグでli内に設置します。
そしてinline-blockで表示し、縦位置を上にすればOK。

.social_buttons{
    text-align: left;
}
 
.social_buttons > li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}
 
.social_buttons > li:first-child {
    margin-left: 0;
}
 
.social_buttons > li:last-child {
    margin-right: 0;
}
 
.social_buttons iframe {
    margin: 0 !important;
}
 
@media screen and (max-width: 780px){
    .social_buttons > li{
        width: 80px !important;
        margin: 0 7px 10px 0;
    }
}

263 views

CSSだけでボタン装飾を作るサンプル

画像を使わずにそれっぽく見せる方法

HTML

<div id="sample_button_wrapper">
    <div id="sample_button_body">
        <a href="#">Sample Button</a>
    </div>
</div>

CSS

div#sample_button_wrapper {
    border-radius: 7px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    display: inline-block;
    padding-bottom: 3px;
    box-shadow: 0 2px 3px #ccc;
}

div#sample_button_body {
    background: #fff;
    border-radius: 7px;
}

div#sample_button_body a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 8px 15px 5px 15px;
}

表示例)

色を付けたパターン

HTML

<div id="sample_button_wrapper2">
    <div id="sample_button_body2">
        <a href="#">Sample Button 2</a>
    </div>
</div>

CSS

div#sample_button_wrapper2 {
    border-radius: 7px;
    background: #006699;
    display: inline-block;
    padding-bottom: 5px;
    box-shadow: 0 2px 3px #999;
}
div#sample_button_body2 {
    background: #0099cc;
    border-radius: 7px;
}
div#sample_button_body2 a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 8px 15px 4px 15px;
}

表示例)

344 views

ルート検索 最適経路

営業の仕事をしていると、複数の場所を効率よく回りたい、という要求が出てくるかと思います。
GoogleMap APIを利用すれば出発地点、到着地点、8ヶ所の経由地を指定し、効率よく回るルートを検索することができます。
所謂巡回セールスマン問題を踏まえた結果を返してくれます。
その際はリクエストプロパティの「optimizeWaypoints」にtrueを設定しておきます。

しかし、経由地8ヶ所以上の検索はできません。
費用が発生してよいならば、23ヶ所まで検索できるようです。
では、費用をかけずに8ヶ所以上検索したい場合はどうしたらよいでしょうか?

どうにか自前でできないかと色々調べました。
巡回セールスマン問題、組み合わせ最適化、パス表現法、ナップサック問題、欲張り法、遺伝的アルゴリズム等々。

巡回セールスマン問題、組み合わせ最適化を踏まえた最適ルートの検索で、何通りのルートを計測すればいいかと言いますと、以下の通り

n!/2n

nを10とすると(10×9×8×7×6×5×4×3×2×1)÷(2×10)で181,440通りとなります。

更にnが増加すると莫大な計算量になってしまうので、日常のプログラムとして使用するには
現実的ではありませんし、スーパーコンピューターでも100億年かかるという計算量になってしまいます。

…無理です。。。

何か打開策はないかと、物理の仕事(仕事率)も応用してみようと試みましたが、力(N)に当たるものが
ないので、比較する値としては単純な速さとなってしまうので最適な結果は得られず断念。

最終的に、遺伝的アルゴリズムを見ていると、ルートをランダムに作成するしかないのか、
という結論に至り、研究は終了しました。

というわけで、PHPとJavaScriptを使いプログラムを作成しました。

続きを読む…»

5,612 views

CSSだけで実装する簡単なアニメーション [Transition]

アンカーテキストの色をじわっと変えたりすることがCSSだけでできちゃいます。
jQueryを使ってもできるようですが、ここではCSSだけで実装します。

書式

transition:
    アニメーションさせたいプロパティの名前
    アニメーション終了までにかける時間を秒で指定(省略すると0)
    イージングの種類(省略するとease)
    アニメーションが始まるまでの遅延を秒で指定(省略すると0);

例)

a
{
    color: #0099cc;
    text-decoration: none;
    bacground: #ffffff;
    transition: color 0.25s ease-in-out;
}
a:hover
{
    color: #95e4ff;
    text-decoration: underline;
    background: #49b6da;
}

続きを読む…»

1,157 views

レスポンシブwebデザインのCSS

簡単なレスポンシブwebデザインを実装してみましょう。
以下のようなHTMLがあったとします。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div class="content">
    sample
</div>

</body>
</html>

まず、どんな画面サイズでも共通となるスタイルを記述します。

@charset "utf-8";

*
{
    margin: 0;
    pading: 0;
}

各画面サイズに適用するスタイルをMediaQueryを使って指定していきます。
続きを読む…»

828 views