カテゴリー: コーディング

WordPressでサイトを制作する上で、特定のカテゴリーに対して違うレイアウトにしたりなど、色々あると思います。
スラッグを利用してCSSを適用すれば固定ページ作成の際に設定する
出し分け以外にも色々応用できます。

スラッグの取得

post_name; 
?>

上記では、h2のtittleのところにページのスラッグ名が出力され、親要素のclassにスラッグ名が付与されます。

親要素にwidthを指定してmargin:0 autoで中央寄せにした後、
子要素にposition:fixed、left:autoを指定するだけです。

■html

    

        
テキスト
    


■css
#box{
width:300px;
height:250px;
margin:0 auto;
padding:0;
}
 
#inner{
width:20px;
height:50px;
position:fixed;
left:auto;
top:0;
margin:0 0 0 900px;
padding:0;
}

グラデーションや影などCSS3だけで表現できるようになり、
画像のみで表現していたものを、簡単に設定することができるようになりました。

CSS3を使用すれば、誰でも簡単に高級感のある表現ができるようになります。

今回は、スタンプを押したような文字(レタープレス)をCSSで簡単に表現すり方法を紹介します。

レタープレスはtext-shadowを使用することで表現ができます。
text-shadowのカラーは白なので、背景が白だとうまく表現できません。黒に近い色であるとうまく表現されます。

text-shadow: 0 -1px 1px #888, 0 1px 1px #fff;
background-color:#555;
font-weight:bold;
color:#aaa;

横揺れは、スマホの画面幅より大きな要素がある場合発生します。
はみ出している要素の分だけ横にスクロールされます。

横揺れが原因で下にスクロールするのが難しくなって、離脱されてしまうことが多くなってしまうので、あまり良くありません

よくある原因としては、
表組みで使われる　tableタグ
googlemapやfacebookなどでも使われる iframeタグ
コードなどの記載で使われる preタグ

などですが、positionで指定ミスで検証ツールやandroidで見ていても横揺れは発生しないのに、iphoneのみ発生してしまう、厄介な現象もあるので、注意が必要です。

なので、対策としてコードなどの記載で使われる [pre]タグでは

.sample { overflow: auto; }

.sample { word-wrap: break-word; }

広告が原因で横揺れしているケースでは、
広告作成時に「レスポンシブ」を選択することが一番です。

今回は便利なcssのセレクタ指定方法を紹介します

#example>* {
 margin: 0 10px;
}

親に内包れる直下要素のみを対象に指定できます。
親要素であるexampleの直下の要素すべてにマージンが設定されます。

div[id^="sapmple"] { /* 属性 ^=" 文言"]で、【属性】が【文言】で始まる要素 */
 color: green;
}

p[class$="Txt"] { /*  属性$=" 文言"]で、【属性】が【文言】で終わる要素 */
 margin: 10px;
}

div[id*="Box"] { /* 属性*="文言 "]で、【属性】に【文言】を含む要素 */
 padding: 5px;
}

#sapmpleTxtBoxとセレクタ名を指定していたなら、上記の前方一致と後方一致、部分一致にあてはまります。

文字の色や背景色などに多く使うことが多いですが、

カラーコードでの指定

色指定を16進数指定する方法です。
現在主流といってもいいほど多く使われる指定方法です。

.example{
  background: #f0f;
}

カラーネームでの指定

.example{
  background: red;
}

カラーネームで、たくさんの種類の色を指定できます。
表示されない色などブラウザによっては存在することがあります。
カラーネーム

rgb、rgbaで指定

コチラでは文字の透明度はそのままに、背景の色を透過できたり便利な指定方法です。

.example{
   background: rgba(赤(0～255),緑の量(0～255),青の量(0～255) 0.8);
}

hsl、hslaで指定

色相 = Hueは、0～359の値で指定します。
これは、色相環の角度になります。

彩度 = Saturationです。
この値は、0%～100%で指定します。

輝度 = Luminance
この値も、0%～100%で指定します。

.example{
  background: hsl(0,100%,50%);
}
.example{
  background: hsla(180,100%,50%,0.5);
}

minmax()の値には、適用する要素の最小値と最大値を指定することができます。

minmax(min, max)

min, maxにはには、次の値を利用できます。

1,px単位
2,%単位
3,fr単位
4,auto
5,max-content
6,min-content

.example {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 1fr 1fr;
}

ビューポートのサイズを変更すると、
最初の要素は100px〜200pxの間の幅になり、2番目と3番目の要素は残りの空きスペースを均等に占めるように横幅を可変させます。

IE, Edgeではベンダプレフィックス（-ms-）を加える必要がありますが、
minmax()はすべてのブラウザにサポートされています。

pxや、%, em, rem, vw, vhなどの相対単位を使っても、
異なる単位間で計算することができる「calc()」での使用法です。

「calc()」は2つの利点があります。
1.異なる単位で計算することが可能です。例えば、相対単位（vw, vhや%）,
絶対単位（px）を組み合わせることができます。
2.ブラウザでの値が動的になり、ビューポートの変更に合わせて適応できます。

.exsample{
    width: calc(100% - 10px);
}

calc()」の実装例: 要素のセンタリング

要素をボックス内で上下左右、中央にセンタリングすることができます。

.exsample {
    position: absolute
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

上記の例では縦、横ともに100pxのボックスの場合上下中央の配置となります。

今回はCSSのコメントアウトの重要性についてです。

コメントアウトなんてせずにcssの記述をしていると、書いている人にとっては良いでしょうが、
メンテナンスする人にとっては、読みにくいCSSを書いていることになります。
CSSに限らずdivの閉じタグなど重要なので入れていくほうが良いでしょう。

■CSS コメントアウトの例
一行

   width:100px; // コメントアウトの内容

複数行

/*
 コメントアウトの内容
 コメントアウトの内容
 コメントアウトの内容
*/
   width:100px; // コメントアウトの内容

上記が基本的な書き方となりますが、
いろいろなデザインにして、読みやすくすることもできます。

/*
*
*	コメントアウトの内容
*/

/*-------------------------------
 
	コメントアウトの内容
 
-------------------------------*/

コメントアウトを利用するのが面倒くさいと思う人もいるかもしれませんが、
後々のメンテナンスや修正で非常にわかりづらいと時間の無駄になったり、面倒なことになります。

Creative CloudのCreative Cloud Extractを使用すれば、
スライスを自動で行ってくれたり、CSSを自動生成してくれます。

https://assets.adobe.com/
上記の、サイトにアクセスしてPSDをアップロードして、
「詳細」「アクティビティ」「Extract」のメニューから「Extract」をクリックします。

Creative Cloud Extract 画面では、
選択した要素に対し、右メニューにcssが表示されたり、フォント、カラー、レイヤーの選択までできてしまいます。

できることとしては、
1.画像を書き出す
2.テキストをコピー
3.グラデーションのCSSを自動生成

などです。

Creative Cloud Extractだけでなく、DreamweaverにもExtractが入っています。