HTML/CSS

WEBサイト作成には必須の言語

プログラマーやコーダーでなくても、ECサイト(ネットショップ)の担当や自社サイトの編集を行う立場になったのであれば最低限知っておきたいのがHTMLとCSSです。

サイトのパーツを作るHTMLと設計図にあたるCSS。どちらも年々進化しており完全に理解しようとすると非常に困難なのですが、最低限の知識を持っておくだけで見栄えの良さ、或いはSEOに対しても非常に優位を持つことができます。また既存テンプレートのカスタマイズにも大きく役に立ちます。

記事数はそこまで多くありませんが、極力サンプルを多用して噛み砕いた説明記事にしてあります。

HTML・CSS初心者の方の助けとなれれば幸いです。

HTML/CSS

モダンブラウザのconic-gradient対応が完了していた

円錐状のグラデーションを描写するconic-gradient。conicはconicalのことだそうです。コーヒーミルの種類にコニカルカッターってありますけど...
HTML/CSS

font-sizeはclamp()関数で指定する

調べてみると、当サイトの全アクセスの約1%がInternet Explorerユーザーなのですが、Office365のIE 11サポートが本年8月17日に切れ...
HTML/CSS

CSS:text-decorationでできること

text-decorationプロパティは以下のプロパティを一括指定するショートハンドです。text-decoration-line(線の位置) text-decoration-style(線の形) text-decoration-color(線の色) text-decoration-thickness(線の厚み)
HTML/CSS

slick.jsのオプション設定をPC / モバイルで切り替える

slick.jsのレスポンシブ設定について説明します。レスポンシブ設定といっても『viewportに合わせたサイズで表示する』といった話ではなく、たとえばPCビューではドットを表示する、タブレット以下では表示しない、などのオプション切り替えの話です。slick.jsにはresponsiveオプションがあらかじめ用意されているので、respoinsiveオプションで、breakpointとsettingsを指定してやるだけです。respondToではレスポンシブ設定を基準を指定します。
HTML/CSS

サイトをダークモードに対応させる

長引く自粛につれてディスプレイを眺めている時間が増え、ダークモードを利用する人が急に増えたような気がします。 身近になったダークモードですが、ブ...
HTML/CSS

option名が長すぎて表示できない問題にはoptgroup

optionの名前が長すぎると、画面幅からはみ出た部分が表示されない問題が起こりますが、optgroupタグで入れ子にすると自動的に改行、または文字サイズが縮小され途中で省略されずに表示できるようになります。
HTML/CSS

疑似要素 nth-child の使い方いろいろ

今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。 初見でかるい気持ちで使用すると、css指定が効か...
HTML/CSS

smartyテンプレートのループ処理の中で計算したりする

で使用されているsmartyはphpのテンプレートエンジンですが、phpとは若干違う部分もちらほらあります。 今回、ループ中の計算で少しハマってしまった...
HTML/CSS

cat修飾子で変数と文字列を結合する [smarty]

smartyテンプレートでは「 . 」で文字の結合ができないため、文字列を結合するときは |cat: を使用します。連続して使用することも可能です。 例...
HTML/CSS

slickスライドをドットの代わりにサムネイル連動にする

slick sample まれに質問があるので、スライダー系JQuery「slick」をサムネイルスライダーと連動させる方法について書いておきます。 ...
HTML/CSS

schemaに関する備忘録

随時追加 itemtype="〜WebPage"をより具体的に指定する場合。 以下の値を使用できる。 ItemPageContact...
HTML/CSS

cssで作るイメージギャラリー

htmlとcssしか自由に編集できない環境でLightBox風のイメージギャラリーを作りたい。となったとき、これまでは :target疑似クラスを使用していた...
タイトルとURLをコピーしました