alienHRNの訓練日記

IT業界初心者で勉強中。

2021/3/3 就職先決定&Excel フィルター機能の使い方

就職先が決定。3月1日より出勤

インフラ関係の仕事からスタート

 

本日はテレワークで課題に取り組みエクセルの復習

 

データや表の中から条件を定めて合致した値を抜粋する方法

 

フィルター機能

①データ・表の上部(項目等記載されている部分)をドラッグ

②ホームタグの編集の「並べ替えとフィルター」の「フィルター」クリック

③ドラッグしたところに三角マークが出るのでクリックして条件に合うように

項目を選択する

④条件を選択すると条件に合致したものだけが表示される。

 

 

20201126 Sass&BEM

授業メモf:id:alienHRN:20201126113158p:plain

 

SaasとBEMについて

Saas
「Sass:Syntactically Awesome StyleSheet」はCSS
メタ言語(対象言語を一段高い次元から論じる言語)。

CSSを効率的に記述していくための言語
学習コストが高く、あまり普及しなかった
CSSさえ分かっていれば記述できる

拡張子「.sass」を使用する「SASS記法」:元からある記法
拡張子「.scss」を使用する「SCSS記法」:後から追加された記法


・導入手順
VscodeにLive Sass Compilerをインストールする。
→画面右下にコンパイラーのロゴがでる
scssに記述するするときはコンパイラーを起動すること。

拡張機能「HTML hint」をアンインストールしたあとじゃないとエラーになるので注意


〇SASS記法
Sassファイルを拡張子「.sass」で作成
CSSのブロックを「{}」ではなくインデントで表現
命令終了の「;」を省略

Sassファイル(Scssファイル)に記述するとCSSファイルにも同時に記述される

例))


ul{
list-style: none;
padding-left: 0;


li{
border-bottom: solid 1px;
}
//入れ子にすると子孫セレクタになる
}


〇&を使用
a{
color: aqua;
&.-btn{
border: solid;
// [&]は親セレクタを意味する
// 入れ子になっているが子孫セレクタになっていない

}
&:hover{
text-decoration: none;
}
}

〇「$変数名」
$color-base:red;
$color-key:blue;

上記のようによく使う値を変数に代入して使用できる。

文字色や背景色などのカラーコード
フォントファミリー
カラム幅
ブレイクポイント等・・・。

EX))
$color-key:yellow;

li{
border-bottom: solid 1px $color-key;
}
↑色の一元管理が可能になる


$path: '../img/';
.block {
background-image: url(#{$path}bg.png);
}
ファイルパスも変数化することが可能
文字列として変数を使用する場合は#{変数名}画像ファイル名.png


〇パーツ化して利用
パーツ化は主流

・style.scss:本体CSSには

@import 'parts/header.scss';
@import 'parts/footer.scss';
を記述することによってheaderとfooterのパーツを本体CSS
読み込ませることができる
※拡張子を省略することも可能

部品化されたSassファイル
ファイル名の前に「_」を入れることで部品Sassと明示することができる
部品Sassはコンパイル後にCSSファイルが生成されない


〇よく使う記述を部品化:@mixin
mixinフォルダをCSSフォルダ内で作成
→_media.scssファイルを作成。
下記を記述
@mixin pc {
@media screen and (min-width: 480px) {
@content;
}
}
@mixin sp {
@media screen and (max-width: 479px) {
@content;
}
}
↑レスポンシブ対応のCSSを記述することができる。
これは一例。

部品の呼び出し:@include
例))
.header{
padding: 60px;
@include sp{
color: red;
}
@include pc{
color: blue;
}
}

// mixinの定義方
// @mixin 呼出し名※関数名{
// 呼び出されたときに記述される内容
// @contentは呼出し時のブロック内の内容を反映させる
// }


〇BEMについて
よく使われるclass名の命名規則
HTMLにclass名をつける時の代表的な命名規則には以下の3つ。

・BEM(Block-Element-Modifier:ベム)
・OOCSS(Object Oriented CSS:オーオーシーエスエス
・SMACSS(Scalable and Modular Architecture for CSS:スマックス)


・BEMのメリット
  パーツ単位でデザインを管理する為、変更時に他のパーツへの影響を考慮しなくていい
  セレクタ入れ子にしないので優先度問題が発生しにくい
  BEMを採用している会社が多い

・BEMのデメリット
  class名が長い
  すべての要素にclass名を付与するのでHTMLが読みづらくなる
  Bootstrapとの相性が悪い(BootstrapはOOCSSを採用している)

・Block パーツ単位の管理
  パーツとして独立完結しており別場所に移動しても機能する
  Block内にBlockが入れ子になってもOK
  ※ただしスタイルはBlock単位で記述し、複数のBlockをまたいでの子孫セレクタを使用しない
例))「ヘッダーパーツ」「アイキャッチパーツ」「ナビパーツ」等、大枠の区切り

 命名のルール
  <div class="block名">


  ・Element パーツ内の部品
    必ずBlock内にある
    同じElemantが複数存在してもOK
    Element内にElementが入れ子になってもOK
    ※入れ子が深くなる時はElement内でBlockを作成できないか検討する

   命名のルール
    <div class="Block名__Element名">
       ElementはBlock名の後に「_(アンダースコア)」を2つでつなぐ。
    この「_(アンダースコア)」2つを「セパレーター」や「区切り文字」と呼び、
    後述のModifierの区切りや名前の区切りと判別できるようする。

    ※名前が2つ以上の単語になる場合
      <div class="logo__company-name">
      BlockやElementの名前の単語が2つ以上になる場合は「-(ハイフン)」で単語を繋ぐ


      ・Modifier
        パーツのバリエーション(状態):Modifier
        パーツ構成は一緒だが「見た目」や「動き」の違うパーツを作成する際にModifierを使用。
       Modifierのルール
        既存のBlockもしくはElementに付与する
        1つのパーツに複数Modifierを付与してもOK

       命名のルール
        <div class="Block名__Element名--Modifier名">
          ModifierはBlock名やElement名の後に「-(ハイフン)」を2つでつなぐ。



        ・命名規則をカスタマイズ(変則BEMを考える)
          BEMはclass名が長くなるというデメリットをもつ。そのデメリットを少しでも軽減する
      ための工夫。
          名前が2つ以上の単語になる場合
          名前の単語が2つ以上になる場合は「-(ハイフン)」で単語をつないでいたが
          キャメルケース記法で命名する。
        <div class="intro-item">
          キャメルケース記法(2つ目以降の単語の頭文字を大文字にしてつなぐ)に変換する。
          →<div class="introItem">

            〇SassとBEM組み合わせ
            ・CSS用クラス名の命名規則
              CSS用にid属性は使わない
              class属性はBEMで命名する
              基本的にすべての要素にclass属性を付与する
               ※CSSファイル内で要素セレクタを使用しないようにするため
              サイト共通のデザインを反映させる時は「_クラス名」と
              「_(アンダースコア)」始まりで命名する
              例)「_inner」「_pc」「_sp」等
              JavaScript用のid属性やclass属性は「js-名前」と接頭辞「js-」をつける

            ・フォルダ構成
            cssフォルダ
            scssフォルダ:Sassファイル群
            base:リセットとサイト共通定義
            _init.scss:サイト共通定義
            _reset.scss:リセットCSS
            mixinフォルダ:サイト内で何度も使うデザイン定義群
            _btn.scss:ボタンデザイン
            _font.scss:書体関係デザイン
            _form.scss:フォームデザイン
            _media.scss:メディアクエリ
            _other.scss:その他
            moduleフォルダ:ブロック(パーツ)単位のSCSSファイル群
            _ブロック名.scss:
            page:ページ専用CSSが必要な時に使用するファイル群
            index.scss:トップページ専用デザイン定義
            setting:変数管理ファイル群
            _config.scss:サイト共通変数
            style.scss:使用するSCSSをインポートするファイル
            書き出されるCSS.css

20201120 WP・メイン、サブループの違いについて・他メモ

■メインループとサブループの違い
◇メインループ
スラッグをもとにWPが勝手に取得したページデータ
を使ってループをまわす
※基本的にこちらを使う

◇サブループ
条件を指定して取得したページデータを使ってまわすループ
※メインループとは違うページデータを
使いたい場合にこちらを使う

■ホームページ:front-page.php
◇投稿一覧
メインループ:投稿一覧情報

・管理画面の本文を表示できない
・配下ページに投稿一覧を専用テンプレートで
用意できない


◇固定ページ
メインループ:固定ページ情報

・管理画面の本文を表示できる
・配下ページに投稿一覧を専用テンプレートで
用意できる

上記ゆえにホームページは固定ページ指定が多く
お知らせ抜粋などの投稿一覧は
サブループで表示させることが多い

■投稿一覧:home.php
◇メインループ
先頭固定表示を先頭に配置した投稿一覧情報
表示上限件数は「設定」>「表示設定」の件数

■投稿詳細:single.php
◇メインループ
URLのスラッグをもとにした1ページ分の投稿情報

■固定ページ詳細:page.php
◇メインループ
URLのスラッグをもとにした1ページ分の固定ページ情報

■条件付き投稿一覧:archive.php
◇メインループ
条件に合致した投稿一覧情報
表示上限件数は「設定」>「表示設定」の件数

■検索結果一覧:search.php
◇メインループ
検索キーワードに合致した投稿一覧情報
表示上限件数は「設定」>「表示設定」の件数

 

 

 

〇学習メモ

フレームワーク
各言語に用意されているアプリケーションのひな型。

JS→https://playcode.io/
構築環境(ブラウザ版)
ローカル版もあるらしい


アーカイブとは

アーカイブの意味
アーカイブ(archive)とは、「公文書」や「保存記録」、「記録保管場所」、「~を保管する」
などの意味を持つ英語です。
元はラテン語の「アルキウム」という言葉が語源で、「もはや日常では使用しないが、
後年利用するために保管される書類」という意味で使われていました。そこから発展して、

ITの分野では「専用の保存領域を設け、そこへデータを安全に保存しておくこと」をアーカイブと言います。

アーカイブの種類
アーカイブという言葉は「データそのものを安全に保存する場合」と、「データを含んだファイルを圧縮する場合」の2種類で使われることがあります。

「データを安全に保存する」という意味でのアーカイブは、電子文書などのデータを長期間安全に管理・保存しておくことを指します。
一方で「ファイル圧縮」という意味でのアーカイブは、データをZIPのような圧縮ファイル形式で保存することです。

「データを保存する」という点ではどちらも変わりませんが、保存の目的や方法が異なります。
このため、単に「アーカイブ」と言われたときには、どちらを指しているのか確認すると良いでしょう。

 

→→要するにarchive.phpは「投稿一覧」を表示させるための記述をするファイルである。
スラッグを付けて「ブログ」「お知らせ」などの類分けを行う。

20201119 WP・サイト作成方法メモ

メモ

問い合わせフォームの設置


[tel* tel-1215 class:Form_tel placeholder "03-0000-0000"]

◇必須項目
[フォームの種類* 識別用名前]

◇任意項目
[フォームの種類 識別用名前]

◇クラス名付与
[フォームの種類 識別用名前 class:クラス名]

◇プレースフォルダー付与
[フォームの種類 識別用名前 placeholder"プレースフォルダー名"]


[_site_admin_email]
→_が入っている値はWPに元々入っている値
 
 
 


〇自分なりに考えたWP作成手順(ざっくり)
・カスタムテーマの作成
・必要ファイルの作成
・必須関数をfunction.phpファイルに記述
・必須プラグイン設定
・コーダーが作成したコードを取得→front-page.phpに貼り付け

※ここから作成手順も見ながら作業を進めるが下記の2点はまずやってみる
(効率が悪かったりうまくできなかった場合は変更)

・各要素のパーツ化(header、footer、カルーセル、main(archive等))
・メイン・サブループの設定

20201113授業メモ

wordpressCSS・JSを読み込む際はfunction.phpに読み込み専用のコード
を記述する。

WordPressのメリット・デメリット
WordPressとは→CMS
Webサイトを構成するテキストや画像、レイアウト情報などを一元的に保存
・管理し、サイトを構築したり編集したりするソフトウェア
→ブログシステムに近いもの
ホームページとの違い→デザイン性
ブログのように自分で簡単に投稿や編集が出来て、かつデザインも大手の
サイトのようにかっこいいものを作りたい。それを叶えてくれるのがWordPress
※業者に頼むと金かかる


WordPressのメリット
サイト構築が簡単
テンプレートが豊富
カスタマイズやテーマの情報が多い
カスタマイズが自由自在
管理や引き継ぎが楽
SEOに有利


WordPressのデメリット
表示速度が遅い
サーバ維持費がかかる
セキュリティに脆弱性あり



WordPressPHP言語との関係
一般ユーザはPHPの知識がなくてもサイト制作・編集が可能
WP上級ユーザはPHPを駆使して複雑なカスタマイズを行うことが可能
→最も一般的なWordPress PHP関数を知っておくだけでも、
WordPressウェブサイトの重要な調整を行うことができる。


WordPressPHPでカスタマイズする際に注意する事
1.本番環境ではなく開発環境で行うこと。
Windowsなら「Instant WordPress」というものがあるらしい

2.PHPファイルのバックアップとデータベースのバックアップを必ずとること
3.自分がやりたいことを実現できるテーマやプラグインを探す
→自分がやろうとしていることは既にやっている人がいたりする・・・。







〇授業内容
■フック
◇フィルターフック
文字列を加工する処理を追加できる場所
apply_filter関数
第一引数:フィルターフック名
第二引数:フックに渡す変数(加工に使用する値)
第三引数(任意):優先度
第四引数

add_filter関数
第一引数:フィルターフック名
第二引数:フックに渡す関数(加工に使用する処理)
第三引数(任意):優先度:初期値10
         数値が小さいほど優先される
         同じ数値の場合は登録順
第四引数:引数の数



◇アクションフック
フック地点に処理を追加する
do_action関数
第一引数:アクションフック名
第二引数(任意):変数

add_action関数
第一引数:アクションフック名
第二引数:追加する関数

20201111授業メモ

授業内容

 

昨日の続き

ブロック名_ _要素
(↑パーツ名)

〇記述したコードごと移動する方法
Alt+↑↓キー


〇next_post_link(
'%link',
'次の投稿'
);
// 初期値入力:次の投稿タイトルリンク>>

// ◇ループ内で呼び出す関数
// 第一引数:文字列全体の書式
// %link部分がリンク文字列になる
// %linkは必ず記述する事。
// 第二引数:リンク文字列
// 初期値:%title(次の投稿のタイトル)
// 第三引数:同じタクソノミーへの限定
// 初期値:false(限定しない)
// true(限定する)
// 第四引数:除外する投稿の設定
// 文字列指定:投稿IDをカンマ区切り
// 例)'1,3,5'
// 配列指定[1,3,5]
// 第五引数:タクソノミーの選択
// 第三引数trueのみ指定可能
// 初期値:'category'
// 例)'tag'


〇get_previous_post()
// 第一引数:同じカテゴリに限定するか
// 初期値:false(限定しない)
// true(限定する)
// next_post_linkの第三引数と同じ設定にする
// 第二引数:除外する投稿ID
// next_post_linkの第四引数と同じ設定にする
// 第三引数:タクソノミーの選択
// 初期値:'category'
// next_post_linkの第五引数と同じ設定にする


〇コードメモ(CSS
flex-wrap
フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定
nowrap;→横一列

wrap;→2列縦並び

wrap-reverse;2列縦並び・順番逆転


〇wp_get_object_terms
// wp_get_object_terms
// カテゴリーやタグのオブジェクトを取得
// 第一引数:取得する対象の投稿ID


〇セキュリティ対策(XSS対策)
内容:HTMLタグを無効化して対策

echoしているところでは基本必ず使う
※問題発生時は外すことを検討

1.esc_html関数
2.esc_attr関数
  内部でhtmlspecialchars関数を呼び出している
  HTMLタグやクォートを実態参照に変換
  1.HTMLタグ内での出力
  2.HTML属性内での出力

3.esc_url関数
  URLに適切でない文字を除去
  「&」「’」をエンコードする
  3.リンクのhref属性内のURL出力
   外部ファイル取得時のURL出力

4.wp_kses_post関数
  悪用される恐れのあるタグのみ除去する
  例)scriptタグ、onclick等のJS用属性
  4.タグ込みの文字列を出力


〇ctr+shift+f(H)
→「echo」にサニタイズされているかチェックできる。

20201110授業メモ

授業内容

 

昨日の続き

◇オリジナル部品を作成するときは命名規則を決めておくとよい
・今回の命名規則
partsフォルダに入れる
部品の大枠にあるclass名で名前を付ける

・パーツ化のメリット
コードがシンプルになる
慣れが必要ではあるが・・・。


プラグイン-Yoast Duplicate Post
→ページの「複製」がボタンで可能になる。


〇ページネーションのデザイン
Jobtechを参考に

前へ 1 2 3 次へ

数字をborderで□で囲う
オンマウス時に□の背景を変色させる。