投稿日：2021-03-01T23:07:09+09:00

CSSでアンダーバーが消えない時の対処法

link_to等リンク関連の記述をすると、どうしても文字の下にアンダーバーがでます。
それらの消し方を備忘録として書いていきます。

解決方法

[例]
dog-name {
  text-decoration: none;
}
上記の記述で大抵は消えてくれますが、
消えない場合があります。

そんな時はこちら
a {
  text-decoration: none;
}
indexや他のhtmlで　< a >タグ　を使っていなくても
この記述で消えてくれました。

　　

カーソルを当てた時だけアンダーバーを出したい時は
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
この二つをセットで使うと
hover時に下線が浮かび上がります。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-01T22:46:14+09:00

【初心者でもわかる】文字の縁取りにも使える！box-shadowやtext-shadowを太く濃くする方法

どうも7noteです。影を太く、濃くする方法についての考察

cssで影を作るときに使われる、box-shadowとtext-shadowですが太さや濃さといった部分の調整って結構難しい。

そんな時の解決方法について考えてみました。

対処法①：色を濃い色を使ってみる。

これはいうまでもなくですね。もし薄い色を使っているのであれば、単純に濃い色を使うことで解決できるかもしれません。色も濃い方がハッキリみえるので若干太くもみえます。

でも真っ白の影をより濃くしようとおもっても、なかなか難しいので、この方法では難しいかもしれません。

対処法②：影を重複して書く

影を濃くしたい時に一般的に使われる方法がこれです。
cssの影はカンマ（,）でつなぐことで、複数指定することができます。
sample.css
/* 例 */

text-shadow    : 
   2px  2px 1px #003366,
  -2px  2px 1px #003366;
}
対処法③：ツールを使う

わざわざ計算しなくても、ツールを使うことで簡単に影を作ることができます。
こちらのツールは文字の縁取りを簡単にできるツールです。
縁取りで太くなった分の字間まで自動調整してくれるすぐれものです。

まとめ

現状完璧に思い通りの太さや濃さの影を作るには少々クセを掴まないと作れません。
でもそこをカバーしてくれるのがツールなので積極的に使って時短をして、空いた時間はほかのところに使っていくのがいいのかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-01T22:38:17+09:00

JavaScript、CSSのコード検証、整形ツールのまとめ

目的

開発に便利なJavaScript（JS）とCSSのコード検証、整形ツールに関する情報を要点を抑えて簡単にまとめる。
参考になりそうな記事もまとめて網羅的に調べやすい記事にしたい（更新していく）。

検証ツール?

検証ツールを使うことでコードが実行可能かどうかを検証できる。文法的に書き方が間違っているところなどが可視化されるため開発が捗る。

JSの検証ツール

npm trendsによると、主要なJSの検証ツールの中で現状ではほぼESLintが使われている。なのでESLintのみまとめました。

すごい人気ダァ。

ESLint

概要

JSのコードの検証ツールとして2021年時点で一番人気。部分的に整形も可能。
2021年2月現在のバージョンは7.20.0。
エディタ上で検証結果をリアルタイムに表示させるためにエディタの拡張機能をインストールするのが良いでしょう。

主な機能、仕様としては以下

エラーとするかどうかの検証ルールを自由にon/off可能

検証基準ルールが豊富、さらにたくさんのプラグインが公開されている

限定的だが整形ツールとしても使える

自分のプロダクトに合わせた独自ルールを作成することができる

ECMAScript2015(ES6)以降も標準サポート。

JSX記法もサポートしている。

ESLint参考記事

ESLint 最初の一歩
最初に読むならこの記事。ある程度の使い方はほぼわかるんじゃないかなって。

Step by Stepで始めるESLint
かなり詳しく書いてあるのでもっと詳しく調べたいならこの記事。設定ファイルの種類、ルール設定の記述の方法など丁寧に書いてある。

CSSの検証ツール

npm trendsを見ると主要なパッケージの中ではstylelintが圧倒的にダウンロードされている模様。てことでstylelintだけまとめていく。

stylelint

概要

CSSのコードの検証ツールとして2021年2月時点で一番人気。
デフォルトの状態ではルールは設定されていない。ルールを一つ一つ設定するのも良いが、ざっくりオススメルールを導入したい場合は拡張機能のstylelint-config-standardを導入するのが良い。
ESLintと同様に、エディタ上で検証結果をリアルタイムに表示させるためにエディタの拡張機能をインストールするのが良いでしょう。

主な機能、仕様としては以下

CSSは当然として、SCSS、Sass、Less、SugarSSも可能。

170を超える検証ルールがある

豊富なプラグインによる機能拡張

プラグインを入れると自動整形も可能

stylelint参考記事

stylelintの導入方法と各ルール解説
タイトル通り導入方法や代表的なルールの解説の記事です。

ここがすごいぞ！ stylelint！
stylelintの概要、良いところなどがまとまっている。ESLintに書き方が似ているのは確かに助かりますね。stylelint-config-standard、PostCSSについて、ルール違反時のメッセージのカスタマイズなどの情報もまとめてある。2016年の記事なので若干古い箇所もあるやも。

stylelintのorderモジュール選定
cssのプロパティを自動ソートする拡張機能についての記事。コードが見やすくなるので是非導入したいですね。
選ぶモジュールとしてはstylelint-config-recess-orderが良いのでは、と締めてある。

stylelintを使ってCSSプロパティのソートと整形を自動化する
自動整形の手順が紹介されています。VSCodeの拡張機能stylelint-plusの導入が必要。

整形ツール?

設定したルールに基づいてコードを自動整形してくれるツールです。
と言ってもESLint,stylelintのどちらも自動整形できるのでは・・・？？とここまで調べていて思ったのですが、整形ツールを用いてでしか整形できないコードがあり、手軽で確実というメリットがあるようです。
今のところNode.js上で動く一番人気の整形ツールはPrettierのようです。他の記事がほとんど見つからなかったのでこちらもPrettierのみまとめます。

Prettier

2021年2月最新バージョンは2.2.1。
ESLintを整形ツールとして利用するには細かく設定が必要なため、ファイルが膨れ上がり、メンテナンスも大変となります。そのため検証はESLint、整形はPrettireで行うのが良さそう。
ただし設定によってはESLintと干渉しあってうまく働かないので注意が必要。

主な機能、仕様としては以下

JavaScriptやCSSだけでなく様々な形式をサポートするコードフォーマッター。

設定が少なく単一で使うならすぐに導入することができる。

Prettier参考記事

Prettier 入門～ESLintとの違いを理解して併用する～導入方法の紹介、整形ツールを導入する理由やESLintにPrettierを併用する理由がまとめられています。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-01T22:24:35+09:00

画面上には表示されないinput要素を作成

type属性にhiddenを使おう
<input name="名前" type="hidden" value=<%= current_user.id %>>
画面上には表示されないinput要素を作成する場合は、type属性にhiddenを使う。
input要素を隠したい時に頻繁に利用します。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-01T21:19:12+09:00

CSSでテキストを浮かせたり、グラデーションをかける方法

はじめに

文字をサクッとデコレーションしたいなというときに役立つ方法をいくつか調べたのでまとめてみました。

テキストにグラデーションをかける方法

仕組みとしては背景色にグラデーションを指定し、テキストでくり抜くというものです。
HTML

<h1>グラデーション</h1>

CSS

h1{
  color: #ACB6E5;//非対応のブラウザでの文字色を設定
  background: -webkit-linear-gradient(0deg, #ACB6E5, #86FDE8);//背景色にグラデーションを指定
  -webkit-background-clip: text;//テキストでくり抜く
  -webkit-text-fill-color: transparent;//くり抜いた部分は背景を表示
}

ブラウザが非対応だった時のため、文字の色を指定しておきます。

ちなみにゴールドにしたいときはこのようにします。
とてもゴージャスになります！！

h1{
  color: #DA8E00;
  background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

浮き上がった文字

４方向に影をつけることで文字を作成できます。

<div class="sample1oya">
  <span class="sample1">浮いた文字</span>
</div>

.sample1oya{
  background  : #ffffff;
  padding     : 20px;
}
.sample1{
  display     : inline-block;
  font-size   : 160%;
  font-weight : bold;
  color       : #ffffff;
  text-shadow:  2px  2px 10px #777 ,
               -2px  2px 10px #777 ,
                2px -2px 10px #777 ,
               -2px -2px 10px #777;
}

動く影

animationを使うと影を動かすこともできます。

<div class="sample2oya">
  <span class="sample2">影が変化する</span>
</div>

.sample2oya{
  background : #fff;
  padding    : 20px;
}
.sample2{
  display    : inline-block;
  font-size  : 160%;
  font-weight: bold;
  color      : #fff;
  animation  : sample2Anime 4s linear infinite alternate;
}
@keyframes sample2Anime{
   0% { text-shadow:  2px  2px 10px #fff ,
                     -2px  2px 10px #fff ,
                      2px -2px 10px #fff ,
                     -2px -2px 10px #fff;}
 100% { text-shadow:  2px  2px 10px #777 ,
                     -2px  2px 10px #777 ,
                      2px -2px 10px #777 ,
                     -2px -2px 10px #777;}
}

インライン

htmlで下線を直接引く方法です。

<span style="text-decoration: underline">例文です</span>

終わり

以上簡単なデコレーション方法でした。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-01T03:57:11+09:00

MDwiki：レイアウトを自由に変更する

はじめに

MDwikiはmarkdownで書かれたテキストをお手軽にwebページ化することができる、お手軽なCMSである。

基本的にMdwikiは必要最小限のコンテンツを最小限の手間で公開にもっていくためのインスタントなシステムである。内輪向けのウェブサーバで、随時更新されていくマニュアルやレポートを共有するといった使い方に向いている。Markdownを加筆修正するだけなので、日々の更新作業にかかる手間と時間を大いに軽減できて便利だ。半面、複雑に凝ったサイト作成には向かない。

とはいえ、ある程度使い込んでくると、ページ全体の色調とかフォントとか、少しは自分好みに変更したいと思うのが人情だろう。そこで、この記事ではMdwikiページの「見栄え」を自由にカスタマイズするためのクイックハックを提示する。

mdwiki-debug.htmlの改造

MDwikiのパッケージにはいくつかのhtmlファイルが含まれている。普通はmdwiki.htmlを公開用に利用するだろうが、ここでは中身がminifyされていないmdwiki-debug.htmlを弄ってみる。

theme

MDwikiでは、レイアウトを「theme」を選択することで決定する。themeとはMDWiki用に調整されたCSSファイルである。公式サイトには13種類のthemeファイルが用意されている。このthemeを弄ることでMDwiki下の各ページの見栄えを変えることができる。

そこでレイアウト変更の手順は次のようになる。

適当なダウンロードファイルをダウンロードしてくる。

ダウンロードしてきたtheme内のCSSの記述を適当に改変する。

出来たCSSファイルを適当な名前に変え、適当な場所にアップロードして、インターネット上で自由にアクセスできるようにする。

mdwiki-debug.htmlに加筆して、上記のオリジナルthemeをthemeとして認識できるようにする。

mdwiki-debug.htmlを見ると、次のようにこのthemeを列挙している箇所がある。
    var themes = [
        { name: 'bootstrap', url: 'netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' },
        { name: 'amelia', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css' },
        { name: 'cerulean', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/cerulean/bootstrap.min.css' },
        { name: 'cosmo', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/cosmo/bootstrap.min.css' },
        { name: 'cyborg', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/cyborg/bootstrap.min.css' },
        { name: 'flatly', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/flatly/bootstrap.min.css' },
        { name: 'journal', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/journal/bootstrap.min.css' },
        { name: 'readable', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/readable/bootstrap.min.css' },
        { name: 'simplex', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/simplex/bootstrap.min.css' },
        { name: 'slate', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/slate/bootstrap.min.css' },
        { name: 'spacelab', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/spacelab/bootstrap.min.css' },
        { name: 'united', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.0/united/bootstrap.min.css' },
        { name: 'yeti', url: 'netdna.bootstrapcdn.com/bootswatch/3.0.2/yeti/bootstrap.min.css' }
このコードを頼りに、適当なCSSファイルをダウンロードしてくる。例えばwgetを利用するなら下のような感じになる。
ここではmytheme.cssという名前で保存することにしよう。
wget -O mytheme.css http://netdna.bootstrapcdn.com/bootswatch/3.0.2/yeti/bootstrap.min.css
cssの書き換え

このmytheme.cssをエディタで開いて編集する。
次のような記述をファイルの末尾に書き加え、後述するとおりに各ファイルを更新した後、ブラウザで当該ページを再読み込みしてみよう。該当箇所の色が変わっていることが確認できるだろう。
/* メニューバー全体 */
/* .navbar-inverse .navbar-brand{                                                                                                            
  color: yellow;                                                                                                                             
} */

/* メニューバー中のサイトタイトル */
navbar-header a.navbar-brand{
  color: magenta;
}

.navbar-inverse .navbar-nav > li > a { /* メニューバー中のプルダウンメニュー */
  color: orange;
}

/* 本文タイトル */
.page-header h1{
  color: green;
}

/* 本文 */
#md-content{
  background-color: #666;
}
JavaScriptの書き換え

前掲したthemesの定義部分を書き換えて、このmytheme.cssをthemeとして認識させる。
    {name: 'mytheme', url: 'example.com/mdwiki/mytheme.css'}
書法は、こんな感じになる。URLについては、先頭のhttps:は除き、しかしサイト名は省略なく書かなくてはならないようだ。これをvar themes = [のところに追記する。

navigation.mdの書き換え

どのthemeを使うかはnavigation.mdの中で設定することになっている。これを上記の変更を反映するように書き換える必要がある。
具体的にはgimmickパラメータを適切に設定する。
[gimmick:Theme (inverse: true)](mytheme)
おわりに

このように、オリジナルCSSファイルをMDwikiの各ページに適用させることができる。ブラウザの検証ツールを活用して作りこんでいけば、相当に印象を変えることができるだろう。

　 Tweet
Qiitaで続きを読む

20210301のCSSに関する記事は6件です。

CSSでアンダーバーが消えない時の対処法

解決方法

【初心者でもわかる】文字の縁取りにも使える！box-shadowやtext-shadowを太く濃くする方法

どうも7noteです。影を太く、濃くする方法についての考察

対処法①： 色を濃い色を使ってみる。

対処法②： 影を重複して書く

対処法③： ツールを使う

まとめ

おそまつ！

JavaScript、CSSのコード検証、整形ツールのまとめ

目的

検証ツール?

JSの検証ツール

ESLint

概要

ESLint参考記事

CSSの検証ツール

stylelint

概要

stylelint参考記事

整形ツール?

Prettier

Prettier参考記事

画面上には表示されないinput要素を作成

type属性にhiddenを使おう

CSSでテキストを浮かせたり、グラデーションをかける方法

はじめに

テキストにグラデーションをかける方法

浮き上がった文字

動く影

インライン

終わり

MDwiki：レイアウトを自由に変更する

はじめに

mdwiki-debug.htmlの改造

theme

cssの書き換え

JavaScriptの書き換え

navigation.mdの書き換え

おわりに

日付別

タグ一覧

対処法①：色を濃い色を使ってみる。

対処法②：影を重複して書く

対処法③：ツールを使う