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

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

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

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

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

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

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

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

sample.css

/* 例 */

text-shadow    : 
   2px  2px 1px #003366,
  -2px  2px 1px #003366;
}

対処法③： ツールを使う

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

まとめ

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

おそまつ！

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

type属性にhiddenを使おう

<input name="名前" type="hidden" value=<%= current_user.id %>>

画面上には表示されないinput要素を作成する場合は、type属性にhiddenを使う。
input要素を隠したい時に頻繁に利用します。

はじめに

HTMLなどでフォームを作る際にスマートフォンのフォームデザインが勝手に変わっていることがある。

筆者の場合、HTML, PHPを用いてフォームを作成した時、PCでは自分で考えたデザインが反映されたのに対して、スマートフォンで実機確認するとボタンのデザインが変わっていた。

解決方法

レスポンシブで自動でデザインが反映されたタグやクラスに対して、
-webkit-appearance: none;
border-radius: 0;
二つのプロパティを付ける。

（例）ブラウザによってボタンに自動で付けられた装飾を消去する

<input type="submit" type="cofirm" value="送信" class="c-btn">

該当するクラスがあるcssファイルにプロパティを適用する。

.c-btn {
　-webkit-appearance: none;
　border-radius: 0;
}

これで、レスポンシブ実装の時に自動でデザインが変わる現象を防げる。

P.S.

今回はこのプロパティを適用すれば防止できるよ〜という記事。
ブラウザが勝手にプロパティを付与する理由には調べている途中なので記載していません。

はじめに

webアプリケーションの実装について、ビュー(画面側)のコードには環境毎に独自の構文を埋め込むことで、webページを動的に生成する機能があります。
しかしこの構文が環境によって微妙に異なります。
いままで色々な環境での開発を経験する中で頭の中がごちゃごちゃになりそうなので、一度種類ごとに構文をまとめてみます。

１．JSP(Java系各種フレームワーク、サーブレット)

jspFile.jsp

<!-- 変数の値表示 -->
<%=(変数) %>

<!-- 処理記載 -->
<% (処理をここに書く) %>

<!-- ディレクティブ(JSPの設定) -->
<%@ (文をここに書く) %>

<!-- コメント -->
<%-- コメント文字列... --%>
<% /** コメント文字列... **/ %>

<!-- EL式 -->
${式}

２．Razor = .cshtml(ASP.net系)

razorFile.cshtml

<!-- 変数の値表示 -->
@変数

<!-- 処理記載 -->
@{ (処理をここに書く) }

<!-- 処理記載の中に、そのままHTML出力したい文字を入れる -->
@{ <text>そのままHTML出力したい文字</text> }
@: そのままHTML出力したい文字

<!-- 名前空間のインポート -->
@using 名前空間

<!-- コメント -->
@* コメント文字列... *@
<% /* コメント文字列... */ %>
<% // コメント文字列 %>

３．EJS(node.js系)

elsFile.ejs

<!-- 変数の値表示 -->
<%=(変数) %>

<!-- 変数の値表示(変数のエスケープをしない場合) -->
<%-(変数) %>

<!-- 処理記載 -->
<% (処理をここに書く) %>

<!-- コメント -->
<%# %>

上記の共通事項

• ここであげた方法でコメントを書くと、出力されるHTMLにそのコメントは出力されません。
• いずれも画面側のファイル単体では正しい画面表示ができません。ファイルはフレームワークのプロジェクト内に入れましょう。

はじめに

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

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

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

終わり

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

HTMLについて

　HTMLとは、私達が画面で見ている文字のことです
　コードで書く場合は"タグ"で囲みます。
　これをマークアップというみたいです。

マークアップしてみよう！

index.html

<h1>HTMLについて</h1>

ブラウザで表示するとこうなります。
これが見出しになります。
↓

と表示されます！
＊エディターはVSCodeです。 https://azure.microsoft.com/ja-jp/products/visual-studio-code/
＊ブラウザはGoogleChromeです。
https://www.google.co.jp/chrome/?brand=FDKM&gclsrc=aw.ds&&gclid=CjwKCAiAm-2BBhANEiwAe7eyFAQxQ3wNHOAnBFJBOU2032-zXQrDrS3oUBTBkUxAFPLi0-XkEyfAFBoCuUwQAvD_BwE

いろんなタグ

index.html

<h1>HTMLについて</h1>
<P>この記事は初心者が書いていますので、<br>お手柔らかにお願いいたします。</br></p>

と入力するとこうなります
↓

pタグ は、段落を表します。
brタグは、改行の場合に使います。

写真挿入

では写真を挿入してみましょう。

index.html

<h1>HTMLについて</h1>
<P>この記事は初心者が書いていますので、<br>お手柔らかにお願いいたします。</br></p>
<img src="images/images (1).jpeg">

と入力すると以下のようになります
↓

次回はCSSについてアウトプットしていきます。

ちなみにこのページ結構わかりやすいです。
https://developer.mozilla.org/ja/
タグについて解説してくれてます?

<input type="password">

の入力フォームはモバイル端末だとデフォルトでは英数字キーボードが表示されます。

しかし、パスワードを数字に限定したい場合には英数字キーボードは不便です。

input type="number"を使わずにテンキーを表示させるには、inputmode属性を使います。

このinputmode属性を指定することで、type属性にかかわらずデータ型を明示することができます。

今回は数字を入力させたいので

<input type="password" inputmode="numeric">

こうするとフォームの入力時にテンキーが出てきます。numericを指定した時のキーボードは０から９までの数字を入力するものです。負号キーを表示するかどうかは端末によります。

inputmode属性の値はnumericの他にもnone,decimal,text,tel,search,email,urlがあります。

大体type属性で指定できるので使うとすればnoneかnumericくらいでしょう。

HTML5.2で一瞬廃止になりましたが割と便利なので復活したようです。