LoginSignup
1
1

More than 5 years have passed since last update.

@Hayakuchi0

Semantic UIを使ってテキストサイト的な質素なページを改造してみたのでメモ

Last updated at Posted at 2018-07-29

読まなくてもいい前書き(個人的な事情)

そろそろポートフォリオ的な何かが欲しい、しかし個人的にはオサレなふいんきは好きじゃない
オサレさばかりに気を取られててなんか見づらいサイトよりはいっそ昔のテキストサイト的な簡素なUIの方が使いやすいから好み
とはいえ世間の流れはオサレなサイトでないとあんまり認めるふいんきじゃない
というわけでしょうがないから手軽さを最重視して部分的にオサレっぽいふいんきに魔改造しようと試みた

環境

CentOS7
Apache2.4.6

CSSテンプレートをインストール

一からCSSを作るのは結構手間がかかるのでCSSテンプレートでよしなにしてくれる事を期待し微妙な所を自力で解決する方式に決定
使用するCSSは学習コストの低さに定評があるらしいSemantic UIを使用
とりあえず以下のコマンドで解決。公式のやり方だとgulpを入れた時にopenssl関連でエラーが起きるときがあるのでaptでupdateしましょう

# yum insatall npm openssl
# yum update openssl
# npm install -g gulp
# npm install semantic-ui --save

するとこんなのが出る。正直よくわからないので全部自動で任せることにした。

[04:02:29] Starting 'run setup'...
? Set-up Semantic UI 
❯ Automatic (Use default locations and all components) 
  Express (Set components and output folder) 
  Custom (Customize all src/dist values) 

? We detected you are using NPM Nice! Is this your project folder? カレントディレクトリのパス (Use arrow keys)
❯ Yes 
  No, let me specify

こいつが出てくるが特に何も考えずEnter

? Where should we put Semantic UI inside your project? (semantic/)

カレントディレクトリにsemantic-uiが生成されるのでcssを置く場所へコピー

# cp semantic-ui /var/www/html/hoge/

実際に入れてみる

Semantic UI部分

いじるファイルの準備

いじりたいhtmlファイルには必ずsemantic UIを読み込ませんきゃいけない
というわけでSemantic UI及びそれに必要なjqueryを読み込ませるためhtmlファイルのheadタグにこんな感じの記述を追記。
いんたーねっつに繋がってない状態だとjqueryを見れないのでいないとは思うけどオフラインで見る人向けに作ってたりオフラインで作ってる人は注意

/var/www/html/fuga/index.html
<!--前略-->
  <head>
<!--中略-->
     <meta http-equiv="Content-Script-Type" content="text/javascript"> <!--既に書いてある場合は省略-->
     <link rel="stylesheet" type="text/css" href="../hoge/semantic/dist/semantic-ui"><!--Semantic UIのCSS読み込み-->
     <link rel="stylesheet" type="text/css" href="../hoge/osare.css"> <!--全体的に欲しいデザイン改修用のCSSを入れる-->
     <link rel="stylesheet" type="text/css" href="../hoge/kobetu.css"> <!--個別に欲しいデザイン改修用のCSSを入れる-->
     <script
         src="https://code.jquery.com/jquery-3.1.1.min.js"
         integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
         crossorigin="anonymous"
     ></script><!--jquery読み込み-->
     <script src="../hoge/semantic/dist/semantic.min.js"></script><!--Semantic UIのスクリプト部分読み込み-->

<!--以下略-->

ヘッダー系のタグをいじる

h1系のタグはclassをui headerにすればいいので手当り次第クラスをつける

/var/www/html/fuga/index.html
<!--前略-->
<h1 class="ui header">
<!--以下略-->

vimでまとめて直したいならこんな感じ

:%s/<h1/<h1 class="ui header"/gc

リンクをいじる

概要とかは無かったけどもリンク先が欲しいツールだったのでリンクを表すのにはまずitemでくくって説明を入れておいた

/var/www/html/fuga/index.html
<!--前略-->
<div class="ui items">
     <div class="content">
         <div class="header">リンク先のタイトル</div>
             <metadata>
             <div class="description">
                 <p>
                     <a href="リンクのアドレス">ルールブック</a>
                 </p>
             </div>  
     </div>  
</div>  
<!--以下略-->

プルダウンメニューをいじる

プルダウンメニューを弄りたいならclassをui dropdownにすればいいらしい。が、selectタグをそのまま使う場合はそれだけだとなんか微妙だったので改造(後述)

/var/www/html/fuga/index.html
<!--前略-->
<select class="ui dropdown">
<!--以下略-->

CSSをいじる(全体編)

流石に有名なCSSを入れるだけでごまかせるわけはなかったので、手っ取り早くオサレ感出せてるように感じたCSSを入れる。
なるべく時間をかけず、ソースとかよく見たら微妙な感じだけども、パット見いい感じをコンセプトに。

全部の要素フェードインにする

アニメーション入れてればなんかオサレ感出るだろうということで一番手っ取り早いフェードインを入れてみる

/var/www/html/hoge/osare.css
* {
//前略
    animation: fadeIn 0.5s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 1 normal;
//以下略
}

プルダウンメニューをオサレにする

デフォルトのプロダウンメニューのままだとオサレ感が微妙なので改造

/var/www/html/hoge/osare.css
select {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background: url(../images/arrow.png) no-repeat;//プルダウンに出てくる三角を自前で用意
    background-size: auto 50%;//用意した三角をいい感じのサイズで表示
    background-position: right center;//三角の位置をいい感じに
    background-color:#7f7fff;//プルダウンの背景色を直す
    border-radius:0.5em;//プルダウンの角を丸くする
}

文字の色と背景の色を変えておく

文字の色が無編集なのはどうなのかということで色をつけて背景もそれに合わせておく。今回のページは暗い近未来ちっくなふいんきをベースにするので黒背景に白文字と明るめの青影をチョイス
Semantic UIでは文字色に意味があるものがあるので、黒系の背景の場合にはinvertedクラスを入れて反転色にしておく

/var/www/html/hoge/osare.css
* {
//前略
    color:#ffffff;
    text-shadow:0.1em 0 0 #bfbfff;
//以下略
}
body {
//前略
    background-color:#000000;
//以下略
}
/var/www/html/fuga/index.html
<!--前略-->
<h1 class="ui header inverted">
<!--以下略-->

vimでまとめて直したいならこんな感じ

:%s/ui header/ui header inverted/gc

CSSをいじる(個別の要素編)

幅周りを直す

2カラムにしておくと親切な部分があるので2カラムにしておく。幅全体を使うと見づらいのでそこの補修も忘れない

/var/www/html/fuga/index.html
<!--前略-->
<div class="ui stackable grid align center" style="width:80%;margin:auto;padding:auto;">
    <div class="eight wide column" style="width:40%">
<!--左カラムの内容-->
    </div>
    <div class="eight wide column" style="width:60%">
<!--右カラムの内容-->
    </div>
</div>
<!--以下略-->

結果

実際にやってみたけども、まあそれなりに誤魔化せてる気がしなくもないような誤魔化しきれてないような気もする。
今後はスマホ対応とかもしてみたい。
https://hinesm.info/killersHavenTools/

参考サイト

https://semantic-ui.com/introduction/getting-started.html
https://semantic-ui.com/modules/dropdown.html
https://semantic-ui.com/elements/header.html
http://www.nakamurayuji.com/archives/3045

https://q-az.net/fadein-open-only-css/
http://www.htmq.com/css3/animation-name.shtml
http://mmt45.net/2015/01/19/select%E8%A6%81%E7%B4%A0%EF%BC%88%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%81%AA%E3%81%A9%EF%BC%89%E3%82%92css%E3%81%A7%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E8%AA%BF%E6%95%B4%E3%81%99%E3%82%8B/
http://portaltan.hatenablog.com/entry/2016/01/06/135441
https://qiita.com/pugiemonn/items/82d2dc40c3b2d0be993c
http://www.htmq.com/css3/animation.shtml
https://chaika.hatenablog.com/entry/2016/07/06/083000

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1